CSS｜ 公式テーマ「EverGreen」のヘッダーに背景画像を設定する / はてなブログ

些細なカスタマイズですが。

「背景画像の設定なんて、デザイン設定の項目の中にあるやん」って話なんですが、設定すると一番上の画像みたいに、隙間が空いてしまうわけです。

ちなみに設定したのはこちらの画像。

隙間は空くし、タイトル文字の色も変わるし…と不満だったので、CSSをいじって直接設定することにします。

まず画像。

背景にしたい画像を、フォトライフであらかじめアップ、URLをコピっておきます。

フォトライフってなんぞや？ですが、はてなブログで写真を投稿するときにアップされてる先がこちらのサービスなのです。

はてなフォトライフ - 無料・大容量、写真や動画を共有できるウェブアルバム

そして、いつものデザイン管理ーカスタマイズCSSのところへ移動し、以下のコードを記述します。

#container-inner {
background: url(http://cdn-ak.f.st-hatena.com/images/fotolife/r/rokuzeudon/20141124/20141124222650.jpg) no-repeat;
background-color: #fff;
}

このまま記述して保存すると、ヘッダー画像がこのブログとお揃いになります。

さっきコピったURLを、「http://cdn-ak.f.st-hatena.com/images/fotolife/r/rokuzeudon/20141124/20141124222650.jpg」と入れ替えで記述します。

そして保存すると、アップした背景画像が表示されるはずです。

注意点

• 背景画像は、記事の画像とは違い横幅が自動で調整されません。当ブログのように、ワンポイントとして使うことを推奨します
• この方法の場合、文字色は別途CSSで変更する必要があります。つまり、濃い色の背景画像を使うとタイトル文字が読みにくくなる場合があります
• あくまでテーマ「Evergreen」のカスタマイズなので、他のテーマに上記設定をした場合は表示が異なると思います