【Twenty Twelve】3カラムのCSS(左に記事、右にサイドバー2つ)

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

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

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

3culumn2

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

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

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

float(ネガティブマージン)を使用したスタイル例

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

#primary {
  float: left;
  margin: 0 -22.0% 0 0;
  width: 100%;
}
#content {
  float: left;
  margin: 0;
  width: 54.0%;
}
#secondary {
  float: right;
  margin: 0;
  width: 22.0%;
}
#tertiary {
  float: right;
  margin: 0 23.0% 0 1.0%;
  width: 22.0%;
}

IE8で表示したい場合は、ie.cssファイルに上のコードを追加してください。

floatを使用したスタイル例

#primary {
  float: left;
  margin: 0;
  width: 78%;
}
#content {
  float: left;
  margin: 0;
  width: 67.7%;
}
#secondary {
  float: right;
  margin: 0;
  width: 22%;
}
#tertiary {
  float: right;
  margin: 0 2% 0 2%;
  width: 28.2%;
}

IE8で表示したい場合、ie.cssに上のコードを追加してください。

※スタイルに設定してある値は、環境また好みに合わせて任意の値に直して使用してください。

コメントを残す

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