Twenty Twelveのサイドバーの幅を広げる方法

2013/01/122013/05/13

WordPress

code

WordPress3.5の標準テーマの「Twenty Twelve　v1.1」で確認しました。

style.cssの1347行目あたりのMedia queriesで始まるところあたりを変更します。

以下の例で、記事部分が570px、サイドバーが300px程度になります。サイドバーにアドセンスの横幅300pxが配置可能で表示できるのは確認済みです。

Twenty Twelveは横幅の最大が960pxで設定してあるので、その何パーセントかで設定します。

空白（スペース）も考慮しないとレイアウト崩れると思うので気を付けてください。
全体の幅＞記事幅+サイドバーの幅
実際には、記事幅の左右の空白、サイドバーの左右の空白も全体の幅で入っているということです。

上手くいかない場合は、記事幅かサイドバー幅のどちらかの大きさを現状よりも小さくしてみることです。

style.css

/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.site-content {
		float: left;
		/*width: 65.104166667%; 修正前*/
                  width: 59.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%;　修正前*/
                  width: 32.041666667%;
	}

.site-content、.widget-areaのあたりを修正します。

/* */で囲まれている部分は、コメント扱いになります。

上記のサンプルは、全体の幅が標準のままの設定です。
これでサイドバーにアドセンスの横幅300pxが配置可能で、トップページと個別記事で確認しました。

Twenty Twelveの全体の幅(最大幅)を広げたい

style.css

.site {
　margin: 0 auto;
　/*max-width: 960px;修正前*/ 
  max-width: 1000px;
　/*max-width: 68.571428571rem;修正前*/ 
 max-width:71.42857143rem;
 overflow: hidden;
}

1451行目あたりのmax-widthの値を変更します。remとついている方も変更します。
1000pxなら上記のようになります。

max-width: 68.571428571rem というのが少しわかりにくいですね。
フォントサイズを基準に計算した数字で、Twenty Twelve は14px = 1rem となっているので、960 ÷ 14 というように計算します。

WordPress 3.5 にアップグレード、テーマを Twenty Twelve に変えました | Webourgeon