【Twenty Twelve】3カラムのCSS(中央に記事、両サイドにサイドバー)パターン2

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

Twenty Twelveテーマで、ルートから同じ階層にある要素(#primary、#secondary、#tertiary)をネガティブマージンを使用して、横に3カラム表示するCSSのついて。

表示されるコードのイメージは下の画像になります。
3culumn6

下の画像が、表示イメージになります。
3culumn7

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

テンプレートファイルの下の方にあるget_sidebar()の前に追加します。

<?php get_sidebar( 'right' ); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

下のコードをstyle.cssの@media screen and (min-width: 600px) {}の中に追加します。このコードを追加すると3カラムで表示されます。

marginの値は、環境や好みに合わせて変更してください。

#primary {
  float: left;
  margin: 0 -23.0% 0 -23%;
  width: 100%;
}
#content {
  float: right;
  margin: 0;
  padding: 0;
  width: 54.8%;
}
#secondary {
  float: right;
  margin-right: 0;
  margin-top: 0;
width: 21.5%;
}
#tertiary {
  float: left;
  margin-left: -54%;
  margin-top: 0;
  width: 21.5%;
}

#secondaryと#tertiaryにあるmargin-topは、widget-areaの設定を上書きするために追加していますので削除して、別途下のコードを追加する方法もあります。

.widget-area {
  margin-top: 0;
}

IE8で表示するには、同じコードをie.cssファイルに追加します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です