本日、はてなブログのグローバルメニューに子カテゴリを設定しました。
そもそも１か月前まで本サイトにはグローバルメニューさえ設置していませんでした。
別サイトのデザインをいじっている時にグローバルメニューを入れたのがきっかけで、そのままこちらにも実装してみました。
とはいっても
Home 海外ドラマ 映画 About
という４つの親カテゴリだけで、味気ないグローバルメニューでした。
グローバルメニューはやはり目的のページを探しやすいですし、見栄えもいいので設置したほうが断然イイと思います。
自分が他の方のブログを訪問していても、一番クリックするのがこのグローバルメニューとサイドバーのカテゴリだったりします。
また、かねてから１００記事以上もある海外ドラマ記事を子カテゴリに分類したいという思いもあって、子カテゴリを作ることを決意。グローバルメニューに子カテゴリを実装することにしました。
これまでは１００記事以上ある中で特定のドラマの記事を探すのが大変だったかもしれませんが、グローバルメニューの設置により、海外ドラマ→ウォーキング・デッドというように目的のタイトルを探しやすくなったかと思います。
グローバルメニューに子カテゴリを設定する方法
今回グローバルメニューに子カテゴリを設定するにあたって、既存のグローバルメニューとそっくり差し替えました。
以前のグローバルメニューは子カテゴリのないグローバルメニューだったので、他の方のブログを参考にしながらそのまま子カテゴリを設定できるか色々とコードをいじってみたのですが、私の能力不足でうまく実装できませんでした。
そのため、子カテゴリのコードも含まれている新しいグローバルメニューを実装することにしました。
大きく分けると、３つのステップでグローバルメニューの子カテゴリが実装できます。
親カテゴリと子カテゴリの設定
グローバルメニューに子カテゴリを設定するには、まず子カテゴリを作る必要があります。
そこで、記事編集ページを開いて、子カテゴリを作ります。
親カテゴリに半角ハイフン、そして子カテゴリを入力します。スペースなしです。
親カテゴリ：海外ドラマ 子カテゴリ：ウォーキング・デッド の場合はこうなります。
次に「記事の管理」画面にうつって、まとめて子カテゴリを指定していきます。
一つずつ記事を開いて子カテゴリを設定していくのは大変なので、この方法が一番早くて簡単です。
パンくずリストの設置
次にパンくずリストを設定します。
はてなブログのパンくずリストではなく、CSSで設定します。
お世話になったのはこちらの池田仮名さんのブログ「太陽がまぶしかったから」です。
こちらのコードでは、TOP＞親カテゴリ＞子カテゴリの３段階まで、パンくずリストを認識させることができます。
Googleが認識するのは、子カテゴリです。
サイドバーのカテゴリ欄で親カテゴリのみ表示させたい場合のコードも書かれています。子カテゴリまで表示してしまうとカテゴリがさらに増えてしまうので、これは助かります。ゆくゆくは親カテゴリをクリックすると、その下に子カテゴリが出る仕様にしたいです。
次はいよいよグローバルメニューの設定です。
グローバルメニューの設置
色々試しましたが、最終的にこちら「ゆきひー」さんのブログを参照してグローバルメニューを実装しました。
デザインもシンプルで素敵です。
希望通りなので、コードを少しいじるだけでOKでした。
変更した点はというと、個人的にトグルが嫌いなので、トグルを取り除きました。
フォントとフォントサイズも変更しました。
また、縦と横のサイズも変更しました。
マウスオーバーするとこのように子カテゴリが現れます。
グローバルメニューはSEO的にもいいらしいし、目的記事を探すのにも便利ですよね。まだ設置していない方は、是非グローバルメニューの設置を検討してみてください。
