はてなブログのデザイン「Minimalism」のナビゲーションメニューを変更する方法
はてなブログの「Minimalism」のナビゲーションメニューを変更する方法はそんなに難しくない！
ブログ開始3ヶ月目に、はてなブログのデザインを「Minimalism」に変更して、カスタマイズしてみたシリーズ。
今回は、そのステップ4：
ナビゲーションメニューの変更
についてご紹介します。
こちらの記事でご紹介したように、デザインテーマ「Minimalism」の「使い方・注意事項」ページにある通りにナビゲーションメニューを設置した後の話になります。
この設置したナビゲーションメニューの内容を、自分仕様にデザインをカスタマイズする必要があります。
Minimalismのナビゲーションメニュー
設置したナビゲーションメニューを見ると、メニューの表示が「アイコンと英字の組み合わせ」になっています。
なので、ここで変更しないといけないことが：
✳︎ メニュー名
✳︎ 変更したメニュー名にちなんだアイコンにする
✳︎ メニューのリンク先URL
の3点になります。
メニュー名はただの文字なので、文字を入力しなおせばOKですが。
アイコンは「FontAwesome」というものを使っているとのことで、変更する時もこのアイコンを使います。
ナビゲーションメニューの変更方法
ナビゲーションメニューの変更は、誤操作を防ぐため、ナビゲーションメニューを設置した時のコードをコピーしてメモ帳に貼り付けて、メモ帳で変更していきます。
メニュー名の変更
メモ帳に貼り付けたコードの中の、「HOME」や「ABOUT」などのメニュー名の文字を消して、自分のメニュー名に書き換えます。
変更したメニュー名にちなんだアイコンにする
「アイコンは別に要らない」という場合、または「アイコン面倒くさい」という場合は、コード内の
「<i class="fa fa-info-circle" aria-hidden="true"></i> 」
という部分を全て削除すればOKです。
アイコン付きがいいな、という方で、自分のメニュー名に合ったアイコンに変更したい場合は、私がやってみた方法をご紹介します。↓
例えばスマホのアイコンにしたいな、という場合：
まずは「Font Awesomeアイコンを素早く検索しコピー。Photoshopなどでの使い方」というサイトへ行きます。
そして、以下のA・Bのどちらかの方法で使いたいアイコンを見つけます。
アイコンの見つけ方A
「Web Application Icon」というところ以下に、ズラーっとアイコンが表示されています。
その中から使いたいアイコンを見つけて、クリックします。
↓
すると、「コピーしてください」という表示が出るので、そのコードの「fa fa-mobile-phone」の部分をコピーします。
↓
最初にナビゲーションメニューを設置した時のコード「<i class="fa fa-info-circle" aria-hidden="true"></i> 」などの、赤字部分をコピーしたコードに置き換えればOKです。
アイコンの見つけ方B
「絞り込み」という検索欄に「mobile」と英語で入力すると、候補のアイコンの名前が出てきます。
↓
スマホを意味する「mobile−phone」を選ぶと、その下にある「Web Application Icon」というところに、アイコンが表示されます。
そのアイコンでOKなら、そのアイコンをクリックします。
↓
あとは、見つけ方Aと同じ流れで、コードをコピーして元のコードから置き換えます。
メニューのリンク先URLを入力する
リンク先のページのURLをコピーして、元のコードの「URL」の文字を消して、そこに貼り付けます。
このナビゲーションメニューのカスタマイズは、この方法を見つけるまでちょっと苦戦しましたが、この方法で無事にできたので良かったです。(´ｰ｀)
ここで、ひと山超えた感じ。
次は、シェアボタンの設置。これコピペだけで簡単でした。(^ ^)
kayoko＠おうちcafe
はてなブログのデザインを「Minimalism」に変更して、カスタマイズしてみたシリーズ
✳︎ はてなブログのテーマストアから「Minimalism」をインストール
✳︎ ナビゲーションメニューの変更 （ここ）
