tochi執筆本「NFTで趣味をお金に買える」»

【Cocoon】カラーパレットに好きな色を追加する【6種増!】

【Cocoon】カラーパレットに好きな色を追加する

「Cocoonのスキンに合ったカラーがブロックでも使えるようにならないかな。デフォルトのものじゃ、どうも自分のブログに合わないんだよな〜」

といった、こだわり派のCocoonユーザーの疑問に答えます。

Cocoonは2.0.0へのバージョンアップ(19年11月)により、標準でカラーパレットに好きな色が追加できる仕様になりました。

これまでコードをゴニョゴニョして追加するしかなかったカスタムカラーが簡単にできます!

プログラミング入門
テックアカデミー7日間無料体験
※今すぐできるオンライン学習です。

【Cocoon】カラーパレットに好きな色を追加する

【Cocoon】カラーパレットに好きな色を追加する

カラーパレットが使えるCocoonブロック

標準設定でカラーの拡張ができるのは、下記のようなカラーパレットが使えるCocoonブロックです。

カラーパレットが使えるCocoonブロック
  • 白抜きボックス
  • アイコンリスト
  • タブボックス
  • ボタン
  • 囲みボタン
  • トグルボックス
  • マイクロバルーン
  • マイクロテキスト
  • 見出しボックス
  • タブ見出しボックス
  • ラベルボックス

デフォルトでも24種類のカラーバリエーションがあるのですが、ここに6種類のカラーを追加することができます。

カラーバリエーション

拡張カラーパレット

「Cocoon設定」→「エディター」→「ブロックエディター設定」と進みます。

「ブロックエディター設定」の下部にある「拡張カラーパレット色」の拡張色A〜Fで任意のカラーを追加できます。

拡張カラーパレット色
カラーバリエーションは原色大辞典さんより

原色大辞典さんに色のHTMLコードがたくさん揃っていますので、ぜひ参考にしてみてください。

これで好きなカラーが追加できました。

プログラミング入門
テックアカデミー7日間無料体験
※今すぐできるオンライン学習です。

【Cocoon】カラーパレットに色を追加する際の注意点

【Cocoon】カラーパレットに色を追加する際の注意点

「カラーの追加がしたい!」と思ったのは下記2点の理由から。

自分のブログに合うカラーがデフォルトになかった

豊富なCocoonのスキン(60種類以上)に対して、デフォルトのカラーバリエーションが少なかった

当ブログはカラーモードCMYKでいうCM混合色=紺系を基調にしていているため、シンプルな(この下に敷いたような)グレー系のバリエーションを探していました。

CMYKとは

CMYKはシアン(青系)、マゼンタ(ピンク系)、イエロー、ブラックの4成分により色を表す方法です。

注意点としては、「カラーパレット」に追加できるからといって、あまりいろんな色を使い過ぎないようにすることです。

サイトや記事の統一感を出すためにも基本は2色、多くても3色に抑えるべきです。(グラデーション系を除いて)

過度な多色は、読者の目の負担にもなりますカラー。

プログラミング入門
テックアカデミー7日間無料体験
※今すぐできるオンライン学習です。

【Cocoon】カラーパレットに好きな色を追加する:まとめ

【Cocoon】カラーパレットに好きな色を追加する:まとめ

Cocoonでブログ運営をしていていつも思うことなんですが、「待ってりゃカスタマイズが追いついてくる」って感じがあります。

わいひらさん
わいひらさん

また、言っとこ。

Cocoon製作者のわいひらさん、やっぱり神w

プログラミング入門
テックアカデミー7日間無料体験
※今すぐできるオンライン学習です。