ワードプレステーマTwentyTwelveのサイトコンテンツ(記事コンテンツ/サイドバー)の幅を変更する方法です。

テーマTwentyTwelveは、デフォルトですとコンテンツの幅が少し狭い感じがしますかね?つまり、サイトコンテンツに’余白’が多い気がします。

そこで、記事コンテンツ/サイドバーの表示の幅を少し広げてみる事にします。

ちなみにデフォルトテーマは、非常に細かく設定がされていますので、%(パーセンテージ)を変更することはあまりオススメしません。特に初めての方や初心者の方ですね。

なので、ココではコンテンツ同士の比率は変えません(変わりません)。なるべく表示の幅を広げてみます。

表示幅を広げるとこんなにも違います!!

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

/* 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;
}

これが、デフォルトのページストラクチャーです。この’margin’の値を変えることで、見かけ上の表示が変わってきます。今回は、コンテンツを広げることで記事やメニューを見やすくしてみます。

まずは、以下の様に編集してみて下さい。(実際にサイト表示をして、どこが変わったのかを確かめてみて下さい)

/* Page structure */
.site {
	padding: 0 12px;
	padding: 0 0.857142857rem;
	background-color: #fff;
}
.site-content {
	margin: 20px 0 0 14px;
	margin: 1.428571429rem 0 0 1rem;
	background-color: #fff;
}
.widget-area {
	margin: 14px 20px 0;
	margin: 1rem 1.428571429rem 0;
	background-color: #fff;
}

同じ’margin’なのになぜ2行もあるの?’rem’ってなんだ?って方は、コチラをお読み下さい。⇒TwentyTwelve 悩める’rembase’

これでかなりコンテンツの幅が広がったハズです。同じTwentyTwelveなのに、全然違った感じがすることでしょう☆