はてなブログではいろいろなカスタムが出来ます。
前回、「目次」を表示できる様にしたので、
今回はグローバルメニューを表示させる方法を紹介したいと思います。
タイトル下に設置されてる、カテゴリー表示されているものを
グローバルメニューといいます。
私は、はてなブログを始めて初めて知りました。
では、早速表示出来る様にしましょう！
⇧こちらの YukihyLIfe さんの説明がすごく分かりやすいです。
コードを使わせていただきます。
変更する前に、
使っているテーマによってコードがちゃんと適用されない場合があります。
バックアップを取る事をお勧めします。
グローバルメニューを設定する
「グローバルメニュー」はカテゴリーを分かりやすく表示させるもので、ユーザーが記事を見つけやすくなります。
ナビゲーションバーとも言います。
ＨＴＭＬを設定していく
Yukihi lifeさんがコピペでＯＫの「ＨＴＭＬコード」と「ＣＳＳコード」を載せていてくれているのでコピーします。
１、コード１と書いてある下の「ＨＴＭＬコード」をコピーします。
はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
２、はてなブログの「デザイン」➡「スパナマーク（カスタマイズ）」➡「ヘッダ」をクリック。
３、「タイトル下」に先ほどコピーしたコードを貼り付けます。
カテゴリーのURLと名前を変更する
１、「カテゴリー」を開いて「カテゴリー一覧」から選ぶか、「サイドバー」から選んでURLをコピーする。
２、カテゴリ１とかの前に「 ’ｕｒｌ’」があるので「' ' 」の間の「 ｕｒｌ」を消してリンクさせたいカテゴリーのＵＲＬを入れます。
３、次に、貼り付けたままだと「カテゴリ１」、「カテゴリ２」、「カテゴリ３」、「カテゴリ４」と書いてある状態なので自分のカテゴリメニューに替えます。
私の場合「TOP」、「旅行」、「お役立ち」、「カルチャー」、「つぶやき」に変更しております。
「ＴＯＰ」は「ホーム」などに変更しても良いかと思います。
ここまでやって終わりかと思ったら、
まだ終わりではないです！
このままでは⇩の状態・・・
全部左に寄っている・・・
ＣＳＳを設定していく
１．次にコード２の「ＣＳＳコード」をコピーします。長くて不安になりますが大丈夫です。
はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life
２、ＨＴＭＬの時の様に「デザイン」➡「スパナマーク（カスタマイズ）」➡「デザインＣＳＳ」を開き、先ほどコピーした「ＣＳＳコード」を貼り付けます。
グローバルメニューの色を変更する
グローバルメニューを設置したら、自分のサイトに合わせて色を変えたいですよね。
⇧こちらのサイトに色見本が載っているので、好きな色に変更しましょう(*‘∀‘)
１、ＣＳＳコード６行目の「グローバルメニュー背景色」の前の数字を変更します。
青色にしたかったら「＃００００ｆｆ」に変更です。赤は「＃ｆｆ００００」です。
２、背景色を変更したら、ＣＳＳコード２３行目の「グローバルメニュー文字色」を変更します。
こちらも色見本を参考に「＃ｆｆｆｆｆｆ」を黒色にしたかったら「＃００００００」に変更します。
グローバルメニューを均等にする
１、ＣＳＳコードの２０行目と２１行目を 削除する。
２、ＣＳＳコードの１７行目の「 left 」を「 center 」に書き換える。
３、ＣＳＳコード１７行目と１８行目の間に「 width：〇〇％； 」を入力する。
私は、5個メニューがあるので「１００÷リンクの個数」で２０％としました。
３、忘れず「変更を保存する」をクリックしましょう。
これを忘れると今までの苦労が水の泡に！
ようやく出来ました。お疲れ様です！
「グローバルメニュー」が出来たらブログの見栄えが良くなりました✨
色決めはけっこう悩むかもしれません。
スマホやタブレットもちゃんと表示されてるか確認して下さい。
それでは、最後まで読んで頂いてありがとうございました。
このブログが少しでも役立てば嬉しいです。
