ガイコツブログ

お酒、ラーメン、映画、etcの気ままな雑記ブログ

ガイコツブログ

〔はてなブログ〕カテゴリを階層化してグローバルメニュー、カテゴリリスト、パンくずリストに反映させてみた

こんにちは。ガイコツです。

 

いきなりですが、ブログのテーマは何を使ってますか?わたくしは人気のbrooklyn使わせていただいてます。

Brooklyn - テーマ ストア

 

このたび、カテゴリの階層化を突然思い立ちチャレンジしました。 

 

 

下準備−親カテゴリと子カテゴリの用意−

 

 

まずは、親カテゴリと子カテゴリをどういった構成にするのか、整理してみます。

 

弊ブログにおいて、

  • 投資
  • 雑記
  • ブログ運営
  • ガイコツについて

というスタイルでカテゴライズしているところ、これを

 

・投資
 →仮想通貨
 →その他
・レビュー
 →映画
 →お酒
 →ラーメン
・ブログ運営
・雑記
 →管理人ガイコツについて
 →その他

 

という感じに変更したい。

レビュー記事のボリュームが増えそうなんですよね…

 

では実際にやっていきましょう。

 

2階層下に置く記事にカテゴリを追加していきます。例えば、

・投資→仮想通貨

というカテゴリに置きたい記事に、

投資 と 投資-仮想通貨

という2つのカテゴリを与えます。

 

ルールは、

  • 親カテゴリを最初に置く
  • 小カテゴリの名前は<親カテゴリ>半角ハイフン<子カテゴリ>とする

カテゴリー設定の方法


こんな具合にすすめていきいましょう。

 

 

パンくずリストの設定と、カテゴリーのリスト化 

 

 

 次はパンくずリストの設定と、カテゴリのリスト化です。

こちらを参考にさせていただきました。ありがとうございます。

www.tokidokioton.com

 

 

 

パンくずリストのツリー化

こんな感じで、パンくずリストのツリー化ができました。

サイドバーのカテゴリーはこんな感じ。

f:id:gaikotsublog:20180204135208p:plain

矢印をクリックするとツリーが展開します。

リスト化したカテゴリーが展開する



グローバルメニューのプルダウン化

 

最後は、グローバルメニューのドロップダウン化。これはbrooklynの作者であるシロマさんがコードを公開してくださってました。ありがとうございます。

www.notitle-weblog.com

 

 

まとめ(反省)

 

これだけの作業なのに6時間くらいかかってしまった(T_T)

ホント泣きたい(T_T)

しかも、なんか色々いじってるうちにグローバルメニューの高さが変わってしまって見た目が悪くなってしまうし…ヘボすぎだろおれ(T_T)

 

次回のこういうデザイン改造時はちゃんとバックアップ取ってやります。

みんなも気をつけてね(T_T)