ミセスGのブログ

海外ドラマ&映画の感想もガッツリ書いている、ホラーを愛する国際結婚&アメリカ在住女のブログです。

はてなブログのグローバルメニューに子カテゴリを設定する方法(3ステップ)

f:id:oclife:20170501062409j:plain

本日、はてなブログのグローバルメニューに子カテゴリを設定しました。

そもそも1か月前まで本サイトにはグローバルメニューさえ設置していませんでした。

別サイト One Chicago のデザインをいじっている時にグローバルメニューを入れたのがきっかけで、そのままこちらにも実装してみました。

とはいっても

Home 海外ドラマ 映画 About

という4つの親カテゴリだけで、味気ないグローバルメニューでした。

グローバルメニューはやはり目的のページを探しやすいですし、見栄えもいいので設置したほうが断然イイと思います。

自分が他の方のブログを訪問していても、一番クリックするのがこのグローバルメニューとサイドバーのカテゴリだったりします。

また、かねてから100記事以上もある海外ドラマ記事を子カテゴリに分類したいという思いもあって、子カテゴリを作ることを決意。グローバルメニューに子カテゴリを実装することにしました。

これまでは100記事以上ある中で特定のドラマの記事を探すのが大変だったかもしれませんが、グローバルメニューの設置により、海外ドラマ→ウォーキング・デッドというように目的のタイトルを探しやすくなったかと思います。

グローバルメニューに子カテゴリを設定する方法

今回グローバルメニューに子カテゴリを設定するにあたって、既存のグローバルメニューとそっくり差し替えました。

以前のグローバルメニューは子カテゴリのないグローバルメニューだったので、他の方のブログを参考にしながらそのまま子カテゴリを設定できるか色々とコードをいじってみたのですが、私の能力不足でうまく実装できませんでした。

そのため、子カテゴリのコードも含まれている新しいグローバルメニューを実装することにしました。

大きく分けると、3つのステップでグローバルメニューの子カテゴリが実装できます。

 

親カテゴリと子カテゴリの設定

グローバルメニューに子カテゴリを設定するには、まず子カテゴリを作る必要があります。

そこで、記事編集ページを開いて、子カテゴリを作ります。

親カテゴリに半角ハイフン、そして子カテゴリを入力します。スペースなしです。

親カテゴリ:海外ドラマ 子カテゴリ:ウォーキング・デッド の場合はこうなります。

f:id:oclife:20170501053215p:plain

次に「記事の管理」画面にうつって、まとめて子カテゴリを指定していきます。

f:id:oclife:20170501055342j:plain

一つずつ記事を開いて子カテゴリを設定していくのは大変なので、この方法が一番早くて簡単です。

 

 

パンくずリストの設置

次にパンくずリストを設定します。

はてなブログのパンくずリストではなく、CSSで設定します。

お世話になったのはこちらの池田仮名さんのブログ「太陽がまぶしかったから」です。

bulldra.hatenablog.com

こちらのコードでは、TOP>親カテゴリ>子カテゴリの3段階まで、パンくずリストを認識させることができます。

Googleが認識するのは、子カテゴリです。

サイドバーのカテゴリ欄で親カテゴリのみ表示させたい場合のコードも書かれています。子カテゴリまで表示してしまうとカテゴリがさらに増えてしまうので、これは助かります。ゆくゆくは親カテゴリをクリックすると、その下に子カテゴリが出る仕様にしたいです。

 

次はいよいよグローバルメニューの設定です。

グローバルメニューの設置

色々試しましたが、最終的にこちら「ゆきひー」さんのブログを参照してグローバルメニューを実装しました。

www.yukihy.com

デザインもシンプルで素敵です。

希望通りなので、コードを少しいじるだけでOKでした。

変更した点はというと、個人的にトグルが嫌いなので、トグルを取り除きました。

フォントとフォントサイズも変更しました。

また、縦と横のサイズも変更しました。

マウスオーバーするとこのように子カテゴリが現れます。

f:id:oclife:20170501061507p:plain

グローバルメニューはSEO的にもいいらしいし、目的記事を探すのにも便利ですよね。まだ設置していない方は、是非グローバルメニューの設置を検討してみてください。