こわいものみたさ

映画や旅行、グルメにマニアックな記事等「こわいものみたさ」で経験した事を、ブログに綴っています。

MENU
おすすめ記事(週次更新)

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

 

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

なお当ブログのテーマは「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の左上に検索窓がありますので、使いたいアイコンを英語で入力します。

Font Awesomeでアイコン検索

Font Awesomeでアイコン検索

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

Font Awesomeのアイコン検索結果

Font Awesomeのアイコン検索結果

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

Font AwesomeのHTML取得

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

ここまで出来たら、画面はこんな感じになってますね。

タイトル下の場所とHTML設定後の表示

タイトル下の場所とHTML設定後の表示

CSS設定

CSSに関しては、Yukihy Life様そのまま使わせていただきましたので、そちらのブログ様からコードをとってきてください。ナビゲーションメニューの背景色やリンク色などは、ご自身のブログデザインに合ったお好みの色に変更してみてください!スマホ画面での細かな設定も記載してくださっています!

CSS設定後はこんな感じになります。

【PC画面】

CSS設定後のPC画面でのナビゲーションメニュー

CSS設定後のPC画面でのナビゲーションメニュー

【スマホ画面】

ドグルメニュー(左未表示、右表示)

ドグルメニュー(左未表示、右表示)

以上になります。

今回のナビゲーションメニュー設定は、け~っこうてこづったカスタマイズでした。なかなかうまくいかず何度もやり直しましたがなんとか納得するところまで出来ましたね。なかなかPCもスマホも落ち着いた感じでスッキリしたと思います。(自己満足!?)

また次回は何か紹介したいと思います。それでは~。

【追記】2019年7月15日 トップページをカード型記事UPしました。