【Cocoonカスタマイズ】超簡単!記事装飾の色を自分好みに変える方法

Cocoon カスタマイズ 装飾

記事内に商品プロモーションを含む場合があります

キップム
キップム

記事装飾を好きな色に変更したいんだけど、どうすればいいのかな……??

yoko
yoko

記事装飾ってどんなのがあったかな?

キップム
キップム

例えば…白抜きボックスとか、ボタンとかだよ。

yoko
yoko

これなら、たった1つ設定を追加するだけで簡単に色変更できるよ。

キップム
キップム

えっ!CSS追加しなくてもできるの!?うれしいー。
早く教えて♡

yoko
yoko

うん。もちろん!

スポンサーリンク

この記事はこんな人にオススメ

  • サイトデザインに合わせて、記事装飾の色を変えたい人
  • ブログデザインにこだわっている人
  • Cocoonユーザー

この記事を読めば、できること


素早く簡単に、記事装飾の色を変更することができる!

色変更することができる装飾一覧

色が変えられる記事装飾に印をつけたリストがこちら。全部で11種類。

Cocoonブロック一覧

色を変更する方法は、たった1ステップ

Gutenbergカラーパレットに色を追加するだけ

キップム
キップム

ホントにそれだけでいいの?!
簡単でうれしい ♪

具体的な方法は、、、

1. Cocoon設定→「エディター」タブを開く

Cocoon設定画面

2. 下にスクロールし「ブロックエディター設定」の下部にある「拡張カラーパレット色」に進む

拡張カラーパレット色の画面

3. 「Select Color」をクリックし、使いたい色のカラーコードを入力

Cocoon カスタマイズ 装飾

4. 「変更をまとめて保存」をクリック

Cocoon設定画面

5. カラーパレット(ボーダー色・背景色・文字色etc)に追加した色が反映される

色を追加したカラーパレット
キップム
キップム

最大6色まで好きな色を登録できるよ!

開発者わいひらさんより注意点が1つ

こちらの色変更で色を変更したあとは、その後色を変更しないことをお勧めします。

というのも、色を変更してしまうと過去に書き込んだ記事の色も変わってしまうからです。

ご注意ください。

引用元:Cocoon「Gutenbergカラーパレットに好みの色を追加する方法」より

実演!記事装飾の色の変え方

試しにCOCOONブロックの「タブボックス」の色を変更してみたいと思います。

1. 「+」をクリックし「すべて表示」を選択

 Cocoonカスタマイズ 記事装飾の色を変更する方法1

2. 左に全ブロックが表示されるので、下にスクロールし、COCOONブロックの「タブボックス」をクリック

Cocoonカスタマイズ 記事装飾の色を変更する方法2

3. 記事執筆画面に「タブボックス」が表示される

Cocoonカスタマイズ 記事装飾の色を変更する方法3

4. 「枠の色」の中から先ほど追加した色をクリックすると、あっという間に線の色が変わる

Cocoonカスタマイズ 記事装飾の色を変更する方法4

Gutenbergカラーパレットに1度色を追加してしまえば、いつでもすぐに好きな色の装飾を使うことができるのでとってもオススメ!

キップム
キップム

枠、背景、文字の色が変えられるのでいろいろ試して、

あなたのブログにぴったりの装飾を見つけてね♪

おわりに

分からないことをCocoon公式サイトで質問した時に教えてもらい、「こんな簡単にできるなんて!」と感動したことを記事にしてみました。

サイト作りの際に参考にしていただければ嬉しいです。

無料で簡単、質問にも丁寧に対応してくれるCocoon最高!感謝しかありません。

文章: yoko( @_yoko51

Comment