読者です 読者をやめる 読者になる 読者になる

はぴらき合理化幻想

海外3年/西成ドヤ2年/沖縄2年/事故物件で寝袋3年目、ミニマリスト10年目でダンボール2箱の持ち物と保存食で大阪に定住中。

はてなブログで階層化した親子カテゴリーをCSSカスタムで擬似的に表示する方法

はてなブログの標準機能では今のところカテゴリーを階層化できない。サイドバーやフッターにカテゴリー一覧を表示している場合、CSSを編集することで擬似的に階層化でき、親子カテゴリーのように見せることはできる。

概要

ブログのソースを開き、各カテゴリーのURLを確認する。親にしたいカテゴリーのURLをコピペでCSSに加えてスタイルを適用する。OSがWindows、ブラウザがChromeの場合で解説。

CSS設定ビフォー・アフター

ビフォー

親子の区別なくカテゴリーが並んでいる。カテゴリーというよりもタグという方が合っているね。

アフター

親カテゴリーだけで一行使って太字になっている。CSSを編集すれば好きな様にカスタムできるが、子カテゴリーは従来と同じ表示にした。

はてなブログ親子カテゴリーをCSSで

親と子のアドラー心理学

以下、擬似的な親子カテゴリーを設定する手順を述べる。

カテゴリーページのURLを確認

自分のブログをブラウザで開き、CtrlUでソースを表示する。

CtrlFで次の文字列を検索すると、各カテゴリーのURLが並んでいる部分が表示される。

  • hatena-module hatena-module-category

検索すると下図のとおりオレンジ色でハイライトされる。黄色のマーカー部分が各カテゴリーのリンクURL。

たとえば、当ブログのシンプルライフ・カテゴリーであれば、次のURLになっている。日本語部分はエンコードされていて人間には読めない。

http://hapilaki.hateblo.jp/archive/category/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%95

追加するサンプルCSSコード

次のコードのように、URLのcategory以下をセレクタとして使う(背景色が黄色の部分)。月日が経過してもエンコードされている部分を分かりやすくするために、コメントアウトで「/*シンプルライフ*/」と近くに書いておくと便利。

/*シンプルライフ*/
.hatena-module-category a[href*="category/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%95"]{
  display:block;
  font-size:16px;
  font-weight:bold;
  margin-left:-15px;
}

親カテゴリーにしたいカテゴリーだけにスタイルを追加していけば、擬似的に階層化されたカテゴリーがサイドバー(フッター)に表示される。

なお、上記サンプルCSSコードは当ブログ用のプロパティおよび値なので、あなたのブログに合わせて適当にプロパティや値を設定するとよい。

子カテゴリーに親カテゴリー名が含まれる場合

たとえば子カテゴリー名を「シンプルライフ-健康」としている場合、上記コードだとこの子カテゴリーもCSSが適用されてしまう。

親カテゴリーの「シンプルライフ」だけ適用して子カテゴリーの「シンプルライフ-健康」にはCSSを適用させない場合は次のコードでいけるはず(未検証)。背景色が黄色の部分が上記コードと異なるだけ。

/*シンプルライフ*/
.hatena-module-category a[href$="category/%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%83%A9%E3%82%A4%E3%83%95"]{
  display:block;
  font-size:16px;
  font-weight:bold;
  margin-left:-15px;
}

はてなブログのCSSを編集する方法

次のページで図解している。2014年2月のキャプチャー画像なので、現在の編集画面とは若干異なるが、だいたい合っているので今でも参考になるはず。

売れ筋ランキング: HTML の中で最も人気のある商品です

まとめ

カテゴリーが多くなってくると、見た目だけでもカテゴリーを親子で分けるとすっきりする。CSSを編集すれば親カテゴリーの上にラインを引いたり、子カテゴリーの文字をもっと小さくしたりできる。自己責任でいろいろやってみてね(^^)

てすとてすと