グリッドシステム

組み合わせて簡単にレイアウト

無料のワードプレステーマ GEMSTONE

グリッドについて

テーマファイルのグリッドシステムはSimple Gridをカスタマイズしたものを使用しています。グリッドのCSSは style.cssにまとめています。
薄グレーは見出しの背景色です。entry-content クラス内の見出し要素は、ブロックレベル要素で幅を100%指定しています。
薄ピンクの部分は左右に10pxづつ空いたパディングです。左右にはさらに 1px のボーダーを入れています。
これはグリッドシステムを説明するための処置なので、実際のグリッドに背景色とボーダーは設定していません。
横幅が 767px 以下になると幅が100%になり、自動的に左右のパディングが消えます。
隙間を消したくない場合は、.parent クラスを使用するか、パディング用クラスを追加しておきましょう。

通常グリッド

グリッドシステムを利用すると以下のようになります。

col-1-1
col-1-2
col-1-2
col-1-3
col-1-3
col-1-3
col-1-4
col-1-4
col-1-4
col-1-4
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-7
col-1-7
col-1-7
col-1-7
col-1-7
col-1-7
col-1-7
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-8
col-1-9
col-1-9
col-1-9
col-1-9
col-1-9
col-1-9
col-1-9
col-1-9
col-1-9
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-10
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-11
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12
col-1-12

その他レイアウト用グリッド

カラムは組み合わせることができるので、合わせて12になるように計算して使用してください。

col-1-12
col-11-12
col-2-12
col-10-12
col-3-12
col-9-12
col-4-12
col-8-12
col-5-12
col-7-12
col-6-12
col-6-12
col-7-12
col-5-12
col-8-12
col-4-12
col-9-12
col-3-12
col-10-12
col-2-12
col-11-12
col-1-11

じつは他にも並べられる組み合わせもあったります。

col-1-3
col-2-3
col-1-4
col-3-4
col-2-5
col-3-5
col-1-6
col-5-6

通常グリッド+クラス

特殊なクラスを使うことで左右のパディングを消すことが可能になります。
.no-pad(全パディング消去) や .no-pl(左パディング消去) .no-pr(右パディング消去) クラスを追加するとパディングが消えます。
.parent クラスを追加すると左右パディングが消えます。style.css に記述しているのは .col-1-1(1列) .col-1-2(2列) .col-1-3(3列) .col-1-4(4列) .col-1-5(5列) .col-1-6(6列) になります。
親クラス(.parent)の中であれば、グリッドを繰り返しても自動で左右パディングは消去されます。
どちらも状況に合わせてご活用ください。

全てのパディングを消した場合

col-1-1

左右のパディングを消した場合

col-2-3
col-1-3

親クラスに .parent を使用した場合

col-1-1
col-1-1
col-1-2
col-1-2
col-1-2
col-1-2
col-1-3
col-1-3
col-1-3
col-1-3
col-1-3
col-1-3
col-1-4
col-1-4
col-1-4
col-1-4
col-1-4
col-1-4
col-1-4
col-1-4
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-5
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6
col-1-6

.parent を使えば、ランダムな組み合わせも可能ですが、かならず列ごとに.parent クラスでグリッドを囲んでください。

col-1-12
col-2-12
col-5-12
col-3-12
col-1-12

モバイル用グリッド

横幅を狭くした時にもカラムを保ったままにしたい場合は、mobile-col のクラスを追加してください。
横幅が 767px 以下になると、自動的に左右のパディングが消えます。
ただ、あまり細かいグリッドの分割のまま横幅を狭くすると、レイアウトが崩れる可能性があるのでお気をつけください。

mobile-col-1-1
mobile-col-1-2
mobile-col-1-2
mobile-col-1-3
mobile-col-1-3
mobile-col-1-3
mobile-col-1-4
mobile-col-1-4
mobile-col-1-4
mobile-col-1-4
mobile-col-1-5
mobile-col-1-5
mobile-col-1-5
mobile-col-1-5
mobile-col-1-5
mobile-col-1-6
mobile-col-1-6
mobile-col-1-6
mobile-col-1-6
mobile-col-1-6
mobile-col-1-6
mobile-col-1-7
mobile-col-1-7
mobile-col-1-7
mobile-col-1-7
mobile-col-1-7
mobile-col-1-7
mobile-col-1-7
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-8
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-9
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-10
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-11
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12
mobile-col-1-12

モバイルレイアウト用グリッド

通常のと同様、他のグリッドもあります。

1-12
mobile-col-11-12
mobile-col-2-12
mobile-col-10-12
mobile-col-3-12
mobile-col-9-12
mobile-col-4-12
mobile-col-8-12
mobile-col-5-12
mobile-col-7-12
mobile-col-6-12
mobile-col-6-12
mobile-col-7-12
mobile-col-5-12
mobile-col-8-12
mobile-col-4-12
mobile-col-9-12
mobile-col-3-12
mobile-col-10-12
mobile-col-2-12
mobile-col-11-12
1-11