3カラム作成に必要な下準備の方法が下の記事リンク先に書いてあります。
【Twenty Twelve】3カラムの作成方法
CSS3とfloatを使用して3カラムを作成してみました。
プロパティの値は、好きな値に直して使用してください。
スタイル(中央に記事、両サイドにサイドバー)
下の画像のように、真ん中にメインコンテンツ(投稿記事)、両サイドにサイドバーの3カラムにするスタイルを設定します。
サイドバー(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つ)
下のスタイルは、上の画像のように左に投稿記事を表示して右にサイドバー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カラム表示されません。
スポンサーリンク
コメント