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

ゆるゆると書いていきます

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

こんにちは、ハウリンです😊

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

他の方のブログを見て「何この上の方にあるメニューは??」となったりしました。

タイトルし下に設置されたものを「グローバルメニューといいます。

そんな単語、初めて知った!

私も作りたい!💨

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

f:id:twistinhaurin:20200531165840p: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

 

 

、ここまでやったら、とりあえず「変更を保存する」で1度保存しておきましょう。

f:id:twistinhaurin:20200522165623p:plain

 

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

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

www.colordic.org

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

 

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

青色にしたかったら「#000ff」に変更です。私は「#20b2aa」にしました。

 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:20200623152110p:plain

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

 

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

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

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

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

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