スポンサーリンク

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

Cocoonコクーンカテゴリー表示方法コクーン(Cocoon)

このブログはWordPressの無料テーマ「Cocoon」(コクーン)を使用しています。

なぜ利用しているか?

無料なのはもちろんうれしいのですが、なんといってもHTMLタグとかCSSとか全く分からなくても大丈夫って事です。

こんな風に蛍光ペンで下線を入れるもの標準装備。本来CSSを理解していない私にはできなかったことが可能になりました。

まあ、こんなレベルなのでCocoonをインストールしてからも大変。マニュアルを見ながら四苦八苦。

マニュアルの簡単な単語の意味も未だま分からず、笑われてしまうぐらいでお恥ずかしい!だから人一倍疑問が多いので、これらを書いてみました。

スポンサーリンク

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

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

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

参考

コクーン(Cocoon)テーマの2カラムにフレーム枠をつける方法
コクーンテーマにあるタグの中にある2カラムをそのまま使ってもいいのですが、せっかくならフレーム枠で囲って使いたくなりませんか?CSSやHTMLの知識不要で、コクーンテーマの標準機能の組み合わせで簡単にできる方法です。見た目が変わるといいものですよね。

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

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

ビジュアルモードでの表示では・・・

コクーンテーマcocoonカラムフレーム枠

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

プレビューしてみると・・

枠のないコクーンテーマのカラムなんだか寂しいと感じませんか?

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

背景色なしの標準機能

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも?

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

三春滝桜

4月中旬の桜観光スポットは樹齢千年の三春町の1本桜へ

東京から車で約3時間、滞在時間90分で日本3大1本桜が見られる。
運が良ければ青春18きっぷ最終日4月10日に間に合うかも?

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

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

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

1、【スタイル】から【ボックス(案内)】を選びます。

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

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

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

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

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

コクーンカラムに背景色をつける

波乗りアヒル
波乗りアヒル

これで完成です!簡単でしょう!

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

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

波乗りアヒル
波乗りアヒル

早く🔰から卒業できるように!日々奮闘中!なので、CSS使わなくてもできるカスタマイズってありがたいですね。

初心者の🔰のあるあるを書き出してみました。

スポンサーリンク

コクーンテーマをひと工夫

コメント