1つのテンプレートでデザインを変える
sb はカテゴリー毎にテンプレートを切り替える機能を標準で持っていますが、ちょっとした工夫で1つのテンプレートでデザインを切り替える事ができます。HTML と CSS の両方に手を加える必要がありますが、テンプレートを複数用意するよりも変更や修正が楽になるという大きなメリットがあります。また、テンプレートの切り替えでは記事のデザインをカテゴリー毎に変えても、トップや月別アーカイブではいずれかのデザインに固定されてしまいますが、この方法を使えば異なる記事デザインを混在させる事が可能です。
例えば Studio Ponytail WEB ではカテゴリー毎にカラーリングを変更していますが、月別アーカイブでも複数のカラーリングが混在しています。
この記事はテンプレートの HTML と CSS の書き換えができる人に向けた内容です。
原理
実は、そのカラクリは非常に単純です。sb には記事のカテゴリー ID を表示する独自タグ {category_id} があるのでこれを利用するだけです。例えば、カテゴリーによって記事タイトルの色を変えたい場合はタイトル部分を以下のようにします。<div class="title_color_{category_id}">{entry_title}</div>
こうすると実際に書き出される HTML は、カテゴリー ID が 1 の記事は <div class="title_color_1"> 、同様に ID 5 の記事なら <div class="title_color_5"> になります。あとは css で各スタイルを指定すれば、カテゴリーによって自動的にタイトルの色が変わります。.entry_title_1 { ← カテゴリー ID 1 の記事のタイトルは赤で表示される
color: #ff0000;
}
・
・
.entry_title_5 { ← カテゴリー ID 5 の記事のタイトルは青で表示される
color: #0000ff;
}
実際の利用
上で紹介したように、タイトルの色を変更する際にタイトルに直接 <div class="title_color_{category_id}"> を使ってしまうと、当然全てのカテゴリー ID に対応したスタイルを指定する必要があります。title_color_5 というスタイルを指定しない状態でカテゴリー ID 5 の記事を表示してしまうとスタイル指定のないプレーンな文字が表示されてしまいます。そこで、 <div class="entry_color_{category_id}"> といったものを記事全体に適用し、css で「複数の条件に該当した場合のスタイル指定」を行い個別に設定を割り当てます。
- HTML 側
<div class="entry_color_{category_id}">
<h2>{entry_title}</h2>
・
〜 entry ブロック全体 〜
・
</div>- css 側
.h2 { ← h2 要素を緑にする
color: #00ff00;
}
.entry_color_3 h2 { ← カテゴリー ID 3 の < h2> 要素を青にする
color: #0000ff;
}
著者によって色を変える事もできる
{category_id} の部分を {user_id} に変えれば記事を書いた人によって色を変える事もできます。自分一人で運営している blog の場合は意味がありませんが、何人か一緒に書いている場合は一目で誰が書いた記事が分かるので非常に便利です。おまけ
記事部分以外にこのテクニックを使うと、そこにはページに表示される一番上の記事のカテゴリー ID が割り当てられます。これを利用すれば記事部分以外もカテゴリー毎にデザインを変える事が可能です。（Studio Ponytail WEB のヘッダとフッタもそうやって表示しています）また、トップページのようにカテゴリーをまたいで記事が表示されるページに使うと、最新の記事によってデザインを変えるなんて事も可能です。