ワードプレステーマTwentyElevenのサイト全体の背景色を変更する方法です。

テーマTwentyElevenでは、デフォルトでも「外観」⇒「テーマ設定」から簡単に背景色やリンク色を変更することが出来ます。

また、「外観」⇒「テーマ」⇒「カスタマイズ」からでも、簡易的な変更は可能です。初心者の方は、まずはそちらから変更なさると良いと思います。

さて、ココでお伝えするのは、背景画像などを使わずにCSSでサイト全体の色を個別に指定する方法です。

テーマTwentyElevenは次の様な構成をしています

• 背景(body)
• ヘッダー(header)
• サイトコンテンツ(#page)
• メインコンテンツ(投稿記事内)(summary)
• セカンドコンテンツ(サイドバー/ウェジェット)(Widgets)
• フッター(footer)

こんな感じの構成です。ですから、それぞれが要素として別れている為に、別々に設定する必要があります。簡易のカスタマイズ(デフォルト設定)では、背景の設定/全体の設定の2つの要素しか変更する事が出来ません。

スタイルシート上では、全ての要素が個別に設定されていますから、それぞれの背景色を別々に設定する事が可能です。

今回は、この中の背景/サイト全体の背景色の変更について触れてみようと思います。

それでは、管理画面より「外観」⇒「テーマ編集」から’スタイルシート’を開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

’スタイルシート’の中から、次の箇所を見つけて下さい。

/* =Global
----------------------------------------------- */

body, input, textarea {
	color: #373737;
	font: 15px "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
body {　/* 背景色 */
	background: #e2e2e2;
}
#page {　/* サイトコンテンツ */
	background: #fff;
}

もう、まさにこの部分ですね(笑　ドンピシャリの文字が並んでいます。このカラーコードを変更するだけです。

今回は、とっても簡単でしたね!!色が変化するだけで、かなりサイト全体の印象が変わったハズです。