Twenty Elevenのヘッダー背景を設定

Twenty Elevenはデフォルトではヘッダー背景は設定されていません。
※ ヘッダー内に画像は表示されますが、背景ではありません。

シンプルで爽やかなのですが、シンプルすぎる感もあります。

そこで、Twenty Elevenのヘッダーに背景を設定してみようと思います。

背景画像を準備

まずは、背景画像を準備しましょう。
どんなものでも構いませんが、高さが100px程度のものがバランスがいいような気がします。
私は今回は7 x 100 pxの画像としました。

今回は、数段階の編集を行います。
下記条件下でのスタイルシートとなっております。

まずは、ヘッダー部分に背景画像を設定します。

#page{background: url(images/header.gif) repeat-x top left;}

背景画像は現れましたが、表示がかなり変わってしまいました。
ヘッダーの白かった部分や、記事の方まで背景色が変わってしまいました。
えらいこっちゃです。

そんなわけで先ほどの部分を

#page{
	background: url(images/header.gif) repeat-x top left;
	background-color: #fff;
}

として、背景色の設定を加えます。

これで、不自然なグレーの部分がなくなりましたね。
背景色は、もちろん自分の好きな色も設定できます。

準備した背景画像は、高さ100pxなのですがヘッダー部分の高さと合っていないために、表示が中途半端になっていまっていますね。
次は、これを修正します。

#branding hgroup{height: 98px;}

上記コードを加えると、サイトタイトル部分の高さが決められます。
背景画像の高さより2px程小さく設定すると余分な線が入らなくていい感じになります。

しかし、文字が隠れてしまっていて実用はできませんね。

#site-title{padding: 10px;}

このコードで、隠れてしまったサイトタイトルを上に移動できます。
数値を変更すれば、位置が変わりますのでお好みの位置を探し当ててください。

#site-description{padding-left: 10px;}

文字の表示開始位置がずれてしまっていましたが、このコードで開始位置が揃います。
ここでの設定数値は、サイトタイトルを上に移動で設定した数値と同じになるようにして下さい。

#branding hgroup{margin: 0 2%;}

この設定はお好みで。
私は、タイトルが左寄りでないと気がすまないのでこのコードを加えました。
もちろん、数値を変えれば表示位置も変わります。

美的センスは人それぞれですので正解はないと思いますが、自分で満足できるようなデザインが大事だと思います。
毎日の更新が楽しくなるような、そんなデザインを目指して頑張りましょう！

Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。

Twenty Elevenを1カラムにして横幅を目一杯広げる
WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。

Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。

Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集･装飾の方法を紹介します。

Twenty Elevenのコメントリンク･吹き出しを削除
Twenty Elevenでコメント何件という表示をしてくれている吹き出しを削除する方法を紹介します。