【Twenty Twelve】3カラムのCSS3方法1(中央に記事、両サイドにサイドバー)

WordPressテーマカスタマイズ

3カラム作成に必要な下準備の方法が下の記事リンク先に書いてあります。
【Twenty Twelve】3カラムの作成方法

CSS3とfloatを使用して3カラムを作成してみました。
プロパティの値は、好きな値に直して使用してください。

スタイル(中央に記事、両サイドにサイドバー)

下の画像のように、真ん中にメインコンテンツ(投稿記事)、両サイドにサイドバーの3カラムにするスタイルを設定します。

3culumn3

サイドバー(sidebar-right.php)の追加場所1

サイドバーを下の場所に追加したとします。

</div><!-- #content -->
<?php get_sidebar( 'right' ); ?>
</div><!-- #primary -->

下のコードをstyle.cssの@media screen and (min-width: 600px) {}の中に追加します。

#main {
  display: -moz-box;   
  display: -webkit-box;
  width: 100%;
}
#primary {
  -moz-box-ordinal-group: 1;   
  -webkit-box-ordinal-group: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 51.928rem;
  float: none;
}
#secondary {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 14.285rem;
  float: none;
}
#content {
  float: right;
  width: 70%;
  padding: 0 10px 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#tertiary {
  float: left;
  width: 30%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: 0;
}

スタイル(左に記事、右にサイドバー2つ)

3culumn4

下のスタイルは、上の画像のように左に投稿記事を表示して右にサイドバー2つを表示します。

#main {
  display: -moz-box;   
  display: -webkit-box;
  width: 100%;
}
#primary {
  -moz-box-ordinal-group: 1;   
  -webkit-box-ordinal-group: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 51.928rem;
  float: none;
}
#secondary {
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 14.285rem;
  float: none;
}
#content {
  float: left;
  width: 70%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
#tertiary {
  float: right;
  width: 30%;
  padding: 0 10px 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  margin-top: 0;
}

画像対策のために下のコードを、style.cssファイルの1番下に追加するか、もしくは書き換えてください。

/* 画像対策 */
img.size-full,
img.size-large,
img.header-image,
img.wp-post-image {
  width: 100%;
}

IE8以下のブラウザでは3カラム表示されません。

スポンサーリンク

コメント

タイトルとURLをコピーしました