BuchoLOG Global

シンガポール駐在員の英語習得の取り組みやあまり知られていない海外情報を伝えるブログ

Minimalism グローバルメニューの設置方法

f:id:bucholog:20180519220156p:plain

わたしが現在利用しているテーマはMinimalismというテーマです。

その名の通りデザインがスッキリしており、わたしはこれが気に入っております。

このテーマにグローバルメニューを設定しました。

この設置を色々調べながらやったわけですが、情報が散見しており時間がかかってしまいました。

以下、重要な部分のみ参考サイト(後述)から一部抜粋して説明します。

これを読んで実施すれば、おそらく設定は5分程度の所要時間と思います。
(しかし、アイコン選びに時間がかかると、この時間をオーバーします。)

グローバルメニューの設定

設定前提

レスポンシブデザインに設定変更しておくことを忘れないでください。
はてなPro前提です。(無料バージョンはわかりません。)

コードの挿入

デザイン → PC → ヘッダ → タイトル下 に以下のコードを追加します。 コピペでOKです。

<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>
</nav>

URLの指定

リンク先の任意のURLに書き換えてください。

アイコンの設定

アイコンも自由に設定できますが、このアイコンを使うには以下の準備が必要です。

1)以下のコードを、グローバルメニューコードの上もしくは下に挿入してください。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

注)参考サイトの説明では、
設定→詳細設定→head要素内に記述する
となっていたのですが、わたしはうまく反映されなかったので、場所を変更しております。

2)下記リンクから好きなアイコンを選び、そのアイコンコードを貼り付けたコードの該当部分のものと置換します。

Icons | Font Awesome

3)いくつでも追加可能です。
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div>
    </div>

これが1セットになります。

参考サイト

こちらの2サイトを参考に設定しました。 上記手順でわたしは問題なく使用できておりますが、うまくいかない場合はオリジナルコンテンツをご確認願います。

hitsuzi.hatenablog.com

h2ham.net