【備忘録】IT初心者がはてなブログにグローバルナビゲーションメニューを設置してみた話

こんにちは！ゆらりんです。

今日は、自分のための備忘録シリーズです。

今まであまりブログのカスタマイズは行っていなかったのですが、何となく自分のブログをみていたところ

見にくい…

ということに気がつきました（今更ですみません…汗）。

これからいろいろと手を加えようと思っているのですが、まずは

これだけ記事内容が雑多なブログなのに、メニューがしょぼい．．．

⇓

まずはグローバルナビゲーションメニューを作ろう！

ということにいたしました。

作ったグローバルナビゲーションメニューはこちら

f:id:nico100project:20180307161640j:plain

こんな感じで、今とりあえずの話題についてメニューにわけました。

f:id:nico100project:20180307161905j:plain

サブメニューも表示できるようにしたので、今のところの話題はすべてカバーできていると思います。

やっぱり、wordpressのサイトを見慣れていると、グローバルナビゲーションメニューがないサイトは見にくいな～、と思います。

というか、もうすでに、「グローバルナビゲーションメニューはあって当たり前、ない方がおかしい」というくらいのものなんだな～、と改めて思いました。

グローバルナビゲーションメニューを作るときに参考にさせていただいたサイト

作る際に参考にさせていただいたのは、ゆきひーさん（@ftmaccho）のサイトです。

CSSで組んだドロップダウンメニューとスライドメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 - Yukihy Life

わかりやすい説明、本当にありがとうございます！

IT未経験、初心者のワタシでも、手順通りにやったら、スムーズにグローバルナビゲーションメニューを設置できました。

自分でいじったのは、メニューの色くらいです。

注意した点いくつか

グローバルナビゲーションメニューを作るときにワタシが気をつけたことについて、いくつか書いておきます。

❶アドセンス広告にドロップダウンメニュ－がかからないように。

これ、ゆきひーさん（@ftmaccho）のサイトにも書いてあったのですが、

アドセンスの広告を貼るときに、ドロップダウンメニュ－が広告にかぶさってしまうと規約違反

となります。

なので、今回作成したグローバルナビゲーションメニューの右端、サイドバーの広告とかぶる部分には、あえてサブメニューのないカテゴリをおきました。

現在のところ、サイドバー上にはアドセンスではない広告を貼っているので全く関係はないのですが、将来アドセンスを貼りたくなったときにグローバルナビゲーションメニューのHTMLをいじらなくてもよいように、と考えました。

❷一応、色はテーマに合わせる。

このサイト、現在、テーマには公式テーマのAfternoonを使用しています。

拡張性とかメニューとか読みやすさとか、ブログとしての機能は全く考えず、

なんとなくカワイイ！

ということで選んでしまいました…

メディアとして長いこと存続させたいなどと考えると、本当はもう少し拡張性の高いテーマを選んでおくべきだった、と若干後悔しているところです…

ただ、ヘッダーの画像の緑はとても気に入っているので、できればこのテーマを使い続けたい。

ということで、今回はもともとのテーマやヘッダー画像と合わせても違和感がないように、ヘッダーの色とメニューの色を合わせるところにこだわりました。

ゆきひーさん（@ftmaccho）のサイトのCSSのうち、

#slideMenu {
position: relative;
width: 100%;
height: 40px;
background-color:#006400;/*メニューの背景色*/
}

#slideMenu > .slideMenuInner > li a {
display: block;
position: relative;
z-index: 2;
height: 100%;
padding-right: 20px;/*文字の左の余白*/
padding-left: 20px;/*文字の右の余白*/
background-color: #006400;/*文字の背景色*/
color: #fff;/*文字色*/
font-size: 80%;
text-decoration: none;
line-height: 40px;
}