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

WordPressテーマカスタマイズ

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に上のコードを追加してください。

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

スポンサーリンク

コメント

  1. aso より:

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

    • tama より:

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

  2. aso より:

    tamaさんこんばんは。

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

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