cocoonブロックエディターでボックスの背景色を増やすには?

アイキャッチ画像 cocoon

「アイコンボックス」、「案内ボックス」「白抜きボックス」などの背景色をもっと増やす方法です。

ブロックエディターの「白抜きボックス」の背景色を増やしたい



cocoon「白抜きボックス」の背景色に好みの色を追加したい、というときの方法です。

アフィリエイトで売上の上がっている人が薄いグレーを使っていたのでおしゃれだなと思いました。


シックで落ち着きのある雰囲気にしたいと思ったとき、薄いグレーがあればなあと思いました。

1.

+[ブロックを追加」から、「白抜きボックス」をクリックします。

この「白抜きボックス」の背景が設定されています。

2.

この背景にお好みで増やしていこうというものです。

3.

cocoonの「cocoon設定」から「エディター」を選択。

4.

「拡張カラーパレット色」「拡張色A」から「拡張色F」まであります。

この「拡張色A」の白を変更します。

5.

灰色の「FAFAFA」に変更します。

変更後は、下の「変更をまとめて保存」ボタンを押して保存します。

6

そうしてできたのが、上記のようになります。

「2.」の拡張色A白色(FFFFFF)

のところが、「FAFAFA]と変更にになります。

注意すること

一旦変更しましたら、再度変更すると今まで使っていた色が変わりますので、変更には注意する必要があります。← やってしまいました。


まとめ 自分の好みの色に合わせることができる

拡張色は、ボーダーの色も併せて6色しかありません。

ちょっと少ないかなと思います。

大事に使っていきたいです。

「白抜きボックス」以外にも「アイコンボックス」など同系統のものにも使えます。