コクーン（Cocoon）テーマの2カラムに背景色をつける方法

[temp id=1]

2カラム・3カラムに背景色をつける方法

先ほども書いた通り、CSSやHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機能（タブボックスやスタイル）にはとても助けられています。

前回は、2カラム・3カラムにフレーム枠をつける方法を書きましたが、今回は背景色です。

参考

コクーンテーマには左側に画像、右側に本文みたいなレイアウトができるカラムという機能が、本来はCSSやHTMLなどの知識が無いと、できないレイアウトの技なのですが標準装備されています。

使い方は、【タグ】を選ぶと2列になる2カラムと3列の3カラムがあります。

初心者には非常に分かりやすく書けるように色と文字で表示されていますが、実際にプレビューをすると味気ないですよね。

なんだか寂しいと感じませんか？

そこで、スタイル機能をいろいろ試してみる事を繰り返していたら、背景色をつけられるようになった。

背景色なしの標準機能

背景色付きの標準機能組み合わせ技

当然コクーンテーマの標準機能なのでスマホでは画像（左カラム）が上、文字（右カラム）が下になり、背景色も縦長になって表示されます。

2カラム・3カラムに背景色をつける手順

とても簡単にできる手順をご紹介しますのでぜひ活用してくださいね。

１、【スタイル】から【ボックス（案内）】を選びます。

２、背景色は5色からお好みを選びます。

• プライマリー（濃い水色）
• サクセス（薄い緑）
• インフォ（薄い青）
• ワーニング（薄い黄色）
• デンジャー（薄い赤色）

薄い緑を選ぶとこんな感じになりますよね。

３、表示された薄い緑ボックスにマウスを移動してクリックするとカーソルが点滅します。

４、その状態で【タグ】から2カラムを選択すると、枠の中にカラム表示されます。

あとはいつも通り、左側と右側のそれぞれ内容を書けば背景色付きの2カラム・3カラム表示が完成しますよ！

5色あるからバリエーション変えることもできますね。

[temp id=3]