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

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

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

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

背景画像を準備

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

子テーマのスタイルシート編集

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

  • 背景画像名:header.gif
  • 画像のディレクトリ:テーマフォルダ/images/
  • ヘッダーのサイトタイトル部分に横に繰り返し表示

背景画像設定

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

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

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

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

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

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

Twenty Elevenのヘッダーに背景画像を設定するこれで、不自然なグレーの部分がなくなりましたね。
背景色は、もちろん自分の好きな色も設定できます。

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

ヘッダータイトル部分の高さを設定


#branding hgroup{height: 98px;}

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

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

サイトタイトルを上に移動


#site-title{padding: 10px;}

Twenty Elevenのヘッダーに背景画像を設定するこのコードで、隠れてしまったサイトタイトルを上に移動できます。
数値を変更すれば、位置が変わりますのでお好みの位置を探し当ててください。

サイトタイトルと紹介文をそろえる


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

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

サイトタイトルを左に移動


#branding hgroup{margin: 0 2%;}

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

おしゃれなサイトを創りあげよう

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


関連記事

WordPressのTwenty Elevenのヘッダーに画像を貼る Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。
WordPressのTwenty Elevenで1カラム表示横幅カスタマイズ Twenty Elevenを1カラムにして横幅を目一杯広げる
WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。
Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。
Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集・装飾の方法を紹介します。
Twenty Elevenのコメントリンク・吹き出しを削除
Twenty Elevenでコメント何件という表示をしてくれている吹き出しを削除する方法を紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>