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ではスタイルが反映されません。スポンサーリンク