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でヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法」を参考にして下さい。

前回(WordPressテーマTwenty Elevenのヘッダーのタイトル部の背景色の変更方法)の続きで、今回はサイドバーの背景色の変更方法です。

サイドバーの背景色の変更設定

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

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


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


|「background: #f5faf1;」を追加


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* =Structure
----------------------------------------------- */

body {
	padding: 0 2em;
}
#page {
	margin: 2em auto;
	max-width: 1000px;
}
#branding hgroup {
	margin: 0 7.6%;
}
#access div {
	margin: 0 7.6%;
}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
	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>



スポンサーリンク