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

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

スタイル(中央に記事、両サイドにサイドバー)

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

3culumn1

サイドバー(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: 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カラムのCSS(中央に記事、両サイドにサイドバー)パターン1」への6件のフィードバック

  1. ピンバック: WORDPRESSのテンプレート「Twentytwelve」の3カラム化(改訂版2こちらが正しいです) | 躁鬱病で統合失調症(統合失調感情障害)でモーツァルト好きなおっさんのブログ(IEではスクリプトが止

  2. ピンバック: WORDPRESSのテンプレート「Twentytwelve」の3カラム化(改訂版3こちらが正しいです) | 躁鬱病で統合失調症(統合失調感情障害)でモーツァルト好きなおっさんのブログ(IEではスクリプトが止

  3. ピンバック: WORDPRESSのテンプレート「Twentytwelve」の3カラム化(改訂版2こちらが正しいです) | 躁鬱病で統合失調症(統合失調感情障害)でモーツァルト好きなおっさんのブログ(IEではスクリプトが止

  4. aso

    初めまして。
    Twenty Twelveのカスタマイズの参考にさせていただいています。
    こちらに書かれているCSSを挿入し3カラムにしました。
    ありがとうございます。
    3カラムにして固定ページの全幅ページテンプレートを選択すると
    サイドバーが非表示になるだけで全幅にはならなくなりました。
    特定のページだけ1カラムにしたく調べているのですが変更できないです。
    教えていただけるととても嬉しいです。

    返信
    1. tama 投稿作成者

      いくつか方法があると思いますけれど簡単な方法としては、style.cssに以下のコードを最後の方に追加すると全幅表示になると思うので試してみてください。
      .page-template-page-templatesfull-width-php #content {
      width: 100%;
      }

      返信
  5. aso

    tamaさんこんばんは。

    どうもありがとうございました。
    確認するのが遅くなり失礼しました。

    返信

コメントを残す

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