Cocoonの記事内で２～４カラムのエリアを自在に配置する方法

Cocoon・使い方

2020.04.192024.01.25

この記事は約4分で読めます。

Cocoonには、ページ内で２～３カラムの並列記述を可能にするデザインCSSが標準に用意されていて、クラシックエディタを利用していても、そのクラス名を使う事で

簡単に横並びに好きな配置利用する事が出来ます。

サンプル

利用可能なカラム
使い方
- ブロックエディタの場合
- クラシックエディタの場合
HTMLサンプルと見た目サンプル
コードで挿入出来るカラム
トップページなどで利用する

利用可能なカラム

以下の配置が可能

２分割（１：１）
２分割（１：２）
２分割（２：１）
２分割（１：３）
２分割（３：１）

※４分割は、ブロックエディタにはありません。

更に、以下の分割はコード記述する事で挿入可能です。

３分割（１：１：１）
４分割（１：１：１：１）

使い方

ブロックエディタの場合

ブロックエディタ利用であればCocoon独自ブロックの「Cocoonレイアウト」を使えば簡単にカラムレイアウトが利用出来ます。

今回は、詳細説明は省きます。

クラシックエディタの場合

ビジュアルエディタの「タグ」を開き、カラムレイアウトを挿入します。

HTMLサンプルと見た目サンプル

これらのHTMLサンプルを以下にまとめています。

以下のHTMLを追記すると、ビジュアルエディタでは以下のようにエリアに色が付きますが、これは、エディタ上のみで、実際には色はつきません。

ビジュアルエディタでの見た目

実際の見た目

以下のサンプル画像は、わかりやすくする為にエリアに枠をつけています

２分割（１：１）

<div class="column-wrap">
<div class="column-left">２分割　左側</div>
<div class="column-left">２分割　右側</div>
</div>

２分割（１：２）

<div class="column-wrap column-2-3-1-2">
<div class="column-left">２分割　左側</div>
<div class="column-right">２分割　右側</div>
</div>

２分割（２：１）

<div class="column-wrap column-2-3-2-1">
<div class="column-left">２分割　左側</div>
<div class="column-right">２分割　右側</div>
</div>

２分割（１：３）

<div class="column-wrap column-2-4-1-3">
<div class="column-left">２分割　左側</div>
<div class="column-right">２分割　右側</div>
</div>

２分割（３：１）

<div class="column-wrap column-2-4-3-1">
<div class="column-left">２分割　左側</div>
<div class="column-right">２分割　右側</div>
</div>

コードで挿入出来るカラム

Cocoon親テーマ内のスタイルシートに、それぞれの幅を設定している箇所があります。

そのクラス名を指定して記述するだけです。

「テキストエディタ」にしてHTMLを記述。

３分割（１：１：１）

<div class="column-wrap column-2-3-1-2">
<div class="column-left">３分割　左側</div>
<div class="column-left">３分割　中央</div>
<div class="column-left">３分割　右側</div>
</div>

４分割（１：１：１：１）

<div class="column-wrap column-2-4-1-3">
<div class="column-left">４分割　１</div>
<div class="column-left">４分割　２</div>
<div class="column-left">４分割　３</div>
<div class="column-left">４分割　４</div>
</div>