Twenty Twelveで3カラム作成方法のまとめ

WordPressテーマカスタマイズ

過去にTwenty Twelveテーマを3カラムにする方法の記事をいくつか書いたのでまとめてみました。

【Twenty Twelve】3カラムの作成方法
3カラムで表示するのに必要なカスタマイズするテンプレートのリストや追加するコードについて書いた記事です。3カラムにするためのベースになる記事になっています。

【Twenty Twelve】3カラムのCSS(中央に記事、両サイドにサイドバー)パターン1
メイン記事を中央に配置して両サイドに最近の投稿などウィジェットを表示できるようにしたカスタマイズ方法について書いています。
3culumn1

【Twenty Twelve】3カラムのCSS(中央に記事、両サイドにサイドバー)パターン2
上にある画像と同じような表示になりますが、CSSでネガティブマージンを使用した方法について書いています。
3culumn7

【Twenty Twelve】3カラムのCSS(左に記事、右にサイドバー2つ)
メインコンテンツは左に表示、右にウィジェットで表示できるサイドバーを2つ配置した3カラムについて書いています。
3culumn2

【Twenty Twelve】2カラムのサイドバー2カラム
3カラムというか2カラムで、右サイドバーを上下に分割して下の表示を2カラムにする例を書いています。
2column-side-2c

【Twenty Twelve】3カラムのCSS3方法1(中央に記事、両サイドにサイドバー)
CSS3とFloatを使用した3カラムの表示の例を書いてます。
3culumn3

【Twenty Twelve】3カラムのCSS3方法2(中央に記事、両サイドにサイドバー)
この記事では、CSS3だけを使用した3カラムの表示方法の例を書いています。
3culumn5

【追記】
3カラムで並べる方法としてボタン作成時に使用したCSS3の方法が、現在はいい方法だと思いましたので追加してみました。
Twitter、はてブ、Google+1ボタンの横幅を調整して横一列に並べる方法(CSS3)

スポンサーリンク

コメント

  1. 通りすがり より:

    オペラ使っていますが、表示に時間が掛かるため表示されません。
    恐らく直帰率が高いのではないでしょうか、よく私の検索する言葉で引っかかるのと魅力的なタイトルの記事なので見れない事がとても残念です。お節介かもしれませんが是非改善していただけると嬉しいです。

タイトルとURLをコピーしました