【はてなブログ】グローバルメニューをヘッダに表示させる方法（Minimalismがおすすめ）
こんばんは、balbal4です。
私は「はてなブログ」でブログを書いています。
ブログ運営においては、ユーザーに読みやすく優良な記事を提供することが集客につながる重要な要素となります。
サイトを訪問したユーザーが興味をもった記事を検索してくれる工夫が必要ですが、その一つが「グローバルメニュー」の提供です。
今回は、そのグローバルメニューの作成を紹介します。
グローバルメニューとは
グローバルメニュー（ナビゲーションメニューとも呼ばれるようですが）とは、主にヘッダにカテゴリーを表示させて、サイト訪問者に当サイトではこういったカテゴリーを書いていますよ！と興味を持ってもらうためのサービス向上メニューだと思ってもらえれば結構です。
特にスマホだと、プロフィールや最新記事は記事下ページまでいかないと見えませんから興味があるカテゴリーが見えないとユーザは別サイトに離れてきます。
そういったことを極力防ぎ、自分のサイト内を周遊してもらう確率を上げるためにもやらないよりやったほうが絶良いと思います。
グローバルメニューを表示する方法
グローバルメニュー（ナビゲーションメニュー）とも言われていますが、ヘッダにあるココですね。（下図赤印）
ページのTOPにあるので、このサイトが主にどういったカテゴリーで記事を書いているのかよくわかります。（ちなみに私が載せているのは主要カテゴリーのみです。実際のカテゴリーは１０個程度あります）
私のデザインテーマは「Minimalism」ですが、これはグローバルメニューの表示に対応できます。
・デザインテーマの変更についてはこちら
www.asset-story.com
Minimalismのページの中段に、「ナビゲーションメニューを設置」するとありますのでそこを読むとよくわかりますが、ここでもわかりやすく説明します。
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 - ひつじの雑記帳
以下のソースをヘッダのタイトル下に貼付けしますが、自分で編集する部分が必要ですので説明します。
<!--グローバルメニュー--> <nav id="gnav"> <div class="gnav-inner" id="menu-scroll"> <div class="menu"><i class="アイコン" aria-hidden="true"></i><a href="URL">カテゴリ名1</a></div> <div class="menu"><i class="アイコン" aria-hidden="true"></i><a href="URL">カテゴリ名2</a></div> <div class="menu"><i class="アイコン" aria-hidden="true"></i><a href="URL">カテゴリ名3</a></div> <div class="menu"><i class="アイコン" aria-hidden="true"></i><a href="URL">カテゴリ名4</a></div> <div class="menu"><i class="アイコン" aria-hidden="true"></i><a href="URL">カテゴリ名5</a></div> </div> </nav>
１点目 ”アイコン”と記載されているところはカテゴリ名の左にアイコンを表示させたい時に使います。
使用しない人は＜i～ /i＞までを削除してください（私は適切なアイコンを探すのが面倒になり使用していません）
アイコンの文字列のところは、FontAwesomeを使用してください。
※詳細はURLに記載していますがちょっと色々設定手続きがあります。
楽して便利！Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO
２点目 "カテゴリ名"は自分の表示させたいカテゴリー名を書きましょう。なお、ここでは5個まで表示させていますが、スクロールができるよう対応していますので、読み手が不便にならない程度に増やすことは可能です。
ただスマホ表示だとあまり下段のカテゴリーは画面に入らないため、読者にぱっと見表示されないように見えます。自分が力を入れている記事があるカテゴリーや、記事数が多いカテゴリーなど主力に絞りましょう。
３点目 "URL"のURLという文字列は自分のサイトのカテゴリ別のURLを指定します。
例えばカテゴリ名１のところはだいたいTOPページなので自分のブログURLになると思います。
私の場合は以下のようになります。(アイコンなし）
<div class="menu"><a href="https://www～.com/">HOME</a></div>
この自分でテキストなどで作成したソースをコピーして、デザイン→ヘッダ→タイトル下に貼り付けます。
プレビューで表示されたらリンクが飛ぶか確認しましょう。
それでは。
最後まで読んで頂きましてありがとうございました。
