よーじ通信

底辺社内ニートがプログラミングや役に立ちそうなネタを書いています

よーじ通信

はてなブログでヘッダーの背景色を変える方法

f:id:youji11410:20161213203805j:plain

はてなブログでヘッダー部分の背景の色をヘッダーと同じ色にして画面いっぱいにする方法を紹介します。

 

 

スポンサーリンク
 

 

はてなブログのヘッダー画像サイズ

よーじ通信では、はてなブログのCONTENTSというテンプレートを使っています。

 

www.dreamark.tokyo

 

はてなブログのヘッダー画像サイズは900×200pxです。

これ以上のサイズにすると、はてなの仕様で切り取られてしまいます。

ですから、ヘッダーの画像はこのサイズ以下にする必要があります。

 

ヘッダーを規定のサイズで設定すると、このように背景の色とヘッダーの色が合わなくなってしまいます。

 

f:id:youji11410:20161213221609p:plain

 

では、背景色を設定してみましょう。

 

背景の色を変える基本の操作

ヘッダー部分の背景の色を変える操作は次の通りです。

 

1.ダッシュボード画面左側のデザインを選択

f:id:youji11410:20161213210731p:plain

 

2.レンチマークを選択

f:id:youji11410:20161213210303p:plain

 

3.背景色を選択

f:id:youji11410:20161213210443p:plain

 

4.背景色を選びます。

f:id:youji11410:20161213210838p:plain

 

 

ヘッダーに合わせて背景の色を変える

デフォルトの色ではヘッダーと同じ色にすることができないので、CSSをいじります。

とりあえず、先ほどの方法で、適当な背景色を選んでおきます。こうすることで、CSSコードが自動で書き加えられます。

 

背景色のHTMLカラーコードを調べる

ヘッダーと背景を同じ色にするため、ヘッダーのHTMLカラーコードを調べます。

 

そのために便利なのがこのアプリです。

chrome.google.com

 

GoogleChromeの拡張機能の一つで、画面の色をHTMLカラーで教えてくれます。

インストールすると、ブラウザのアドレスバーの右側にアイコンが表示されます。

 

f:id:youji11410:20161213215519p:plain

アイコンをクリックすると十字カーソルになるので、調べたい色のところへ十字カーソルを持っていきます。

 

f:id:youji11410:20161213212028p:plain

するとこのように、HTMLカラーコードを示してくれるので、的確なところでクリックします。

 

 

f:id:youji11410:20161213212049p:plain

 クリックするとコードを選択できるようになります。これをコピーもしくは切り取りします。*1

 

背景色のCSSコードを書き換える

例えば、背景色を灰色に設定するとこのようなコードがデザインCSSに書き加えられます。

 

f:id:youji11410:20161213213532p:plain

↑ここに

↓こういうコード

f:id:youji11410:20161213213047p:plain

この、{background:#f5f5f5;}部分のf5f5f5を先ほどコピーしたヘッダーと同じ色のHTMLカラーコードをペーストします。英数字の部分しかコピーできていないのでシャープを消さないように気をつけてくださいね!

 

/* ヘッダーの背景 */
/* <system section="background" selected="f5f5f5"> */
body{background:#F4F4EA;}
/* </system> */

 

CSSは/* */で囲むと、非表示になります。CSSコードが増えると、何がなんだかわからなくなるので、自分でわかるように書いておくと便利ですよ。

 

ちなみに、HTMLカラーコードのアルファベットは大文字でも小文字でも問題ありませんが、数字も英字も半角で記入します。

 

f:id:youji11410:20161213220909p:plain これで、背景とヘッダーの色が同じになりました。

 

まとめ

やってみると、意外と簡単なことがわかるかと思います。これで白意外の背景色のヘッダーを使用できるのでカスタマイズがはかどりますね!

コードはコピーして使用してかまいませんのでー!

 

 

▼関連記事▼ 

www.youji0511.com

*1:Macは⌘+c,Winはctr+c 切り取りはMacは⌘+x,Winはctr+x

© 2016 よーじ通信