【はてなブログ】グローバルメニュー作り方

グローバルメニューにk脳する女性２人

みなさん、こんにちは。

チー丸日記のチー丸です。

みなさん、「グローバルメニュー」ってなんだかわかりますか。

またの名を「ブローバルナビゲーション」というらしいです。

ブログの上の方（ヘッダー）にある、記事をカテゴリー別に分けて案内するメニューの事です。

私のブログで言うと、ここの赤枠の部分です　↓　。

グローバルメニューの箇所に赤枠

ちなみに、青枠の箇所は「パンくずリスト」と呼ぶようです。

私は、ここの部分が「グローバルメニュー」であることすら知らなかったので、

設定方法を検索しようにも、なにをどう検索していいかわからず、「ブログのヘッダーの上のところ」「カテゴリー」などと検索して、やっとグローバルメニューがグローバルメニューであることを知りました。

そして、ようやく「グローバルメニュー　設置方法」「グローバルメニュー　作り方」などで検索を開始できました。

この「グローバルメニュー」があるかないかでは、ブログの見易さは断然かわります。

作る事が出来た時には、声をあげて喜ぶほどうれしかった事を思い出します。

しかし！

「TOP」「Profile」「English」を押しても「NOT FOUND」の表示になってしまい、

記事が表示されません...。

グローバルメニューを作っただけでは、ダメだったのです！

それから、グローバルメニューから記事を表示させる方法を探しに探し...

やっと、グローバルメニューから記事へ飛ばすことができましたので

その方法をご案内します。

この記事を読み終える頃には、はてなブログでグローバルメニューを作って、そこから記事を確認できるようになれるようになります。

私が使っているはてなblogのテーマは「Haruni」ですが、

どのテーマでも、原理原則は同じだと思います。

【はてなブログ】グローバルメニュー作り方

ビジネスウーマン2人

最初に、HTMLやCSSに変更を加える場合には、必ずバックアップをとりましょう。

万が一間違えて、訳が分からなくなってもとっておいたバックアップをはりなおせば元に戻すことができます。

【はてなブログ】グローバルメニュー作り方

FontAwsomeを呼び出す

FontAwsomeとは、WEB上で使われているアイコンをWEBフォントで使う事が出来る様にしたもので、CSSを変えるだけで色々なフォントが使えるらしいです。

1.「設定」→「詳細設定」を選択

詳細設定の画面

2.「headに要素を追加」で以下のコードを張り付ける。

コードはこのサイトからコピーしてはりつけました。

https://yumekawa.hatenadiary.com/entry/2018/03/11/205405

Headerに要素を追加する画面

HTMLを張り付ける

1. 「デザイン」を選択

はてなブログ設定画面　デザインに赤枠

2.「カスタマイズ」を選択、「ヘッダ」の中の「タイトル下」の四角をクリック。

HTML貼り付け画面への手順画像

3.四角の中に以下のコードをコピペします。

<style>
/* ヘッダーの余白調整 */
#blog-title {
    margin: 0 auto;
    text-align: center;
    padding: 2rem 0 1.5rem;
}
@media (max-width: 767px) {
#blog-title {
    padding: 1rem 0;
}
}
</style>
<div class="menu-trigger"><span><i class="blogicon-reorder lg"></i></span></div>
<!-- Navigation -->
<nav id="slide-menu">
	<ul>
		<li><a href="URLを入力">Top</a></li>
		<li><a href="URLを入力">About</a></li>
		<li><a href="URLを入力">Profile</a></li>
		<li><a href="URLを入力">Category</a></li>
		<li><a href="URLを入力">Link</a></li>
		<li><div class="menu-close"><i class="fa fa-window-close fa-fw" aria-hidden="true"></i>閉じる</div></li>
	</ul>
</nav>
<script>
 (function() {
	var $body = document.body
	, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0]
  , $menu_close = $body.getElementsByClassName('menu-close')[0];

	if ( typeof $menu_trigger !== 'undefined' ) {
		$menu_trigger.addEventListener('click', function() {
			$body.classList.toggle('menu-active');
		});
	}

  if ( typeof $menu_close !== 'undefined' ) {
		$menu_close.addEventListener('click', function() {
			$body.classList.remove('menu-active');
		});
	}
})();
</script>

すると、グローバルコードがタイトルの下に表示されます。

しかし！

これで終わりではないんです！

このままだと、グローバルメニューのどこのカテゴリーを選択しても、

以下のように「NOT FOUND」になってしまいます。

NOT FOUNDが表示されてる画面

記事を表示させるには、自分で色々変えなくてはいけないのです！

HTMLを編集する

先ほど張り付けたHTMLの下の赤枠の”ここ”をかえなければ、

一生「NOT FOUND」のままなのです！

HTML言語の一部に赤枠をつける

”URLを入力”に記事のURLをいれます。

「TOP」のところを任意のタイトルに変更します。

私の場合は、↓のようにしました。

<li><a href="URLを入力">Top</a></li> 
<li><a href="https://www.chimarubonito3.com/about">About</a></li> 
<li><a href="https://www.chimarubonito3.com/archive/category/BLOG">BLOG</a></li>
<li><a href="https://www.chimarubonito3.com/archive/category/English">English</a></li> <li><a href="https://www.chimarubonito3.com/archive/category/Line">LINE</a></li>