スポンサーリンク

コクーン(Cocoon)のボックスの背景色を変更する方法

ボックス背景色カスタムコクーン(Cocoon)

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

なぜ利用しているか?

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

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

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

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

スポンサーリンク

ボックスカラーバリエーションを6倍に

コクーン(Cocoon)テーマにある【スタイル】内のボックス。

無料テーマなのに、ここまで使えるなんて本当にありがたく使用させていただいています。

特にCSSとか全く分からないので、「コクーンカスタマイズ」で調べると、知識豊富な方がたくさんCSSでオリジナルのデザインで工夫されていることに、とても感心して、うらやましく思っています。

もしCSSが全く分からない、同じような境遇の方がいらっしゃったら、こんな方法でもボックスの背景色を増やすことができますよ。

プラグイン追加したらスタイル(タブボックス)が消えても慌てない!
コクーン(Cocoon)のスタイル(タブボックス)が消えた
コクーン(Cocoon)の文字装飾ができる標準機能、タブボックスがある日突然消えてなくなってしまいました。原因はプラグインのTinyMCE Advancedだった。でもTinyMCE Advancedの設定をすれば簡単に復活できました。

スタイル内のボックス(白抜き)

【スタイル】からボックス(白抜き)を選ぶと、文字を囲ってくれるフレームみたいなもので装飾してくれます。

標準で4色ありますね。

灰色
黄色
赤色
青色

背景色は白で、標準のままですが背景色を変えられれば、見た目がまた違いますよね。

例えばこんな感じです。

ボックスの灰色に濃い水色背景
ボックスの灰色に薄い緑色背景
ボックスの灰色に薄い青色背景
ボックスの灰色に薄い黄色背景
ボックスの灰色に薄い赤色背景

どうでしょう?見た目変わりますよね。

新たに5色増えました。

ボックスの背景色が白色を加え6色ということで、ボックスのカラーバリエーションが6倍になりました。

当然ながら先ほども書きましたが、CSSは全く分からないので使いたくても使えません。

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

とっても簡単な方法なんですよ。方法は下記の通りやるだけです。

  1. 文字を書く
  2. スタイルからボックス(白抜き)「灰色」を選ぶ(フレームが出来上がります)
  3. 文字が選択されているままの状態をキープ
  4. スタイルからボックス(案内)➡プライマリー(濃い水色)を選ぶ

たったこれだけです。

簡単に言うと同じ文字にボックス(白抜き)とボックス(案内)を2度書きしただけなんです。

同じ要領で2度書きを他の色でやってみると、先ほどのように背景色を変えることができます。

スタイル内ボックス(タブ)

こちらも同じようにすると、タブの背景色が同じく全6色になります。

ボックスの背景色標準の白色
ボックスの背景色
ボックスの背景色
ボックスの背景色
ボックスの背景色
ボックスの背景色

全く同じ要領で完成です。

ボックスのタブも白抜きも4色が標準なので、4色×6色=24種類もバリエーションがある事になりますよね。

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

ちょっとせこくてズルい方法だったかな?

全く無いよりはいいよね。

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

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

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

スポンサーリンク

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

コメント