WordPress Plug-in「1000 Column」は、HTMLのみでシンプルなカラムを作るCSSを提供する Plug-in です。
WordPress にインストールすると、カラム組み用のCSSを利用できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
【 カラムの間に親要素の5%の余白を持つ3カラム 】 <div class="row-1000"> <div class="col-300"> <p>幅30%：左余白0</p> </div> <div class="col-300 offset-50"> <p>幅30%：左余白5%</p> </div> <div class="col-300 offset-50"> <p>幅30%：左余白5%</p> </div> </div> |
数値は、親要素の千分率比(per mille)を使用。
カラム内に余白はなく、
間隔は.offset-??で指定します。
通常のカラム組みにくわえ、
ブレイクポイントを有したカラム組みも行えます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
【 xs以上のウィンドウサイズでは、カラムの左右に親要素の5%の余白を持つ1カラム 】 【 md以上のウィンドウサイズでは、カラムの間と左右に親要素の3%の余白を持つ2カラム 】 【 lg以上のウィンドウサイズでは、カラムの間と左右に親要素の2%の余白を持つ4カラム 】 <div class="row-1000"> <div class="col-xs-900 offset-xs-50 col-md-455 offset-md-30 col-lg-225 offset-lg-20"> <p class="visible-xs visible-sm">幅90%：左余白5%</p> <p class="visible-md">幅45.5%：左余白3%</p> <p class="visible-lg visible-xl">幅22.5%：左余白2%</p> </div> <div class="col-xs-900 offset-xs-50 col-md-455 offset-md-30 col-lg-225 offset-lg-20"> <p class="visible-xs visible-sm">幅90%：左余白5%</p> <p class="visible-md">幅45.5%：左余白3%</p> <p class="visible-lg visible-xl">幅22.5%：左余白2%</p> </div> <div class="col-xs-900 offset-xs-50 col-md-455 offset-md-30 col-lg-225 offset-lg-20"> <p class="visible-xs visible-sm">幅90%：左余白5%</p> <p class="visible-md">幅45.5%：左余白3%</p> <p class="visible-lg visible-xl">幅22.5%：左余白2%</p> </div> <div class="col-xs-900 offset-xs-50 col-md-455 offset-md-30 col-lg-225 offset-lg-20"> <p class="visible-xs visible-sm">幅90%：左余白5%</p> <p class="visible-md">幅45.5%：左余白3%</p> <p class="visible-lg visible-xl">幅22.5%：左余白2%</p> </div> </div> |
「 管理画面 ＞ 設定 ＞ 1000col 」で、クラス名の変更などを行えます。
設定できる項目は、親要素のクラス名（.row-1000）と、
カラム要素を表すクラス名のプレフィックス（col）と、
カラム要素の左余白を表すクラス名のプレフィックス（offset）と、
ブレイクポイントと対応文字列（xsやmdなど）です。
これにより、他のCSSフレームワークとの競合を回避できます。
生成されるCSSは、設定画面の「CSSを確認」リンクから確認できます。
「 管理画面 ＞ プラグイン ＞ 新規追加 ＞ プラグインのアップロード 」で、ダウンロードされたZipファイルを選択し、
「今すぐインストール」をクリックしてインストール、「有効化」をクリックすると使用できます。