Cocoonの簡単レイアウト分割 2カラム・3カラム・4カラム表示【自分用メモ】【WordPress】

Cocoonのレイアウト分割概要

注意 ※バージョンや環境によっては正常に動作しない可能性があります。

以下の公式のレイアウト分割のメモです。

記事内を2カラム・3カラム・4カラムに分ける方法

投稿記事内に手軽に2カラム・3カラムレイアウトを挿入する方法です。ビジュアルエディターからクリック操作のみで入力可能です。

wp-cocoon.com

2カラム、3カラムは標準で用意されています。

4カラムは2カラムを入れ子にすることで実現できます。

用意されている以外の幅を設定したい人は、column-wrap column-数字に、display: flexとwidthで指定されているので、上手く調整するとカスタマイズできると思います。

以下は、旧エディターでコピペするようのコードです。

実際のカラム

2カラム（1:1）

<div class="column-wrap column-2">
  <div class="column-left">左側に入力する内容</div>
  <div class="column-right">右側に入力する内容</div>
</div>

2カラム（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）

<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）

<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）

<div class="column-wrap column-2 column-2-4-3-1">
  <div class="column-left">左側に入力する内容</div>
  <div class="column-right">右側に入力する内容</div>
</div>

3カラム

<div class="column-wrap column-3">
  <div class="column-left">左側に入力する内容</div>
  <div class="column-center">中央に入力する内容</div>
  <div class="column-right">右側に入力する内容</div>
</div>

4カラム

<div class="column-2-padding">
  <div class="column-wrap column-2">
    <div class="column-left">
      <div class="column-wrap column-2">
        <div class="column-left">左側に入力する内容</div>
        <div class="column-right">右側に入力する内容</div>
      </div>
    </div>
    <div class="column-right"> 
      <div class="column-wrap column-2">
        <div class="column-left">左側に入力する内容</div>
        <div class="column-right">右側に入力する内容</div>
      </div>
    </div>
  </div>
</div>