こったんママの育児日記

自身の経験をもとに出産・育児に関する情報を発信していきます。

【ブログカスタマイズ】グローバルメニューを導入しました!

スポンサーリンク

f:id:kottanmom:20181003183017j:plain

こんにちは。こったんママ(@kottanmom)です。


100記事達成を目前に、当ブログにグローバルメニューを導入してみました!(↓こんなかんじ。)


f:id:kottanmom:20181003184134j:plain


それに伴いカテゴリーも見直して、かなり数を減らしました。


これまで難しそうだと思ってやらずにいたのですが、思いのほか簡単にできたのでやり方をメモ。

グローバルメニューの設置方法(自力編)


「グローバルメニュー はてな」で検索をかけると、山のように出てきます。


ほとんどがコピペOKなHTMLを紹介してくれているので、コピペしてURLとカテゴリー名を書き換えれば完了


カテゴリーごとのURLは管理画面の「カテゴリー」からそれぞれのカテゴリーを選択したときのもの(ブログURL/archive/category/カテゴリー名)をコピーしてメモ帳にまとめておきます。


コピペする場所は「デザイン」→「カスタマイズ」→「ヘッダ」→「タイトル下」です。


あとはCSSをいじって自分好みにカスタマイズしていく、というのが主流のようです。


▼こちらの記事を参考にされている方が多かったです。(PCとスマホでメニューの展開方法を分けるやり方が紹介されています。)
www.yukihy.com


私も初めはこちらの記事をベースに進めていたのですが、デザインを自分好みにしようと試行錯誤しているうちに途中で面倒くさくなってしまいました。笑

グローバルメニューの設置方法(おまかせ編)


そこで、そもそも今使っているテーマにそういう応用的なやつないの?という発想に。


はてなブログの管理画面からテーマストアに飛んでみると、、、ありました!


当ブログが使わせていただいているMinimalismでは「使い方・注意事項」の欄にあった以下の記事内に「ナビゲーションメニューを設置する」という項目が。


hitsuzi.hatenablog.com


ここにあったHTMLを先ほど説明した通りにコピペし、自分のサイトの情報に書き換えただけ!


もともと好きで選んだテーマに合わせたデザインなのでデザイン性も文句なし!


テーマを設定したときはまだ知識がなくてこんなところまで気が回らなかったけど、最初からやっておけばよかったです。

パンくずリストの表示


今回ついでに設定したのが“パンくずリスト”というもの。


記事の上に「トップ>カテゴリー名>記事名」の文字が表示されるようになりました。


これは読者が「自分が今サイト内のどの位置にいるのか」を視覚的にわかりやすくするためのものだそうです。


チェックを入れるだけで簡単に設定できましたよ!


▼設定の仕方はこちら
staff.hatenablog.com

まとめ


カテゴリーがわかりやすくなると、検索からたどり着いた読者が他の記事も読んでくれるかも?!


ブログカスタマイズは苦手な私ですが、無理せずできる範囲でベストな形を模索していきたいです。


スポンサーリンク