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カラムで表示するようにしました。

WordPress Twenty Twelveをsidebarの幅を固定したliquidレイアウトに改造」への2件のフィードバック

  1. けいた

    ウェブシェフさん
    とても役に立ちました。ブログのtwentytwelveのcssに利用させていただきました。

    1. web_shufu 投稿作成者

      けいたさん、はじめまして。お役に立てたようで嬉しいです。
      100リスト達成に向けてがんばってください。

コメントは停止中です。