賢威7のWordPress版で、元々用意されているCSSを用いてカラム分けする方法をメモしておきます。
目次
2カラム
<div class=
"col2-wrap"
>
<div class=
"col"
>
カラム①
</div>
<div class=
"col"
>
カラム②
</div>
</div>
3カラム
単純に3つに分ける
<div class=
"col3-wrap"
>
<div class=
"col"
>
カラム①
</div>
<div class=
"col"
>
カラム②
</div>
<div class=
"col"
>
カラム③
</div>
</div>
左を2/3、右を1/3に分ける
<div class=
"col3-wrap"
>
<div class=
"col col_2of3"
>
カラム①(2つ分のスペース)
</div>
<div class=
"col"
>
カラム②
</div>
</div>
左を1/3、右を2/3に分ける
<div class=
"col3-wrap"
>
<div class=
"col"
>
カラム①
</div>
<div class=
"col col_2of3"
>
カラム②(2つ分のスペース)
</div>
</div>
4カラム
単純に4つに分ける
<div class=
"col4-wrap"
>
<div class=
"col"
>
カラム①
</div>
<div class=
"col"
>
カラム②
</div>
<div class=
"col"
>
カラム③
</div>
<div class=
"col"
>
カラム④
</div>
</div>
左1/2、中央1/4、右1/4に分ける
<div class=
"col4-wrap"
>
<div class=
"col col_2of4"
>
1
つ目のカラムです。(合体)
</div>
<div class=
"col"
>
2
つ目のカラムです。
</div>
<div class=
"col"
>
3
つ目のカラムです。
</div>
</div>
左3/4、右1/4に分ける
<div class=
"col4-wrap"
>
<div class=
"col col_3of4"
>
1
つ目のカラムです。(合体)
</div>
<div class=
"col"
>
2
つ目のカラムです。
</div>
</div>