TwentyTwelveのサイトの幅やサイドバーの幅を変更する方法

今回はTwentyTwelveの全体の幅、記事コンテンツの横幅とサイドバーの横幅を広くしたり、狭くするカスタマイズを紹介します。

TwentyTwelveの初期状態ではコンテンツ全体の横幅が960pxになっています。以前無料ブログでブログを作成していた私にはこの幅が広すぎると感じたのでこのブログでは全体の幅を860pxに変更しています。

TwentyTwelveの全体の構造を把握しておく

最初にTwentyTwelveの全体の構成を見ておくとスムーズに変更できると思いますので、まずはこの図を見てください。

参考：work.log様

全体図としてはこのようになっています。

• コンテンツ領域（記事の部分）：625px
• ウィジェット領域（サイドバー）：250px
• 中間余白（中間の余白）：85px

この３つの合計が960pxになる訳ですね。TwentyTwelveの横幅を変更する場合は最初に全体の幅を指定して、コンテンツ領域とサイドバーの領域をそれぞれパーセントで指定します。

例えば全体の幅を100%としてコンテンツ領域を60パーセント、サイドバーを35パーセントと指定すれば残りの5パーセントが中間の余白として指定されます。

先に各領域の幅を決めておく

先ほどそれぞれの領域をパーセントで指定すると書きましたが最初に「px」で各領域の幅を決めておきます。順番としてはこのような順番で決めるといいです。

1. 最初に全体の幅
2. コンテンツ領域の幅
3. サイドバーの幅

私の場合は「全体の幅」を860pxにして「コンテンツ領域」を530px、「サイドバー」を300pxにする事にしました。これで中間の余白は残りの30pxになります。このように先に全体の幅とそれぞれの領域の幅を考えてみて下さい。

領域の幅が決まったらパーセントの計算をしていきます。注意点としては「コンテンツ領域」＋「サイドバー」が全体の幅より大きくならないようにしてくださいね。

各領域の幅を計算する

それぞれの領域の幅を決めたら今度はそれをパーセントに変換しますので、電卓を用意します。そしてそれぞれ計算をしていきます。計算式は次の通りです。

■コンテンツ領域の幅の計算
コンテンツ領域の幅（px）÷全体の幅（px）×100

■サイドバー領域の幅の計算
サイドバー領域の幅（px）÷全体の幅（px）×100

私の場合（全体が860pxでコンテンツが530px、サイドバー300pxの場合）
コンテンツ領域　530÷860×100＝61.62790698(%)
サイドバー領域　300÷860×100＝34.88372093(%)

このように計算してコンテンツ領域とサイドバー領域の幅をパーセントで計算しておきます。ここまで出来たらあとはスタイルシートに記述するだけです。

子テーマのスタイルシートに記述する

最後に子テーマのスタイルシート(style.css)に変更の記述をしておきましょう。私の場合の記述を例にしてます。

@media screen and (min-width: 600px) {
.site {max-width: 860px;}
.widget-area {width: 34.88372093%;}
.site-content {width: 61.62790698%;}
}

• 「.site」が全体の幅（ここは「px」で記述）
• 「.site-content」がコンテンツ領域の幅（%）
• 「.widget-area」がサイドバー領域の幅（%）

このようになります。それから別のブラウザで反映されるか心配だったので、次の記述も追加しています。

@media screen and (min-width: 600px) {
.ie8 .site {max-width: 860px;}
.ie8 .widget-area {width: width: 34.88372093%;}
.ie8 .site-content {width: 61.62790698%;}
}

内容は同じです。一応これも追加してます。以上でTwentyTwelveの横幅を変更するカスタマイズは終了です。

• ⇒WordPressに自作のパンくずリストを設置する方法
• ⇒WordPressカスタマイズまとめページに戻る