イロイロひとりごと。

ブログのこと 日々のことをつぶやいています

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

はてなブログの一番上に表示される、ヘッダーメニュー。

 

はてなブログのPRO(有料プラン)の方は、設定で消すことができますが、無料プランの場合は消すことはできません。

 

テーマによって色を変えて、存在感を消すもよし、アクセントカラーのようにするのもおすすめです!

今回はこちらの設定方法をお教えしますね。 

 

 

ヘッダーメニューのバーの設定

ヘッダーメニューとは、はてなブログロゴやメニューが並んでいるバーです。

コレね。

 

f:id:setuyakuhappylife:20150502235434p:plain

↑上部にあるメニューバー

 

ヘッダーメニューを表示しない

ヘッダーメニューを表示しないようにするには、はてなブログPRO(有料プラン)への申し込みが必要です。

 

設定>詳細設定>ヘッダとフッタ にチェックを入れると非表示になります。

f:id:setuyakuhappylife:20190312154026p:plain

ちなみに、フッタも非表示にできますのでお好みで設定してみてね。

 

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

設定しているテーマによって、既に色が設定されているかと思います。

CSSに下記のコードを入れることで、上書きされます。

 

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

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

 

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

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

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

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

 

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

 

 

まとめ

はじめ、この部分はなんて名前かもわからず、検索もうまくできませんでした(´・ω・`)

ヘッダーメニュー(グローバルヘッダ)っていうらしいです。

簡単なので、ぜひ自分好みにカスタマイズしてみてくださいね!

 

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