WordPress Twenty Twelveをsidebarの幅を固定したliquidレイアウトに改造

sidebarの幅を固定しないとバナーがはみ出す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カラムで表示するようにしました。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: