![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
記事装飾を好きな色に変更したいんだけど、どうすればいいのかな……??
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
記事装飾ってどんなのがあったかな?
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
例えば…白抜きボックスとか、ボタンとかだよ。
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
これなら、たった1つ設定を追加するだけで簡単に色変更できるよ。
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
えっ!CSS追加しなくてもできるの!?うれしいー。
早く教えて♡
![yoko](https://yoko51.com/wp-content/uploads/2019/09/0d2672183c26c5975bd9293c8cc5e992.png)
うん。もちろん!
この記事はこんな人にオススメ
この記事を読めば、できること
素早く簡単に、記事装飾の色を変更することができる!
色変更することができる装飾一覧
色が変えられる記事装飾に○印をつけたリストがこちら。全部で11種類。
![Cocoonブロック一覧](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_01.png)
色を変更する方法は、たった1ステップ
Gutenbergカラーパレットに色を追加するだけ
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
ホントにそれだけでいいの?!
簡単でうれしい ♪
具体的な方法は、、、
1. Cocoon設定→「エディター」タブを開く
![Cocoon設定画面](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_02C.png)
2. 下にスクロールし「ブロックエディター設定」の下部にある「拡張カラーパレット色」に進む
![拡張カラーパレット色の画面](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_03H.png)
3. 「Select Color」をクリックし、使いたい色のカラーコードを入力
![Cocoon カスタマイズ 装飾](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_04B.png)
4. 「変更をまとめて保存」をクリック
![Cocoon設定画面](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_05B.png)
5. カラーパレット(ボーダー色・背景色・文字色etc)に追加した色が反映される
![色を追加したカラーパレット](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_06B.png)
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
最大6色まで好きな色を登録できるよ!
開発者わいひらさんより注意点が1つ
こちらの色変更で色を変更したあとは、その後色を変更しないことをお勧めします。
というのも、色を変更してしまうと過去に書き込んだ記事の色も変わってしまうからです。
ご注意ください。
引用元:Cocoon「Gutenbergカラーパレットに好みの色を追加する方法」より
実演!記事装飾の色の変え方
試しにCOCOONブロックの「タブボックス」の色を変更してみたいと思います。
1. 「+」をクリックし「すべて表示」を選択
![Cocoonカスタマイズ 記事装飾の色を変更する方法1](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_09.png)
2. 左に全ブロックが表示されるので、下にスクロールし、COCOONブロックの「タブボックス」をクリック
![Cocoonカスタマイズ 記事装飾の色を変更する方法2](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_09B.png)
3. 記事執筆画面に「タブボックス」が表示される
![Cocoonカスタマイズ 記事装飾の色を変更する方法3](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_10D.png)
4. 「枠の色」の中から先ほど追加した色をクリックすると、あっという間に線の色が変わる
![Cocoonカスタマイズ 記事装飾の色を変更する方法4](https://yoko51.com/wp-content/uploads/2021/03/article-decoration_11F.png)
Gutenbergカラーパレットに1度色を追加してしまえば、いつでもすぐに好きな色の装飾を使うことができるのでとってもオススメ!
![キップム](https://yoko51.com/wp-content/uploads/2019/09/37dd1363b0b397038cd927b5913bac71.png)
枠、背景、文字の色が変えられるのでいろいろ試して、
あなたのブログにぴったりの装飾を見つけてね♪
おわりに
分からないことをCocoon公式サイトで質問した時に教えてもらい、「こんな簡単にできるなんて!」と感動したことを記事にしてみました。
サイト作りの際に参考にしていただければ嬉しいです。
無料で簡単、質問にも丁寧に対応してくれるCocoon最高!感謝しかありません。
文章: yoko( @_yoko51)
Comment