Twenty Twelveは、サイドバーの幅が画面の大きさに比例して変わるので、広告バナーなどを貼っていると表示が崩れてしまいます。そこで、サイドバーを固定幅に変えてみました。
変更箇所1
/* Minimum width of 600 pixels. /と/ Minimum width of 960 pixels. */の間にある
.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%;
}
を
.site-content {
float: left;
/***width: 65.104166667%;***/
margin: 12px -364px 0 0;
margin: 0.857142857rem -26rem 0 0;
width: 100%;
z-index: 0;
}
#content{
margin: 0 364px 0 0;
margin: 0 26rem 0 0;
}
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%;***/
margin: /**24px**/12px 0 0 0;
margin: /**1.714285714**/0.857142857rem 0 0 0;
width:336px;
width:24rem;
z-index: 1;
position: relative;
}
に変えます。
すると、右サイドバーの幅が336px(24rem)、メインコンテンツとの間の隙間が28px(2rem)のレイアウトが出来ます。
変更箇所2
しかし、このままでは、画面の幅が600px以上728px未満の場合、メインコンテンツの幅がサイドバーの幅より狭くなってしまうので、
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
を
/* Minimum width of 750 pixels. */
@media screen and (min-width: 750px) {
に変えて、750px未満では、2カラムではなく1カラムで表示するようにしました。