1 2 3 4 5 ... 8 9 Next

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でコンテンツ部の投稿記事表示エリアとサイドバー部の表示エリアを広げる方法」を参考にして下さい。

今回はコンテンツとサイドバーの表示エリアを変更する方法です。

コンテンツとサイドバーの表示エリアを変更する方法

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


/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

・
・
・
・
・

	}
	.site-content {
		float: left;
		width: 65.104166667%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 26.041666667%;
	}

例)コンテンツとサイドバーの表示エリアをそれぞれ全体の49%にする場合


/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {

・
・
・
・
・

	}
	.site-content {
		float: left;
		width: 49%;	/*	コンテンツの表示エリアを全体の49%へ変更	*/
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 49%;	/*	サイドバーの表示エリアを全体の49%へ変更	*/
	}

ちなみに、コンテンツの表示エリアを「65.104166667%」そのままで、サイドバーの表示エリアを広げる場合、およそ「33%」とするのが最大となる。

変更前
(分かりやすい様にヘッダー、コンテンツ、サイドバーそれぞれの背景色を「#f5faf1」に設定)

変更後
コンテンツとサイドバーの表示エリアをそれぞれ全体の49%へ変更
(分かりやすい様にヘッダー、コンテンツ、サイドバーそれぞれの背景色を「#f5faf1」に設定)

Pocket
LINEで送る

スポンサーリンク

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で送る

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でサイドバーのフォントを変える方法」を参考にして下さい。

今回は投稿記事のサイドバーの背景色、フォントを変更する方法です。

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


/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
}
.widget-area .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 36px;
	margin-left: 2.571428571rem;
}
.widget-area .widget a {
	color: #757575;
}
.widget-area .widget a:hover {
	color: #21759b;
}
.widget-area #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

WordPressテーマTwenty Twelveの標準のままだと、文字のフォントが美しくないと感じているのでフォントを変えます。

変更するフォントは、

を参考に「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」にしました。
いろいろ問題もあるみたいですが、Macでは「ヒラギノ角ゴ Pro W3」、WindowsVista以降では「メイリオ」 、WindowsXPでは「MS Pゴシック」 、それ以外では「sans-serif」を表示させる事を想定しています。但し、私はWindowsVistaしか持っていないため、WindowsVistaでしか確認は出来ていません。

例)背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更する場合


/* Sidebar */
.widget-area .widget {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	margin-bottom: 48px;
	margin-bottom: 3.428571429rem;
	word-wrap: break-word;
}
.widget-area .widget h3 {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
	background: #f5faf1;	/*	サイドバーのウィジェットのタイトルの背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのウィジェットのタイトルのフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのウィジェットのタイトルの文字色の変更	*/
}
.widget-area .widget p,
.widget-area .widget li,
.widget-area .widget .textwidget {
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	background: #f5faf1;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身の背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身のフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのウィジェット(カレンダー、タグ除く)の中身の文字色の変更	*/
}
.widget-area .widget p {
	margin-bottom: 24px;
	margin-bottom: 1.714285714rem;
}
.widget-area .textwidget ul {
	list-style: disc outside;
	margin: 0 0 24px;
	margin: 0 0 1.714285714rem;
}
.widget-area .textwidget li {
	margin-left: 36px;
	margin-left: 2.571428571rem;
}
.widget-area .widget a {
	color: #757575;
}
.widget-area .widget a:hover {
	color: #21759b;
}
.widget-area #s {
	width: 53.66666666666%; /* define a width to avoid dropping a wider submit button */
}

コメントの箇所で設定を変えています。但し、カレンダーとタグのウィジェットについては変更が出来ませんでした。カレンダーについては他の箇所で変更出来ましたが、タグについては分かりませんでした。これについては、改めて調べ直したいと思います。

変更前

変更後
(背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更)

カレンダーのウィジェットについては下記の箇所が処理しているところです。この部分を変更すれば可能です。


/* =Widgets
-------------------------------------------------------------- */

・
・
・
・
・

#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
}
#wp-calendar #next {
	padding-right: 24px;
	padding-right: 1.714285714rem;
	text-align: right;
}

例)背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更する場合


/* =Widgets
-------------------------------------------------------------- */

・
・
・
・
・

#wp-calendar {
	margin: 0;
	width: 100%;
	font-size: 13px;
	font-size: 0.928571429rem;
	line-height: 1.846153846;
	color: #686868;
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
	text-align: left;
	background: #f5faf1;	/*	サイドバーのカレンダーのウィジェットの中身の背景色の変更	*/
	font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'MS Pゴシック',sans-serif;	/*	サイドバーのカレンダーのウィジェットの中身のフォントのファミリーを変更	*/
	color: #c40026;	/*	サイドバーのカレンダーのウィジェットの中身の文字色の変更	*/
}
#wp-calendar #next {
	padding-right: 24px;
	padding-right: 1.714285714rem;
	text-align: right;
}

変更前

変更後
(背景色を「#f5faf1」へ、フォントを「ヒラギノ角ゴ Pro W3」、「メイリオ」、「MS Pゴシック」、「sans-serif」へ、文字色を「#c40026」へ変更)

他にサイドバー全体の背景色を変えたい場合には下記の部分を変更すれば可能です。


/* Page structure */

・
・
・
・
・

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

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


/* Page structure */

・
・
・
・
・

.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
	background: #f5faf1;	/*	サイドバー全体の背景色の変更	*/
}

変更前

変更後
(背景色を「#f5faf1」へ変更)

Pocket
LINEで送る

 1 2 3 4 5 ... 8 9 Next

スポンサーリンク