読者です 読者をやめる 読者になる 読者になる

イロイロひとりごと。

ブログのこと、普段の生活のことをつぶやいています

スポンサーリンク

<はてなブログ>ヘッダ上部にあるヘッダーメニュー(グローバルヘッダ)の色の変え方

時間に少しだけ余裕ができてきたので、ちょいとブログをカスタムしたくなりまして。

少しだけ、弄ってみました。

 

ヘッダーメニューのバー色を変更

そもそもヘッダーメニュー(はてなブログロゴやメニューが並んでいるバー)を表示していない方は必要ない情報ですねー。

 

上部にあるメニューバー

f:id:setuyakuhappylife:20150502235434p:plain

コレ↑ね。

 

いま設定しているテーマでは、デフォルトが透過なんですよ。

スクロールしていくと文字が重なってしまい、それが気持ち悪くて…。

 

テーマによっては、スクロールしてもそのまま画面から消えていく設定もあって、その場合はあまり気にならないかもしれません。

 

この文字が重なるのを回避するために、ヘッダーメニューのバーに色をつけました。

 

はてなブログテーマ制作の手引き - はてなブログ ヘルプを参考にしました。

#globalheader-container {
    color: #333;
    background: #fff;  
    position: fixed;
}

 

デザイン>カスタマイズ>デザインCSSに入れてください。

文字色が濃いグレー(#333)

バーの背景が白(#fff)になっています。

ここを変えれば違う色に変更できます!

 

fixedのところをrelativeに置き換えると、スクロールしたときに画面から消えていってくれますよ(*´∀`*)

 

 Afterがコレ↓

f:id:setuyakuhappylife:20150503000134p:plain

 

白なのでわかりにくいですが、文字が重なることが無くなりました(*´ェ`*)

 

まとめ

あっと言う間に変更できたのでもっと早く設定変えればよかった(笑)

 

ヘッダーメニュー部分をアクセントカラーにしてもいいかもしれませんね。

気になる方は色を変えてみてはいかがでしょうか?

©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。