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

スポンサーリンク

コメントを残す

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

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



スポンサーリンク