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

ボックス背景色カスタム

[temp id=1]

目次

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

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

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

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

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

プラグイン追加したらスタイル(タブボックス)が消えても慌てない!
あわせて読みたい
コクーン(Cocoon)のスタイル(タブボックス)が消えた [temp id=1] 【今まで使えていたコクーン(Cocoon)のタブボックスが突然消えた】 先ほども書いた通りCSSやらHTMLが全く分からないので、コクーン(Cocoon)の様々な装飾機...

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

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

標準で4色ありますね。

灰色
黄色
赤色
青色

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

例えばこんな感じです。

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

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

新たに5色増えました。

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

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

波乗りアヒル

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

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

たったこれだけです。

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

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

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

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

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

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

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

波乗りアヒル

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

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

[temp id=3]

JALどこかにマイル
画像:JALプレスリリース資料より

日本航空の国内線往復航空券が7,000マイルで交換できる「どこかにマイル」

東京から札幌や福岡なら16,000マイル必要なので半分以下と超お得。

日常生活でマイルを貯めて年2回、旅行に行けるようになりましたのでおススメなので、利用方法をご紹介します。

よかったらシェアしてね!
  • URLをコピーしました!
目次