雑記ブログ卒業

生活に役立つ雑記ブログ

はてなブログ『Minimalism』にグローバルメニューを設置する方法

こんにちは。『ざっきぶろぐ』です。

 

私は以前、はてなブログの Minimalism というテーマストアを愛用していました。

 

すごくシンプルで見やすく、余計な機能が入っていないのでお気に入りなんです。はてなブログの初心者の方はぜひ使ってほしいデザインです。

 

ただ、シンプルなデザインでも色々とカスタマイズはしたいですよね。

 

今回の記事では、『Minimalism』にグローバルメニューを設置する方法をご紹介します。このテーマをさらにお洒落に使いこなしたい方は読んでみてください。

 

f:id:zakkiblog:20200306024215j:plain

はてなブログ公式サイト参照

グローバルメニューとは

まず、グローバルメニューとは何かについて少しだけ説明しますね。

 

グローバルメニューとは一言でまとめると『そのサイトの主要な記事へのリンクがまとめられている目次』のことです。

 

私のサイトでいうと下のオレンジ色の部分がグローバルメニューになります。メニューボタンのことですね。

 

※現在、当サイト『雑記ブログ卒業』はSOHOというテーマストアを使用しています。

 

f:id:zakkiblog:20200306025100j:plain

www.zakkiblog.net

 

ありがたいことに、Minimalism はレスポンシブに対応しています。タブレットやスマホで閲覧する場合にも表示されるので便利です。

 

このメニューボタンがあるのと無いのとでは見やすさが全然違います。

例えば...

読者がどんなサイトなのかをすぐに見分けられる。

Googleがサイトをチェックする時に巡回しやすくなる。

 

こういった利点があります。なので、カテゴリー毎に分けてメニューを設置するのはおすすめなんですね。では早速『Minimalism』にグローバルメニューを設置する方法をご紹介します。

 

はてなブログ『Minimalism』にグローバルメニューを設置する方法

タイトル下にコードを追記する

f:id:zakkiblog:20200306030426j:plain

www.zakkiblog.net

 

まずは以下のコードをコピペして、

デザイン>カスタマイズ>ヘッダ>タイトル下

に貼り付けます。

 

<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』という部分に、自分のページを貼り付けます。

赤い色の部分はそれぞれのカテゴリの名前に変えます。

 

下の画像のように表示されれば大成功です。

お疲れさまでした。

 

f:id:zakkiblog:20200306032317j:plain

www.zakkiblog.net

 

アイコンを変更する場合

アイコンを変更したい場合は、『FontAwesome』の設定を行う必要があります。

 

FontAwesomeとは、一言で表すとWEBサイトやブログに、アイコンを表示できるようにするサービスのことです。 

 

少しやり方が難しいのですが以下の記事が参考になるかと思います。

 

サルワカさんの記事

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

AMADYさんの記事

【118種一覧表】はてなブログのフリーフォントアイコンの使いかた/表示されない対策も - Royal Naught

HAM MEDIA MEMOさんの記事

楽して便利!Webアイコンフォント『Font Awesome』の使い方と活用 Tips - HAM MEDIA MEMO

 

まとめ

f:id:zakkiblog:20200306061612j:plain

 

いかがだったでしょうか?

 

今回の記事では、はてなブログ『Minimalism』にグローバルメニューを設置する方法についてご説明しました。タイトル下にコピペするだけなので、意外と簡単なんですよね。

 

もし『Minimalism』のメニュー設置で悩んでいる方がいたら参考にしてみてください。今回の記事の内容はここまでになります。(※この後、少し続きがあります。)

 

参考にさせていただいた公式ページはこちら

hitsuzi.hatenablog.com

 

別のテーマストア『SOHO』もおすすめ

当サイト『雑記ブログ卒業』の場合は、もっとシンプルなデザインが良かったので、『Minimalism』よりもさらにミニマリズムな別のテーマSOHOを使用しています。

 

「アイコンがいらない」という方におすすめのテーマストアです。

 

私がSOHOにした理由は、FontAwesomeの設定が面倒だったのと、グローバルメニューが「Minimalism」よりも見やすかったからです。特にスマホで見るとこんな感じ。

 

f:id:zakkiblog:20200306062552j:plain

www.zakkiblog.net

 

見やすいグローバルメニューですよね。

 

しかも以下の記事から、URLやカテゴリーを入力するだけで自動でグローバルメニューを作成してくれます。(本当にありがたいです)

 

www.notitle-weblog.com

 

もし気になった方がいたら、SOHOのテーマストアも使ってみて下さい。『SOHO』と『Minimalism』のどちらも良い面があるので、サイトによって使い分けるのもおすすめです。それでは~。