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

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

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


スポンサーリンク

f:id:twistinhaurin:20210723213457j:plain

前回「目次」を表示できる様にしたので、

今度はグローバルメニューを表示させる方法を紹介したいと思います。

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

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

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

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

 

 

 

www.yukihy.com

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

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

 

注意点

変更する前に、

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

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

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

 

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

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

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

 

HTMLを設定していく

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

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

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

 

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

f:id:twistinhaurin:20210724144052p:plain


  

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

f:id:twistinhaurin:20210724143104p:plain

 

                 

 

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

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

f:id:twistinhaurin:20210724143131p:plain

 

 

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

f:id:twistinhaurin:20210724143943j:plain

 

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

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

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

 

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

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

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

f:id:twistinhaurin:20210724143947j:plain

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

 

 

 

CSSを設定していく

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

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

 

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

f:id:twistinhaurin:20210612140742j:plain

 

 

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

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

www.colordic.org

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

 

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

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

f:id:twistinhaurin:20210724145020p:plain

 

 

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

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

f:id:twistinhaurin:20210724145032p:plain

 

 

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

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

f:id:twistinhaurin:20210724145037p:plain

 

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

f:id:twistinhaurin:20210724145040p:plain

 

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

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

f:id:twistinhaurin:20210724145050j:plain

 

 

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

f:id:twistinhaurin:20210612140747p:plain

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

 

ようやく出来ました。お疲れ様です!

f:id:twistinhaurin:20210724145400j:plain
 

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

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

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

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

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