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

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

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

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

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

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

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

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

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

#main {
  display: -moz-box;   
  display: -webkit-box;
  width: 100%;
}
#primary {
  padding: 0 10px 0 10px;
  -moz-box-ordinal-group: 2;
  -webkit-box-ordinal-group: 2;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 37.642rem;
  float: none;
}
#secondary {
  -moz-box-ordinal-group: 3;
  -webkit-box-ordinal-group: 3;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 14.285rem;
  float: none;
}
#tertiary {
  -moz-box-ordinal-group: 1;
  -webkit-box-ordinal-group: 1;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  width: 14.285rem;
  float: none;
}

表示順を変えるには、box-ordinal-groupの数字を変更します。
左に表示したい順番に1、次の表示は2と値を変更します。
また、#primaryにあるpaddingを真ん中に表示するコンテンツに移動させます。

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

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

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