WordPress無料テーマCocoonなら記事内のカラム分けも超簡単！

WordPress無料テーマCocoonには便利な機能が沢山あります。
今日は「記事内の2カラム3カラム設定方法」について。

Cocoonはカラムの設定も超簡単にできるんですよ。
ブログではあまり使わないかもしれませんが…

※ちなみにわたしはいまだにクラシックエディタを使っています。クラシックエディタ愛用の人には特に嬉しい機能だと思うんですよこれ。
ブロックエディタではカラム分けもできるの知ってるんですよ、知ってはいるんです…使う気もあるんですGutenberg…

Cocoonのカラム設定方法

ビジュアルエディタで「タグ」のプルダウンから設定します。

といっても選択するだけ！

簡単すぎる！
あとは文でも画像でも好きなように入れていきます。

上の画像では背景に色がついていますが、これは編集時にわかりやすくするためだけで実際は背景色はありません。

スマホだと縦に並びます。

2カラム（1:1 |□|□|）

同じサイズの2カラムならこちらを選択。
※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap column-2">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

2カラム（1:2 |□|□□|）

2カラムでPCでのサイズを1:2に。スマホで見ると同じサイズです。
※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap column-2 column-2-3-1-2">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

2カラム（2:1 |□□|□|）

2カラムでPCでのサイズを2:1に。スマホで見ると同じサイズです。
※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap column-2 column-2-3-2-1">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

2カラム（1:3 |□|□□□|）

2カラムでPCでのサイズを1:3に。スマホで見ると同じサイズです。
※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap column-2 column-2-4-1-3">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

2カラム（3:1 |□□□|□|）

2カラムでPCでのサイズを3:1に。スマホで見ると同じサイズです。
※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap column-2 column-2-4-3-1">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

3カラム

3カラムです。
ビジネスサイトって3カラム結構使いません？？
特に幅いっぱいのページ。LPとか。

※枠と背景色は実際はありません。

ソースはこうなっています。

<div class="column-wrap  column-3">
<div class="column-left">

左側に入力する内容

</div>
<div class="column-center">

中央に入力する内容

</div>
<div class="column-right">

右側に入力する内容

</div>
</div>

4カラム

4カラムにしたい！って時は2カラムの中に2カラムを入れます。

※枠と背景色は実際はありません。

Cocoonのカラム設定方法　まとめ

というわけで主にクラシックエディタ愛用の方には便利なんじゃないかなと思うCocoonのカラム設定方法でした。