グローバルメニューとは
上の画像の赤枠で囲ったメニューのことです。
サイトの案内メニューですね。
主要コンテンツへのリンクが貼ってあります。
グローバルメニューを設置することで、探しているページがどこにあるかわかりやすくなります。
グローバルメニューのほかに、グローバルナビゲーション、ヘッダーメニューなどとも言います。
グローバルメニュー設置方法
今私が使っているテーマは、はてなブログで大人気の「Minimalism」です。
Minimalismのグローバルメニューの設置方法をご説明します。
①コードの貼り付け
→ PC → ヘッダ → タイトル下 に以下のコードを貼り付けます。
<nav id="gnav"> <div class="gnav-inner" id="menu-scroll">
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>
<div class="menu"><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></div>
<div class="menu"><a href="URL"><i class="fa fa-bolt" aria-hidden="true"></i> TIPS</a></div>
<div class="menu"><a href="URL"><i class="fa fa-graduation-cap" aria-hidden="true"></i> STUDY</a></div>
<div class="menu"><a href="URL"><i class="fa fa-wrench" aria-hidden="true"></i> DESIGN</a></div>
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
</div>
</div>
</nav>
②URL(赤字)の書き換え、必要であればアイコン名(青字)を書き換えます。
アイコン/webフォント(緑字)については、次にご紹介します。
上記のコードでは6個分のリンクを貼ることが可能になっていますが、もちろん減らすことも増やすことも可能です。
<div class="menu"><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></div>上記コードで一つ分のリンクです。
このように変更されました。
今までは(上画像)ヘッダー画像の下にすぐ記事がありましたが、変更後(下画像)ではヘッダー画像と記事の間にグローバルメニューが設置されています。
すっきりしていてわかりやすいですね。
アイコン(webフォント)の変更
アイコンの変更は緑色部分を変更すれば変わります。
アイコンの変更はfontawesomeを使用できます。
Font Awesome
HTMLやCSSを触らなくても一部のものははじめから使用可能でした。
どうやらはてなブログでははじめから使用可能なアイコンがあるようです。
こちらのサイト様がわかりやすかったです。
↓↓↓
【118種一覧表】はてなブログのフリーフォントアイコンの使いかた／表示されない対策も - Royal Naught
使いたいアイコンの「HTML名称」blogicon-〇〇〇の〇〇〇部分だけを
緑色の箇所に入力すると使用でできます。
118種類あるので通常の使用であれば十分ですね。
設置理由
せっかく私のサイトにわざわざ飛んでいただいたのに、お目当ての記事に辿り着けない、探しているページがどこにあるかわからないとSNSで言われたのです。
教えていただけただけありがたいですよね。
皆様のサイトに訪れて「あれ？探しているページが見つからないな…」と思われてもおそらく教えてくれないはず。
わかりにくいなと思われて、サイトをそっと閉じられるだけです。
もったいないことをしていたなと思いました。
実際カテゴリをサイト内に置いていますし、検索窓も置いているので、そこから飛べるのですが、ブログをやっていない人からしたら「なんだこのリンク？」という感じだと思います。
ブログを始める前の話ですが、検索でたまたま行き着いた個人のブログを見るたびにごちゃごちゃしていてわかりにくい＆この人の記事が見たいのに急に外部サイトに飛ぶ(内部リンクか外部リンクかわかりにくい)そんな風に思ったことを思い出しました。
サイトに訪れる人がみんなブログをやっているわけではないし、詳しいわけではないということを忘れていました。
グローバルメニューを設置することで少しでもユーザーファーストに近づけたかなと思います。
