WordPressテーマTwenty Twelveでヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法

Pocket
LINEで送る

本ブログをTwenty ElevenからTwenty Twelveへ移行するため、Twenty Twelveで同じ動作をさせるための変更方法について調べることにしました。Twenty Elevenの時と同じ動作が出来て、プラグインも問題なければ移行するつもりです。

なお、本記事の内容は、「WordPress3.4」テーマ「Twenty Twelve1.1」で確認しました。
※2013/01/07追記 テーマ「Twenty Eleven」の場合については「WordPressテーマTwenty Elevenのヘッダーのタイトル部の背景色の変更方法」と「WordPressテーマTwenty Elevenのグローバルナビゲーション部の背景色の変更方法」と「WordPressテーマTwenty Elevenで投稿記事のタイトル部の背景色の変更方法」と「WordPressテーマTwenty Elevenのサイドバー部の背景色の変更方法」を参考にして下さい。

今回は投稿記事のヘッダー、コンテンツ、サイドバー、フッターそれぞれの背景色を変更する方法です。

ヘッダー、コンテンツ、サイドバーそれぞれの背景色を変更する方法

「/wp-content/themes/twentytwelve/style.css」
の下記の箇所がヘッダー、コンテンツ、サイドバーについて処理しているところです。この部分を変更すれば可能です。それから、小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。


/* Page structure */
.site {
	padding: 0 24px;
	padding: 0 1.714285714rem;
	background-color: #fff;
}
.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}
.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
}

・
・
・
・
・

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


/* Page structure */
.site {
	padding: 0 24px;
	padding: 0 1.714285714rem;
	background-color: #fff;
}
.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background: #f5faf1;	/*	コンテンツ全体の背景色を変更	*/
}
.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background: #f5faf1;	/*	サイドバー全体の背景色の変更	*/
}

/* Header */
.site-header {
	padding: 24px 0;
	padding: 1.714285714rem 0;
	background: #f5faf1;	/*	ヘッダー全体の背景色を変更	*/
}

・
・
・
・
・

変更前

変更後
(ヘッダー、コンテンツ、サイドバーそれぞれの背景色を「#f5faf1」へ変更)

ちなみに、「.site {」に背景色を追加すれば、サイト全体の背景色を変更する事が出来ます。

それから、もっと細かく背景色を変更したい場合には、

を参考にして下さい。

フッター全体の背景色を変更する方法

「/wp-content/themes/twentytwelve/style.css」
の下記の箇所がフッターについて処理しているところです。この部分を変更すれば可能です。それから、小テーマを作っている場合は、間違えず小テーマ側の「style.css」を変更して下さい。


/* Footer */
footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	max-width: 960px;
	max-width: 68.571428571rem;
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	padding: 1.714285714rem 0;
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}

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


/* Footer */
footer[role="contentinfo"] {
	border-top: 1px solid #ededed;
	clear: both;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 2;
	max-width: 960px;
	max-width: 68.571428571rem;
	margin-top: 24px;
	margin-top: 1.714285714rem;
	margin-left: auto;
	margin-right: auto;
	padding: 24px 0;
	padding: 1.714285714rem 0;
	background: #f5faf1;	/*	フッター全体の背景色を変更	*/
}
footer[role="contentinfo"] a {
	color: #686868;
}
footer[role="contentinfo"] a:hover {
	color: #21759b;
}

変更前

変更後
(フッター全体の背景色を「#f5faf1」へ変更)

Pocket
LINEで送る

スポンサーリンク

コメントを残す

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

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



スポンサーリンク