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

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

サンプル

利用可能なカラム

以下の配置が可能

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

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

使い方

ブロックエディタの場合

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

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

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>

トップページなどで利用する

横並びカラムレイアウトを利用し、カテゴリー別記事一覧を表示するデザインのサンプルは以下にまとめています。

以上です。