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

記事作成
この記事は約3分で読めます。

Cocoonでは、2カラムもしくは、3カラムレイアウトをしやすくする機能が実装されています。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

2・3カラムレイアウトを利用する方法

ビジュアルエディターの「タグ」ドロップダウンリストの項目を選択することで、以下のように簡単にカラムレイアウトを作成できます。

Cocoonのカラムレイアウト作成方法

上記のように、"ビジュアルエディター上では"カラムはカラーリングされて見やすく表示されます。

ただ、カラーリングされるのは、ビジュアルエディターだけなので、公開ページでは単なる2カラム、3カラムとして表示されます。

2カラム例

2カラムの入力例です。

2カラムレイアウトの入力画面

2カラム(1:1)

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

2カラム(1:2)

右カラムが広い。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

2カラム(2:1)

左カラムが広い。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

2カラム(1:3)

右カラムが左カラムの3倍。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

2カラム(3:1)

左カラムが右カラムの3倍

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

3カラム例

3カラムの入力例。

3カラムレイアウトを実際に使用して状態がこちら。

メロスは激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。メロスには政治がわからぬ。

ある日の暮方の事である。一人の下人げにんが、羅生門の下で雨やみを待っていた。

ゴーシュは町の活動写真館でセロを弾く係りでした。けれどもあんまり上手でないという評判でした。

わいひら
わいひら

ビジュアルエディターから手軽に挿入できるので、簡単に使えると思います。

4カラム

4カラムを利用する場合は、2カラムの中に2カラムを入れると利用できます。

4カラムの入力例

実際の表示例はこちら。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

私わたくしはその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。

補足説明

3カラムなどを利用していて、幅が狭い場合は、投稿管理画面の「ページ設定」で「1カラム」を選択すると良いでしょう。

わいひら
わいひら

この「1カラム」というのは、記事内カラムではなくメインカラムのことになります。

タイトルとURLをコピーしました