【解説】ブログカスタマイズ：カテゴリーを階層化する（補足と問題点を追記）

ブログカスタマイズの第6回目です！

今回は、カテゴリーを階層化する方法があることを知ったので、早速導入していきます。

この「カテゴリーの階層化」はソフトの作者のページに導入方法が書かれていて、その内容で十分だったので、ここでは紹介だけを行います。

1つだけ補足すると、1つの記事に対して、「親カテゴリーA→子カテゴリーA」と「親カテゴリーA→子カテゴリーB」の両方を登録できます。これについて、少し説明を行います。

その後、1つ問題点が見つかりました。注目記事にカテゴリーを表示している場合、階層化を正しく認識できていないようです。

※2024/4/1追記：さらに、その後、「カテゴリーの階層化」のソフトを解析しました（【解説】はてなブログ：カテゴリ階層化のソースコードを解析する - daisukeの技術ブログ）が、現状は注目記事のカテゴリーを階層化に対応させるのは不可能という結論に至りました。

この記事が、誰かの助けになってくれたら嬉しく思います。

参考文献

はてなブログ Perfect GuideBook [改訂第2版]

はてなブログカスタマイズガイド: HTML & CSSで「はてなブログ」を次のステップへ!

はじめに

ブログカスタマイズの一覧です。良かったら参考にしてください。

ブログカスタマイズのまとめ

準備編：はてなブログのHTML/CSSの構造を解析する（1）
準備編2：はてなブログのHTML/CSSの構造を解析する（2）
第1回：「Minimalism」テーマのコードブロックの行間を調整する
第2回：「Minimalism」テーマのスマホで太字にならない問題の原因と対策
第3回：「Minimalism」テーマの目次の外観とリンク文字をカスタマイズする
第4回：「Minimalism」テーマの見出しをカスタマイズする
第5回：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする
第6回：カテゴリを階層化する（補足と問題点を追記） ← 今回
第7回：Minimalismのカスタマイズ2点と、2つの問題点（スマホで見たときの画像余白と画像と背景の境界）の解決
第8回：CSS対応のタイトル付きの囲み枠を使う方法（定型文に登録）
第9回：ページ全体の表示フォントを変更する
番外編：編集ボタンを表示させる（編集ボタンを復活させる）
番外編2：カテゴリー階層化のソースコードを解析する
発展編：自作のデザインテーマを作る

最初に、今回のまとめとして、外観のビフォーアフターを貼っておきます。

変更前

オリジナルのカテゴリーは階層化できない

変更後

カテゴリーを階層化できた

カテゴリーの階層化の導入方法

下記の作者の記事に丁寧な説明があるので、その通りに行えば、簡単に導入できます。

blog.wackwack.net

カテゴリーの階層化の補足

1つの記事について、1つの親カテゴリーに、2つの子カテゴリーを登録できます。

具体例をあげると、「テストページ：コードブロック」という記事のカテゴリーを設定する場合を考えます。

親カテゴリーとして、「ブログカスタマイズ」を設定します。

子カテゴリーとして、「HTML・CSS」と「Minimalism」を設定します。

記事「テストページ：コードブロック」の編集画面で、「ブログカスタマイズ」、「ブログカスタマイズ-HTML・CSS」、「ブログカスタマイズ-Minimalism」の順で設定すると、1つの親カテゴリーに2つのカテゴリーを設定できます。

1つの親カテゴリーに2つのカテゴリーを設定できる

この例では、パンくずリストとしては、「トップ > ブログカスタマイズ > HTML・CSS > テストページ：コードブロック」となることを想定しています。しかし、実際は、下図のように、「トップ > ブログカスタマイズ > Minimalism > テストページ：コードブロック」となってしまいます。

パンくずリストが想定とは違う第2階層になる

そこで、下図のように、「ブログカスタマイズ」、「ブログカスタマイズ-Minimalism」、「ブログカスタマイズ-HTML・CSS」の順で設定すると、「トップ > ブログカスタマイズ > HTML・CSS > テストページ：コードブロック」となってくれます。

子カテゴリーを入れ替えて設定してみる

パンくずリストが想定した第2階層になっている

つまり、想定とは逆の位置に子カテゴリーを設定すれば、想定した第2階層で表示できます。

カテゴリーの階層化の問題点

設置し終わってから気づきましが、注目記事のカテゴリーが階層化を認識できていないようです（スマホの表示も同様にダメでした）。

注目記事のカテゴリーは、階層化を認識できないようだ

注目記事のカテゴリーについては、前回の記事（【解説】はてなブログ：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする - daisukeの技術ブログ）で、カテゴリーの背景色に対応したところだったので残念です。

この問題点の対策としては、頑張ってJavaScriptを修正するか、注目記事のカテゴリー表示をやめるかのどちらかになりそうです。

前者に取り組むことも検討したいですが、ひとまず、後者の対策をとることにします。

前回の記事（【解説】はてなブログ：「Minimalism」テーマのサイドバーの各モジュールをカスタマイズする - daisukeの技術ブログ）に追記しました。

※2024/4/1追記：冒頭にも追記したように、JavaScriptを解析しました（【解説】はてなブログ：カテゴリ階層化のソースコードを解析する - daisukeの技術ブログ）が、注目記事のモジュールは、カテゴリーの階層化のJavaScriptが実行されるより、後のタイミングで作られるため、現在のはてなブログの仕組みでは不可能であることが分かりました。残念です。

今回は以上です！

最後までお読みいただき、ありがとうございました。