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

LOGzeudon

名古屋で働いているWebデザイナーのブログです

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

f:id:rokuzeudon:20141124225158j:plain

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

「背景画像の設定なんて、デザイン設定の項目の中にあるやん」って話なんですが、設定するとこんな感じになるわけです。

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

f:id:rokuzeudon:20141124223410j:plain

隙間は空くし、タイトル文字の色も変わるし…と不満だったので、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;
}

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

f:id:rokuzeudon:20141124230347p:plain

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

 

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

 

注意点

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