入口 > スポンサー広告 > スポンサーサイト テンプレ - カスタマイズ > 特定の記事の個別記事ページのみデザインを変える

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--------

特定の記事の個別記事ページのみデザインを変える

特定の記事の個別記事ページのみデザインを変えたいときは、以下のようにしてください。
例えばいつもと少し毛色の違う作品だから雰囲気を変えたいとか、記念日用ページだから背景やアイコンで遊びたいとか、企画概要ページだからお硬い感じにしたいとか、楽しい素材を見つけたから全ページはくどいけどすこーしだけ使ってみたいとか、などなど、試してみると楽しいかもしれません。
  1. テンプレスタイルシートの初めの方、「</head>」から12、3行下の「<div id="container">」の間にあるタグ群を下記青字部分で置換する。

    </head>

    <body id="<!--not_edit_area--><!--not_titlelist_area--><!--not_permanent_area--><!--not_date_area--><!--not_category_area--><!--not_search_area--><!--not_tag_area-->index<!--/not_tag_area--><!--/not_search_area--><!--/not_category_area--><!--/not_date_area--><!--/not_permanent_area--><!--/not_titlelist_area--><!--/not_edit_area-->
    <!--edit_area-->edit<!--/edit_area--><!--titlelist_area-->titlelist<!--/titlelist_area--><!--permanent_area-->permanent<!--/permanent_area--><!--date_area-->date<!--/date_area--><!--category_area-->category<!--/category_area--><!--search_area-->search<!--/search_area--><!--tag_area-->tag<!--/tag_area-->_body"<!--permanent_area--> class="category_cat<!--topentry--><%topentry_category_no><!--/topentry-->_body entry_no<!--topentry--><%topentry_no><!--/topentry-->_body"<!--/permanent_area--><!--category_area--> class="category_cat<%cno>_body category_date_<!--topentry--><%topentry_year><%topentry_month><!--not_edit_area--><!--/topentry--><!--topentry--><!--/not_edit_area--><!--/topentry-->"<!--/category_area-->>


    <div id="container">

    やりやすいかと丸ごと置換と書いてますが、肝心なのはブルー背景部分だけです。ここだけを該当箇所に挿入してももちろん構いません。

  2. デザインを変えたい記事の記事番号を確認する。(blog-entry-xx.htmlのxxに当たる数字です)

  3. テンプレスタイルシートの末尾に

    /*特定の記事のみデザインを変える*/
    .entry_noX_body  {  }

    と加え、赤字の「X」を確認した記事番号に書き換え、その後のピンク背景部分で好きなスタイルを指定する。
    どういったスタイル指定をすればどういった見た目になるかといったことは、当サイトカスタマイズ説明の各記事や、スタイルシートの解説サイトなどをご参照ください。

    例えば記事番号「18」だけ背景をピンク色に、記事本文のフォントサイズを大きめに、行間を広めにしたければ

    .entry_no18_body { background: pink; }
    .entry_no18_body .topentry_body { font-size: 120%; line-height: 2.5; }

    とするなど。

    複数の記事で同じスタイルを指定したいときは

    .entry_noX_body, .entry_noY_body, .entry_noZ_body {  }

    のようにして増やしてください。

2013-06-15
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。