Minimalism グローバルメニューの設置方法
わたしが現在利用しているテーマは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に書き換えてください。
アイコンの設定
アイコンも自由に設定できますが、このアイコンを使うには以下の準備が必要です。
１）以下のコードを、グローバルメニューコードの上もしくは下に挿入してください。
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
注）参考サイトの説明では、
設定→詳細設定→head要素内に記述する
となっていたのですが、わたしはうまく反映されなかったので、場所を変更しております。
２）下記リンクから好きなアイコンを選び、そのアイコンコードを貼り付けたコードの該当部分のものと置換します。
３）いくつでも追加可能です。
<div class="menu"><a href="URL"><i class="fa fa-envelope-o" aria-hidden="true"></i> CONTACT</a></div> </div>
これが１セットになります。
はてなブログのMarkdown法における複数行改行コードは、＜br＞、＜br/＞、＜br /＞のいずれかを連続して入力すればOK
参考サイト
こちらの２サイトを参考に設定しました。 上記手順でわたしは問題なく使用できておりますが、うまくいかない場合はオリジナルコンテンツをご確認願います。
