はてなブログ カテゴリ階層化（カテゴリリスト、パンくずリスト）
デザインテーマ設定はこちらの記事
本ブログのテーマ
本ブログのテーマは人気のbrooklynを使っています。
Brooklyn - テーマ ストア
しかしながら、公式パンくずリストは”カテゴリー階層化”には対応しておらず、デフォルトで一つ目のカテゴリだけが表示されているので、階層化の設定を行いました。 自身の備忘録でもあるため、カテゴリ整理はきちんとしたいところ。
やりたいこと
パンくずリスト
カテゴリーリスト
設定内容
3つの設定が必要で、1つでも設定していないと反映されない。
カテゴリの設定
親カテゴリ
- ビジネス
- キャリア
- 開発
- ブログ
という感じでで大きなカテゴリを設計しています。 今後変更する可能性もありますが。。。
親カテゴリと小カテゴリ
本ブログの親カテゴリと子カテゴリの構成を整理（予定）すると
- ビジネス
- DX
- SX
- サスティナブル
- キャリア
- マネジメント
- コミュニティ
- メンター
- 副業・複業
- 開発
- ノーコード
- Bubble
- ブログ
カテゴリ追加
2階層下に置く記事にカテゴリを追加します。
例えば、
・開発→ノーコード
というカテゴリに置きたい記事に、
開発と開発-ノーコードという2つのカテゴリを設定をすればOKです。
設定方法は、
- 親カテゴリを最初に置く
- 小カテゴリの名前は＜親カテゴリ＞半角ハイフン＜子カテゴリ＞とする
画像イメージ
パンくずリスト設定
次はパンくずリストの設定です。 こちらを参考にさせていただきました。 www.tokidokioton.com blog.wackwack.net
パンくずリスト表示
標準機能のパンくずリストをONにする必要があるため、「デザイン」→「カスタマイズ」→「記事」にある「パンくずリスト」にチェック
スクリプト設定
「id:WorldWorldWorld」さんから提供いただいているスクリプトを設定します。
blog.wackwack.net
フッタ
「デザイン」→「カスタマイズ」→「フッタ」に以下を貼付。
ヘッダ
「デザイン」→「カスタマイズ」→「ヘッダ」にすすみ、以下を貼付。
カテゴリ設定
スクリプト設定完了後に、「デザイン」→「カスタマイズ」→「サイドバー」へすすみ、「カテゴリ」のモジュール設定から「並び替え順」を「アルファベット順」に変更。
カテゴリリストのデザイン変更
リスト表示に変更したい場合は、以下ソースを貼付。
/* カテゴリを一行表示 */
div.hatena-module-category div.hatena-module-body ul li {
display: block;
float: none;
}
以下のようになります。
注意点
トップの場合と各ページで挙動が異なる。
トップは以下のような画像になってしまう。今度調査しよう。
※分かる方いたら、コメントください。
