【Cocoon設定】文字や背景で使用する色を増やす(変更)方法│カラーパレットカスタマイズ

[Cocoon設定]文字や背景、ボックスで使用するカラーをカラーパレットに追加する方法ブログ
この記事は約4分で読めます。

当ブログはアフィリエイト広告を利用しています[PR]

ブロガーのこじろーです。
こじろーブログ。では、ブログ未経験者にも分かりやすくWordPressの使い方やアフィリエイトのノウハウを解説しています。
いつでも見直せるよう、ブックマークをしておくことをおすすめします!
初男
初男

Cocoonで使える文字色や背景色の種類を増やす方法を教えてほしい

初子
初子

Cocoonに用意されているカラーを好みの色に変えたい

本記事では、WordPressテーマ[Cocoon]で使用する文字や背景の色の追加や変更の方法についてのお悩みにお答えしていきます。

今回の記事で分かること
  • Cocoonの記事内で使用する文字色や背景色の追加や変更の方法
【Cocoon設定】エディターのボックスや文字色、背景色の例

今回のテーマの[カラー]は、Cocoonで記事を執筆している時に、強調したい文字や背景に使用する色を指しています。

本記事を読み終えれば、今より多くの色を使用可能になるので、装飾の幅が広がり記事本文の見栄えがさらにアップします。

簡単度:5.0
1分程度の作業です

【Cocoon設定】エディターの文字色の変更方法

エディタ―からの文字の色の変更方法を知らない人に簡単に方法をお伝えしていきます。

ご存じの方は次へ進んでください⇒こちら

Cocoonの文字色の変更方法
  • STEP1
    エディターに文字を入力

  • STEP2
    色変更をしたいテキストを選択

  • STEP3
    Cocoonのエディター操作

    エディターのメニュー
    ①[ブロック]を選択
    ②右のアイコンを選択
    ③カラーを選択
    ※[テキスト]と[背景]の選択が可能ですが、今回は[テキスト]を選択

  • STEP4
    カラー選択

    カラーパレットに使用可能なカラー一覧が表示されるので、文字色にしたいカラーを選択します

    色(青色)を選択すると[色]部分にカラーが反映されます

  • STEP5
    色確認

    指定した[好みの部分]の色が変更されたのを確認して終了

Cocoonのエディターで文字色や背景色の変更をする方法は以上です。

【Cocoon設定】カラーパレットとは?

カラーパレットとは?

WordPressのカラーパレットは、文字や背景に使うことができる色の組み合わせです。

【Cocoon設定】カラーパレットとは?-Cocoonのカラーパレットに登録されている色の数は31色
テーマ部分がカラーパレットです

先の項目をご覧になられた方はお気づきかもしれませんが、Cocoonのカラーパレットに標準登録されているカラー数は31色ですが、全ての色を使用することできません。

【Cocoon設定】カラーパレットとは?-Cocoonのカラーパレットには6色の拡張色が存在する

実は上の25色には色が登録されているのですが、下の拡張色と呼ばれる6つの色には色の設定がされていませんので、ここに色を追加していきます。

【Cocoon設定】カラーパレットに色を追加する方法

【cocoon設定】カラーパレットのカラーを増やす-前後

Cocoonのエディターのカラーパレットの中にある6色の拡張色に色を追加(変更)する方法をお伝えしていきます。

WordPressの管理画面を開いて進めていきます。

Cocoonのカラーパレットに色を追加する方法
  • STEP1
    Cocoon設定 ▷ Cocoon設定

    WordPress-管理画面-Cocoon設定Cocoon設定

  • STEP2
    Cocoon設定▷エディター設定

    WordPress-管理画面-Cocoon設定-エディター

    エディタ―をクリックします

    【Cocoon設定】エディター設定画面のスクロール

    下にスクロールします

  • STEP3
    【エディター設定】拡張カラーパレット色

    【Cocoon設定】エディター設定-拡張パレット色-デフォルト

    [拡張カレーパレット色]です
    ※拡張色はA~Fまでありデフォルトは全部白色

    【cocoon設定】エディター設定-拡張パレット色-色を追加

    拡張パレット色に自分の好みの色を指定します

    【Cocoon設定】エディター設定-拡張パレット色-色追加終了

    拡張パレット色の6色すべてに色を設定しました

  • STEP4
    保存

    【Cocoon設定】拡張パレット色-保存

    最下部の[変更をまとめて保存]をクリックして終了です

変更後は、実際にブロックエディターのカラーパレットで変更ができているか確認をしてください。

【Cocoon設定】ブロックエディター画面-拡張色の追加

拡張色が追加されていれば成功です。

【Cocoon設定】拡張色変更の注意点

カラーパレットの拡張色を変更(追加)すると、過去投稿で使用した全てのカラーにも反映されてしまいます。

なるべく、カラー変更は行わないようにし、もしブログの運営途中で変更をする場合は、留意点として意識をしておいてください。

【Cocoon設定】文字や背景で使用する色を増やす(変更)方法│カラーパレットカスタマイズまとめ

今回は、WordPressテーマ[Cocoon]のブロックエディターで使用するカラーパレットの色の変更や追加の方法を解説しました。

今回の記事で分かったこと
  • Cocoonのカラーパレットの色の追加(変更)は[Cocoon]設定のエディターで行う
  • 色変更ができるのは6個(拡張色)
  • 変更(追加)した色の設定は、過去の投稿にも反映されてしまうので注意する

カラーパレットの色は、記事の装飾に慣れてきた頃に変更してくなるのですが、なるべくお早めに変更しておくことをおすすめします。

最後までご覧いただきありがとうございました。

コメント

タイトルとURLをコピーしました