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

(スポンサーリンク)

2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。

はてなブログにグローバルメニューを追加する方法です。
本記事では、はてなブログのテーマ「Minimalism」での設定になります。

(スポンサーリンク)

目次

ブログテーマ「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、「変更を保存する」をクリック

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

最後に

記事数が少なければグローバルメニューは必要ないと思いますが、記事が増えてくると全記事が表示されないので、ある程度まとまったカテゴリにしていく必要があります。
読者目線でも、整理されている方が興味のある記事にたどり着くことができます。
また、整理することで自身のブログの整理にもなるので、記事数がある程度溜まってきたらグローバルメニューを設置するといいと思います。

(スポンサーリンク)

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

「イラスト」「アイテム紹介」「ブログ運営」「勝手に応援」を中心に発信しています。

コメント

コメントする

目次