「はてなブログ」の当ブログカスタマイズ紹介シリーズ、今回はナビゲーションメニューを紹介します。スマホの画面の時は、ドグルメニューになるようなレスポンシブな設定になっています。
なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。
前回のヘッダー(タイトル)に画像挿入の記事はこちら。
Font Awesomeを使う

Font Awesomeで楽にかわいいアイコン入手できるニャ
事前設定
当ブログでは、単純に文字のメニュー作るだけだと特徴が無いので、Font Awesomeのアイコンを使用しています。ウェブサイトやブログでアイコンフォントを利用できるサービスで無料でもかなりの多くのアイコンが使えます。Font Awesomeもバージョンが上がっておりバージョン5になってますので、使用するための準備をまずは紹介します。
Font Awesomeのサイトはこちらになります。英語のサイトです。
アイコンを使う方法として、アイコン全てをダウンロードして使う方法とCDNを使う方法があります。CDNは専用のサーバーに置かれているものを使わしてもらうイメージですね。はてなブログでは、CDNで使いましょう。
最初に、以下のコードを張り付けましょう。はてなブログでは、「設定」→「詳細設定」に進み、「headに要素を追加」の枠に張ります。
利用方法
Font AwesomeのサイトTOPの左上に検索窓がありますので、使いたいアイコンを英語で入力します。
検索結果一覧が出ます。有料会員でない場合は、左メニューにあるFreeを押すと無料アイコンのみに絞られます。
使いたいアイコンを選ぶと、デザインや大きさを確認でき、左上かStart Using This IconボタンからHTMLソースが取得できます。
以上で、アイコンの準備が整いました。
ナビゲーションメニュー設置
さて、本題のはてなブログにナビゲーションメニューの設定の仕方です。このやり方は、以下のブログ様を参考にさせていただきました。ありがとうございます。
HTML設定
基本的には、設定流用なのですが変更した箇所と手順を記入します。まずは、HTMLですが、ここにFont Awesomeのアイコンを使っているので、当ブログのコードを記入しておきます。
以下のコードを、はてなブログ管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」に記入ください。
2行目は、スマホ画面で見た時にトグルメニューになるので、その時に表示する文字になりますのでお好みで変更できます。例えば、カタカナがいい方は、MENU→メニューなどに変更できます。
5~10行目が、PC画面で見た時の設定です。ここでFont Awesomeのアイコンを使っています。"URL"と記載されている箇所はリンクさせたい実際のURLを記入ください。そして、<i class="fa fa-home" aria-hidden="true"></i>の部分に、最初に記述した、Font Awesomeのアイコンから取得したHTMLに変更ください。また</i> HOME</a></li>の部分のそれぞれに表示させる言葉も適宜変更ください。(いったん当ブログの設定を入れています)
ここまで出来たら、画面はこんな感じになってますね。
CSS設定
CSSに関しては、Yukihy Life様そのまま使わせていただきましたので、そちらのブログ様からコードをとってきてください。ナビゲーションメニューの背景色やリンク色などは、ご自身のブログデザインに合ったお好みの色に変更してみてください!スマホ画面での細かな設定も記載してくださっています!
CSS設定後はこんな感じになります。
【PC画面】
【スマホ画面】
以上になります。
今回のナビゲーションメニュー設定は、け~っこうてこづったカスタマイズでした。なかなかうまくいかず何度もやり直しましたがなんとか納得するところまで出来ましたね。なかなかPCもスマホも落ち着いた感じでスッキリしたと思います。(自己満足!?)
カスタマイズ関連記事
当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。
<ヘッダー(タイトル)に画像設定して個性的なブログに!>
<トップページ一覧形式をカード型にしてスタイリッシュに!>
<サイドメニューを工夫して回遊率アップを目指す!>