WordPressテーマTwenty Elevenのヘッダーのタイトル部の背景色の変更方法

Pocket
LINEで送る

本投稿記事の内容は、「WordPress3.3.1」のテーマ「Twenty Eleven1.3」での話であり、バージョンが大きく異なると動作しない場合があります。
※2012/06/03追記 「WordPress3.3.2」での動作を確認しました。
※2012/06/20追記 「WordPress3.4」テーマ「Twenty Eleven1.4」での動作を確認しました。
※2013/01/07追記 テーマ「Twenty Twelve」の場合については「WordPressテーマTwenty Twelveでヘッダーのサイトタイトル、キャッチフレーズ、ヘッダー画像の背景色、フォントを変更する方法」と「WordPressテーマTwenty Twelveでヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法」を参考にして下さい。

WordPress3.3.1テーマTwenty Elevenの設定において、全体の背景色を変えるのには、
管理画面の「外観」-「(カスタム)背景」-「表示オプション」-「背景色」
で設定出来ます。しかし、これでは、ヘッダー、コンテンツ、サイドバー、フッター部の背景色を変えることは出来ません。

いろいろ調べたり、試したりした結果、ヘッダーのタイトル部について背景色の変更方法が分かりました。

ヘッダーのタイトル部の背景色の変更設定

/wp-content/themes/twentyeleven内にある
「style.css」の「Headerの#branding」の箇所で「background: #背景色;」
を追加すれば変更出来ます。小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。

例)「style.css」
背景色を#f5faf1へ変更する場合


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|「background: #f5faf1;」を追加


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Header
----------------------------------------------- */

#branding {
	border-top: 2px solid #bbb;
	padding-bottom: 10px;
	position: relative;
	z-index: 9999;
	background: #f5faf1;	/*	追加	*/
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

これで背景色が変わるはずです。

その他に、いろいろとヘッダーをカスタマイズするのに

が参考になります。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク