【はてなブログカスタマイズ】Font Awesome使用し、レスポンシブなナビゲーションメニューを設置

Font Awesomeを使う
- 事前設定
- 利用方法
ナビゲーションメニュー設置
- HTML設定
- CSS設定
カスタマイズ関連記事

「はてなブログ」の当ブログカスタマイズ紹介シリーズ、今回はナビゲーションメニューを紹介します。スマホの画面の時は、ドグルメニューになるようなレスポンシブな設定になっています。

なお当ブログのテーマは「Minimalism」を使用し、レスポンシブデザイン設定にしていますので、他のテーマでは同様のカスタマイズができないこともありますので、ご了承ください。

前回のヘッダー（タイトル）に画像挿入の記事はこちら。

Font Awesomeを使う

Font Awesomeで楽にかわいいアイコン入手できるニャ

事前設定

当ブログでは、単純に文字のメニュー作るだけだと特徴が無いので、Font Awesomeのアイコンを使用しています。ウェブサイトやブログでアイコンフォントを利用できるサービスで無料でもかなりの多くのアイコンが使えます。Font Awesomeもバージョンが上がっておりバージョン5になってますので、使用するための準備をまずは紹介します。

Font Awesomeのサイトはこちらになります。英語のサイトです。

アイコンを使う方法として、アイコン全てをダウンロードして使う方法とCDNを使う方法があります。CDNは専用のサーバーに置かれているものを使わしてもらうイメージですね。はてなブログでは、CDNで使いましょう。

最初に、以下のコードを張り付けましょう。はてなブログでは、「設定」→「詳細設定」に進み、「headに要素を追加」の枠に張ります。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

利用方法

Font AwesomeのサイトTOPの左上に検索窓がありますので、使いたいアイコンを英語で入力します。

検索結果一覧が出ます。有料会員でない場合は、左メニューにあるFreeを押すと無料アイコンのみに絞られます。

使いたいアイコンを選ぶと、デザインや大きさを確認でき、左上かStart Using This IconボタンからHTMLソースが取得できます。

以上で、アイコンの準備が整いました。

ナビゲーションメニュー設置

さて、本題のはてなブログにナビゲーションメニューの設定の仕方です。このやり方は、以下のブログ様を参考にさせていただきました。ありがとうございます。

HTML設定

基本的には、設定流用なのですが変更した箇所と手順を記入します。まずは、HTMLですが、ここにFont Awesomeのアイコンを使っているので、当ブログのコードを記入しておきます。

以下のコードを、はてなブログ管理画面から「デザイン」→「カスタマイズ」→「ヘッダー」→「タイトル下」に記入ください。

<!--ナビゲーションメニュー-->
<span class="menu-toggle"><i class="blogicon-reorder lg"></i>MENU</span>
<ul id='menu'>
<div class="menu-inner">
<li><a href="URL"><i class="fa fa-home" aria-hidden="true"></i> HOME</a></li>
<li><a href="URL"><i class="fa fa-info-circle" aria-hidden="true"></i> ABOUT</a></li>
<li><a href="URL"><i class="fa fa-video" aria-hidden="true"></i> MOVIE</a></li>
<li><a href="URL"><i class="fa fa-plane" aria-hidden="true"></i> TRIP</a></li>
<li> <a href="URL"><i class="fa fa-utensils" aria-hidden="true"></i> FOOD</a></li>
<li> <a href="URL"><i class="fas fa-pencil-alt" aria-hidden="true"></i> BLOG</a></li>
</div>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $(".menu-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
     $(window).resize(function(){
    var win = $(window).width();
    var p = 768;
    if(win > p){
      $("#menu").show();
    } else {
      $("#menu").hide();
    }
  });
</script>

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>の部分のそれぞれに表示させる言葉も適宜変更ください。（いったん当ブログの設定を入れています）