はてなブックマークのトップみたいに、カテゴリごとにボーダーの色を変更とかできないかな？と思ってたのですが、なんとなくできそうなのでメモメモ。ただし運用で何とかするものなのでそういうテーマとかではないです。
仕様確認
カテゴリが付与される場所
はてなブログでカテゴリを指定すると、いくつかの場所にそのカテゴリ名のついたクラスが加えられます。
トップページでは記事単位の<article>にあるentry-categoriesの中、つまり普通にカテゴリ名にクラス名がつきます。クラス名が「暮らし」であれば
<div class="entry-categories categories"> <a href="http://www.foxism.jp/archive/category/%E6%9A%AE%E3%82%89%E3%81%97" class="entry-category-link category-暮らし">暮らし</a> </div>
となります。
個別ページの場合は、やはりカテゴリ名の表示部分にトップページと同じものが記述されています。そのほか、<body>タグにもクラスが付与されています。
<body class="page-entry enable-top-editarea enable-bottom-editarea category-暮らし">
こんな感じです。
クラス名に普通に日本語使うんですね。まぁその是非は置いておいて、使われているのだから使えばいいんです。
複数のカテゴリがある場合
クラス名はその順番も重要になります。
はてなブログの場合、bodyなどに書かれるクラス名や、表示されるカテゴリ名の順番は「記事作成画面で選んだ順」です。50音順とかではなく、任意で選んだ順番がそのまま表示やクラス名になります。
cssは後から書かれたもので上書きされていくので、それも念頭に置いて書く必要がありますね。
使い方
まだ具体的に作ってないので頭のなかにあるだけですが、トップページでは
.entry-categories a.category-暮らし:first-child{ border-top:#333; }
とでもすれば、「暮らし」カテゴリが最初にあった時に、そのaタグ部分がborder-top:#333;になるんじゃないでしょうか。たぶん。:first-childをつけたのは、これがないとたぶん最後に記述されたクラスのスタイルが最終的に適用されるからです。
個別ページでは、bodyにカテゴリ名がつくのでわりと簡単にできる気もしますが、ここも選んだ順番でクラスも記述されていくので注意が必要そうです。
テーマにできる？
これを使ったテーマ…うーん…。人によってクラス名が違うので、ちゃんと使うには自分でcssをある程度入力してもらう必要のあるテーマになっちゃいますね。そんなんで良ければ作れそうな気はしますが。
ただ、自分が作るサイトでそのうち使うかもしれないので、その時のためにメモメモ。
