zero-point-five

とある目標を達成すべく、その活動とオリジナルのキャラクター作成して発信していきます。

【はてなブログアレンジ】グローバルメニューの追加方法(タイトル下のメニュー)

はてなブログにグローバルメニューを追加する方法です。

本記事では、はてなブログのテーマ「Minimalism」での設定になります。

f:id:zero_point_5:20190914125304j:plain

 

目次

 

ブログテーマ「Minimalism」

ブログテーマ「Minimalism」はテーマストアで人気No1のテーマです。

テーマの特徴は、「デザインを最小限まで削ぎ落とし、美しさを最大限に表現したテーマ」です。

 

その特徴通りシンプルに表現できるブログテーマです。

 

人気のテーマのため、色々な方がカスタマイズしているため、先人の知恵をお借りすることができます。

 

本記事のグローバルメニューの追加も、色々な方のアレンジを参考にしています。

 

設定の前に

設定を始める前に、アイコンを使えるようにする準備をします。

アイコンは、メニューの前に設置する絵文字です。

 

FontAwesomeを使えるようにします。

 

FontAwesomeとは

FontAwesomeとは、WEBアイコンフォントを自分のブログで表示できるサービスです。

シンプルなアイコンで、フォントや色も変えることができます。

 

 

設定方法

1、以下コードをコピぺ

 以下のコードをコピぺしておきます

<link href="https://use.fontawesome.com/releases/v5.9.0/css/all.css" rel="stylesheet"> 

 

 

2、はてなブログにペーストする

 はてなブログ管理画面の設定から詳細設定の「headに要素を追加」の欄にコピーしたコードを貼り付けます。

 貼り付け終わったら、「変更する」で完了です。

 

 

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

ではグローバルメニューの設置方法です。

作成したコードをはてなブログに貼り付けて使用します。

ここではコピぺして使えるコードも合わせて紹介します。

 

1、はてなブログ管理画面で「設定」を開く

 はてなブログの管理画面で、「設定」を開きます。

 

2、スパナのマークから、ヘッダタイトル下を選択

 スパナのマークからヘッダタイトル下を選択します。

 

3、ヘッダのタイトル下にコードを入力

 以下のコードをアレンジして、コピぺします。 

<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>名前</a></div>
<div class="menu"><a href="URL"><i class="fas fa-users" aria-hidden="true"></i>名前</a></div>
<div class="menu"><a href="URL"><i class="fas fa-pen-fancy"></i>名前</a></div>
<div class="menu"><a href="URL"><i class="fas fa-blog"></i>名前</a></div>
<div class="menu"><a href="URL"><i class="fas fa-running"></i> 名前</a></div>
</div>
</nav> 

 

 赤い部分の「URL」と「名前」を変更して活用ください。

 絵文字のアイコンは、当ブログのアイコンが入っていますので、状況に応じて変更ください。

 

4、「変更を保存する」をクリック

 最後に、「変更を保存する」をクリックして完了です。

 

 

最後に

記事数が少なければグローバルメニューは必要ないと思いますが、記事が増えてくると全記事が表示されないので、ある程度まとまったカテゴリにしていく必要があります。

 

読者目線でも、整理されている方が興味のある記事にたどり着くことができます。

 

また、整理することで自身のブログの整理にもなるので、記事数がある程度溜まってきたらグローバルメニューを設置するといいと思います。