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

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


IEの対応

テーマの「twentytwelve\css\ie.css」のファイルも上記と同じような修正を加えないと、IEではスタイルが反映されません。

スポンサーリンク

『Twenty Twelveのサイドバーの幅を広げる方法』へのコメント

  1. [...] それと、こちらのサイトも参考にさせていただきました。 「Twenty Twelveのサイドバーの幅を広げる方法」 [...]

コメントを残す

メールアドレスは公開されません。
また、コメント欄には、必ず日本語を含めてください(スパム対策)。