ハウリンの雑念だらけで生きている

はてなカスタマイズや旅行記、好きな事(サブカル)などを書いていきたいです。ゆるゆると書いていきます。

はてなブログ【グローバルメニュー】を表示させる方法を詳しく説明。


スポンサーリンク

f:id:twistinhaurin:20201112145828p:plain

こんにちは、ハウリンです (*^^*)

前回「目次」を表示できる様にしたので、今度はグローバルメニューを表示させる方法を紹介したいと思います。

タイトル下に設置されてる、カテゴリー表示されているものを

グローバルメニューといいます。

私は、はてなブログを始めて初めて知りました(;^ω^)

という事で、早速作ってみた記憶を辿りたいと思います。

 

 

 

www.yukihy.com

⇧こちらの YukihyLIfe さんの説明がすごく分かりやすいです。

コードを使わせていただきます。

 

注意点

変更する前に、

使っているテーマによって

コードがちゃんと適用されない場合があります。

バックアップを取る事をお勧めします。

 

グローバルメニューを設定する 

「グローバルメニュー」はカテゴリーを分かりやすく表示させるもので、ユーザーが記事を見つけやすくなります。

ナビゲーションバーとも言います。

 

HTMLを設定していく

Yukihi lifeさんがコピペでOKの「HTMLコード」「CSSコード」を載せていてくれているのでコピーします。

コード1と書いてある下の「HTMLコード」をコピーします。

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life

 

はてなブログの「デザイン」➡「スパナマーク(カスタマイズ)」➡「ヘッダ」をクリック。

f:id:twistinhaurin:20200623145533p:plain


  

「タイトル下」に先ほどコピーしたコードを貼り付けます。 

f:id:twistinhaurin:20200403171239p:plain

 

                 

 

 カテゴリーのURLと名前を変更する

「カテゴリー」を開いて「カテゴリー一覧」から選ぶか、「サイドバー」から選んでURLをコピーする。

f:id:twistinhaurin:20200620172326p:plain

 

 

カテゴリ1とかの前に「 ’url’」があるので「'    ' 」の間の「 url」を消してリンクさせたいカテゴリーのURLを入れます。

f:id:twistinhaurin:20200623150406p:plain

 

 
次に、貼り付けたままだと「カテゴリ1」、「カテゴリ2」、「カテゴリ3」、「カテゴリ4」と書いてある状態なので自分のカテゴリメニューに替えます。

私の場合「TOP」、「旅行」、「お役立ち」、「カルチャー」、「つぶやき」に変更しております。

「TOP」「ホーム」などに変更しても良いかと思います。

 

ここまでやって終わりかと思ったら、 

まだ終わりではないです!

このままでは⇩の状態・・・

f:id:twistinhaurin:20200623151023p:plain

全部左に寄っている・・・(旅行とかカルチャーとかまだ入れてない時のです(^_^;) )

 

 

 

CSSを設定していく

次にコード2の「CSSコード」をコピーします。長くて不安になりますが大丈夫です。

はてなブログでグローバルメニューとトグルメニューを両立させレスポンシブスタイルにするカスタマイズ - Yukihy Life

 

HTMLの時の様に「デザイン」➡「スパナマーク(カスタマイズ)」➡「デザインCSS」を開き、先ほどコピーした「CSSコード」を貼り付けます。

f:id:twistinhaurin:20200623151409p:plain

 

 

グローバルメニューの色を変更する

グローバルメニューを設置したら、自分のサイトに合わせて色を変えたいですよね。

www.colordic.org

⇧こちらのサイトに色見本が載っているので、好きな色に変更しましょう(*‘∀‘)

 

CSSコード6行目の「グローバルメニュー背景色」の前の数字を変更します。

青色にしたかったら「#0000ff」に変更です。赤は「#ff0000」です。

 f:id:twistinhaurin:20200404151501p:plain

 

 

背景色を変更したら、CSSコード23行目の「グローバルメニュー文字色」を変更します。

こちらも色見本を参考に「#ffffff」を黒色にしたかったら「#000000」に変更します。

 f:id:twistinhaurin:20200404153508p:plain

 

 

グローバルメニューを均等にする 

CSSコードの20行目21行目を 削除する。 

f:id:twistinhaurin:20200404144335p:plain

CSSコードの17行目の「 left 」を「 center 」に書き換える。 

f:id:twistinhaurin:20200404144641p:plain

 

CSSコード17行目18行目の間に「 width:〇〇%; 」を入力する。

私は、5個メニューがあるので「100÷リンクの個数」で20%としました。

 

f:id:twistinhaurin:20200404145559p:plain

 

 

忘れず「変更を保存する」をクリックしましょう。

f:id:twistinhaurin:20200522165623p:plain

これを忘れると今までの苦労が水の泡に!!

 

f:id:twistinhaurin:20201112153708p:plain

ようやく出来ました。お疲れ様です!(^O^)/

 

「グローバルメニュー」が出来たらブログの見栄えが良くなりました(*‘∀‘)

色決めはけっこう悩むかもしれません。。。

スマホやタブレットもちゃんと表示されてるか確認して下さい。📱 

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。