いつまでも初心者ですともいってられない、ということで、現在使用中のテーマ「Twenty Twelve」を少しずついじるべく、悪戦苦闘中のおじさんローカルブロガー・小梅太郎です。
まずは全体幅はそのままで、サイドバーの幅を少し広く、メインコンテンツ部を少し狭くしたいのです。
と言うのも、まずはサイドバーにアドセンスを、せめてレクタングル（中）（300×250）を入れたいと思ったのが一つ。
それと、メインコンテンツ部分がこれまで他のブログサービスで使っていたテンプレートより、かなり幅が広く、写真も大きすぎてどうも使い慣れないので、ちょっと狭くしたいというのが、もう一つです。
で、どうすればいいの？
ということで、いつものようにネット上を色々と調べるも、「Twenty Twelve」というテーマがそれまでとちょっと勝手が違うのか、今回はよく分からない…
ただ、「Twenty Twelve」は、幅の指定は比率（%）でしているということが分かりました。
って、まあ、CSSの中をちゃんと見れば、分かる人にはすぐ分かるのでしょうが…
この辺り（1400行以降にありました）の記述でしょうか。
.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}
.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%;
}
コンテンツ幅はブラウザ幅600px以上で最大幅が960pxに設定されているようです。
であれば、とりあえずはスタイルシートの、.site-content、.widget-areaの比率を変えると何とかなりそうですね。
その他の余白とかの扱いがよく分からないので、とりあえず2カ所の比率のみを均等に変更することにします。
.site-content {
float: left;
width: 58.104166667%;
}
そして、
.widget-area {
float: right;
width: 33.041666667%;
}
これが正しいかどうかは分かりませんが、これでとりあえず記事の幅が560px弱で、サイドバー幅が320弱になっているはずです。
こちらが変更前で、
こちらが変更後。
幅は変わってますね。
あとはしばらく挙動を見ていきたいと思います。
ちなみに、このブログでは前回試しに子テーマを作成したので、子テーマ内のstyle.cssに上記内容を追記してます。
wp-content→themes→twentytwelve-child→style.css…ここに変更部分のみ記述。
今回は、なかなか情報が見つからない中、こちらのサイトを参考にさせていただきました。
「WordPress 3.5 にアップグレード、テーマを Twenty Twelve に変えました」
pxと一緒に併記されている、remについても説明がありました。
『max-width: 68.571428571rem というのが少しわかりにくいですね。
フォントサイズを基準に計算した数字で、Twenty Twelve は14px = 1rem となっているので、960 ÷ 14 というように計算します。』
それと、こちらのサイトも参考にさせていただきました。
「Twenty Twelveのサイドバーの幅を広げる方法」
どうもありがとうございました。
※iphoneでの表示がちょっと崩れた（狭い画面で右にサイドバーが現れてしまった）ので、プラグイン「WPtouch」を使うことにします。
IE対策は別途必要
《追記 2013.5.18》
上記の幅の比率の変更をしてしばらく経ってから気づいたのですが、たまたまwindowsマシンのIE8で確認したところ、幅が全く変わっていませんでした。
ん？？？と思い、またまた色々調べてみたところ、どうやら、通常のスタイルシートに修正を加えても、IEには反映されないようです。
使用しているテーマ「Twenty Twelve」では、IE9以前用のCSSファイルが、themesフォルダ→Twenty Twelveフォルダ→cssフォルダの中に「ie.css」ファイルとして設置されてるんですね。
（中には、Styles for older IE versions (previous to IE9)と記述されてます。）
そうか〜、IE用のスタイルシートも修正しないといけなかったんですね。
ということは「ie.css」内の該当箇所を修正すればいいようですね。
ただ、これまでの流れから子テーマでは対応できないのかな？
ということで更に調べたところ、こちらのサイトに記載があり、参考にさせていただきました。ありがとうございました。
「Twenty Twelveで、サイドバーの幅のサイズを変更するCSS | WordPressカスタマイズ【WPCOS】」
「.ie8 .widget-area」といった記述で変更内容を追加するとのことで，私はまだ理解しているとはいえないのですが（汗）、ここはそのまま使用させていただきました。
つまり子テーマに記載する内容はこうですかね（数値はもちろん、既に修正済みのものと合わせてます）。
/*幅変更ie対策 */
.ie8 .site-content {
float: left;
width: 58.104166667%;
}
.ie8 .widget-area {
float: right;
width: 33.041666667%;
}
これで、一応手持ちのwindowsマシン（XP）のIE8で確認したところ、幅の比率が変わりましたので、一安心です。
あれ？IE8以外は？
IE9はちゃんと表示されていました。よく分かんないな〜