2022年1月時点で本ブログはWordPressに移管しました。
当時のカスタム記事になります。はてなブログユーザーは参考ください。
はてなブログにグローバルメニューを追加する方法です。
本記事では、はてなブログのテーマ「Minimalism」での設定になります。
ブログテーマ「Minimalism」
ブログテーマ「Minimalism」はテーマストアで人気No1のテーマです。
テーマの特徴は、「デザインを最小限まで削ぎ落とし、美しさを最大限に表現したテーマ」です。
その特徴通りシンプルに表現できるブログテーマです。
人気のテーマのため、色々な方がカスタマイズしているため、先人の知恵をお借りすることができます。
本記事のグローバルメニューの追加も、色々な方のアレンジを参考にしています。
設定の前に
設定を始める前に、アイコンを使えるようにする準備をします。
アイコンは、メニューの前に設置する絵文字です。
FontAwesomeを使えるようにします。
FontAwesomeとは
FontAwesomeとは、WEBアイコンフォントを自分のブログで表示できるサービスです。
シンプルなアイコンで、フォントや色も変えることができます。
設定方法
１、以下コードをコピぺ
以下のコードをコピぺしておきます
<link href=”https://use.fontawesome.com/releases/v5.9.0/css/all.css” rel=”stylesheet”>
２、はてなブログにペーストする
はてなブログ管理画面の設定から詳細設定の「headに要素を追加」の欄にコピーしたコードを貼り付けます。
貼り付け終わったら、「変更する」で完了です。
グローバルメニュー設置方法
ではグローバルメニューの設置方法です。
作成したコードをはてなブログに貼り付けて使用します。
ここではコピぺして使えるコードも合わせて紹介します。
１、はてなブログ管理画面で「設定」を開く
はてなブログの管理画面で、「設定」を開きます。
２、スパナのマークから、ヘッダタイトル下を選択
スパナのマークからヘッダタイトル下を選択します。
３、ヘッダのタイトル下にコードを入力
以下のコードをアレンジして、コピぺします。
<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」と「名前」を変更して活用ください。
絵文字のアイコンは、当ブログのアイコンが入っていますので、状況に応じて変更ください。
４、「変更を保存する」をクリック
最後に、「変更を保存する」をクリックして完了です。
最後に
記事数が少なければグローバルメニューは必要ないと思いますが、記事が増えてくると全記事が表示されないので、ある程度まとまったカテゴリにしていく必要があります。
読者目線でも、整理されている方が興味のある記事にたどり着くことができます。
また、整理することで自身のブログの整理にもなるので、記事数がある程度溜まってきたらグローバルメニューを設置するといいと思います。
コメント