超便利なCocoonテーマの拡張色機能の使い方

大抵のサイトはメインカラーやサブカラーなど、サイト内で使用する色を決めていると思いますが、色を使用するたびにカラーコードなどを入力するのは面倒ですよね。

しかし、WordPressの無料テーマCocoonなら、そんな面倒は一発で解決できます。

本記事では色の指定に便利なCocoonの拡張色について解説します。

拡張色について

拡張色はCocoonテーマの機能で、設定することでWordPressの色選択に自身の好みの色を追加することができます。

追加した拡張色は簡単に呼び出すだけでなく、色を変えたい時には一括で変更可能なので、サイトのデザイン時にはかなり役立ちます。

設定方法は「Cocoon設定」の「エディター」の下の方にある「拡張カラーパレット色」という項目。

この項目の「色を選択」というボタンをクリックすると色の設定画面が開くので、右側の欄にカラーコードを入力して色を指定しましょう。

色はAからFの６色まで設定できるので、足りないということはないと思います。

設定したら保存しないと意味がないので、忘れないよう注意しましょう。

ブロックエディターでの使い方

Cocoonの拡張色は登録しておけば簡単に使うことができます。

ブロックエディターでテキストやボタンなどなんでも良いので色を選択、そうすると選択画面の「テーマ」カラーパレットの最下部の６つに登録した色があるので、設定したい色に変えるだけ。

通常の色と違うのは、先ほどのCocoon設定で色を変えると、勝手に変わってくれることで、それ以外は普通に色を設定するのと同じです。

絶対変えたくない色ならカスタム色として個別で設定、サイトのカラーイメージに沿った色なら拡張色として設定するような形で使い分けると良いでしょう。

CSSでの使い方

拡張色はブロックエディターだけでなくCSSで指定することも可能です。

方法は、CSSで色を設定する際にカラーコードの代わりに下記のように指定するだけ。

var(–wp–preset–color–ex-a)

最後の「a」が対応する拡張色なので、その部分を変えれば他の拡張色に変えられます。

こちらも先ほど説明したように設定を変えれば一緒に変わってくれるので、いちいちCSSを書き直すといった手間を省けます。

まとめ

Cocoonテーマの拡張色について紹介しました。

事前に色を設定しておくだけで、以降は呼び出すだけで良くなるので、投稿やデザインでの色指定には基本的にこの方法を使っておくと使い勝手が良くなります。

毎回カラーコードを打ち込んでいたという方はぜひ使ってみてください。