ゆらりんDAYS【はてな別館】

ゆらりんです。好きな言葉は「ゆとり」です。日々忙しい兼業主婦がゆるっとした日常を送るための、努力の軌跡です。

【備忘録】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;
}

 

赤字で示したメニューの背景色文字の背景色を好みのグリーンに変更しました。

それ以外の色は、意外とそのままでもしっくりきたので変更せずにデフォルトのまま利用しています。

 

まとめ

IT初心者がはてなブログにはてなブログにグローバルナビゲーションメニューを設置してみました。

意外と簡単にできて、サイトが引き締まった感じがあるので、やってよかったです!

 

グローバルナビゲーションメニューがあるとないのとでは、サイトの滞在時間が違うとか、いろいろと良いことがあると聞きましたし、読んでいただける方にもメニューがある方が親切かな、と思うので、これから効果が出るのが楽しみです。

 

本当は、そろそろ記事を見直して、より読みやすくしたいと思っているのですが、なかなか手が回らず…

せめて初期の頃のしょうもない記事だけでも何とかしたいと思う今日この頃です。

 

 

★色々なサイトで紹介されているCSSとか、そもそも用語がわからない!という方は、一度本で軽く予習してみることをお勧めします。
HTMLとCSS、ほんの少しでも知っていると知らないとでは大きな差がでます。

下の本は初心者でもわかりやすかったですし、Amazonのレビューも比較的良いです。

HTML&CSSとWebデザインが 1冊できちんと身につく本

HTML&CSSとWebデザインが 1冊できちんと身につく本