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

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

スタイル（中央に記事、両サイドにサイドバー）

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

サイドバー（sidebar-right.php）の追加場所１

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

</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: right;
  margin: 0 23.0% 0 1.0%;
  width: 54.0%;
}
#secondary {
  float: right;
  margin: 0;
  width: 22.0%;
}
#tertiary {
  float: left;
  margin: 0;
  width: 22.0%;
}

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

floatを使用したスタイル例

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

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

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

• Twenty Twelveで3カラム作成方法のまとめ
• 【Twenty Twelve】2カラムのサイドバー2カラム
• 【Twenty Twelve】3カラムのCSS（中央に記事、両サイドにサイドバー）パターン２
• 【Twenty Twelve】3カラムのCSS3方法２（中央に記事、両サイドにサイドバー）
• 【Twenty Twelve】3カラムのCSS3方法１（中央に記事、両サイドにサイドバー）
• 【Twenty Twelve】3カラムのCSS（左に記事、右にサイドバー2つ）
• 【Twenty Twelve】3カラムの作成方法
• WordPressでjQueryを使うとき$を使う方法