技術にゃんこの混ぜご飯

関東某所でITエンジニア生活を送るブログ主がチラ裏メモを放り込む場所

ヘッダメニューの背景色を変更しました

次に繋がる色指定講座\_(・ω・`)ウェイ

ヘッダーメニューとは

はてなブログでたまに見かける、ページ上部に付いてるメニューのことです。はてなブログProでは非表示にすることができます。

はてなを利用している人に便利なリンクが並んでいます。

今回はヘッダーメニューの背景色を、ブログ毎のイメージカラーに変更しました。技術ブログは青系のグラデーションに、生活ブログは緑系のグラデーションに。指定方法は合わせて統一感を持たせています。

これでかなり見やすくなりました(私が。

手順

はてなブログのテーマ

はてなブログのテーマのカスタマイズについては、上記の記事に詳細がまとまっています。お急ぎの方はここを見て、ピンポイントで変えてもいいかもしれません。

私は落ち着かないので、以下の方法で確認しつつやってます。

色を指定している場所を探す

デベロッパーツール(開発ツール)を使用して、色を指定している場所を探します。ここではChrome(バージョン: 69.0.3497.100 Official Build 64 ビット)で説明します。詳しい使い方はググって下さい。

F12もしくは右クリックから検証を選択して、デベロッパーツールを起動します。マウスポインターのアイコンからヘッダーメニューの要素を選択して、Elementsタブの中で親のHTML要素を追いかけていきます。

今回は背景色を指定している場所を探すので、それっぽい要素をクリックしてみます。それっぽいというのはマウスポインターを合わせた時の領域が重なるとか、親要素から子要素に継承されていそうな箇所なんですが、この辺りは少し勉強が必要でしょう。

同じ要領で上書きする

どこに何を指定しているか分かったら、『{}デザインCSS』でCSSを上書きします。ここでは元々 #globalheader-container の背景色に #4222 が指定されているので、青と水色のグラデーションを指定して上書きしています。

/*** ヘッダーメニュー ***/
#globalheader-container {
  background: #00017E;
  background: linear-gradient(45deg, #00017E, #3974CB);
}

ちなみに linear-gradient() は CSS3 です。非対応の時の背景色を指定しておくのが無難です。

注意点

色に当たりをつける時はデザイン画面で『{}デザインCSS』に直接書いても、公開しているブログの任意のページからデベロッパーツールを使用しても構いません。

ただしデザイン画面でデベロッパーツールを使って書き換えを行うとややこしい上、そのまま『デザインの保存』をしてしまった日には面倒なことになるので止めた方がいいと思います。

おわりに

背景色やフォント色を変えるだけであれば、こんな感じで対処できます。ソースが汚かったり、指定が複雑だったり、命名規則があれだったりすると難しいだけです。基本は一緒です。

載っている指定方法を鵜呑みにするだけでなく、実際にその指定方法で正しいかどうか、確認しながらCSSを書けるようにすると上達が早いです。


※自己責任でお願いします。