![](https://cxg-design.jp/wp-content/uploads/2024/07/uniquecolor_thumb01.png)
ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更
ブロックエディターでは、テキスト色や背景色をデフォルトの12色のカラーパレットの中から選ぶことが出来ます。今回は、ブロックエディターのテキスト色、背景色のカラーパレットを独自スタイルに変更する方法を紹介します。
コード
functions.phpに、下記コードを入力します。
/* スタイルシート */
add_action( 'after_setup_theme', function(){
add_theme_support( 'editor-styles' );
add_editor_style('assets/css/editor-styles.css');
});
/* ブロックエディター */
add_action( 'after_setup_theme', function() {
add_theme_support( 'editor-color-palette', array(
array(
'name' => '赤色',
'slug' => 'vivid-red',
'color' => '#C3201C',
),
array(
'name' => '紺色',
'slug' => 'dark-blue',
'color' => '#0D357C',
),
array(
'name' => '灰色',
'slug' => 'medium-gray',
'color' => '#59595A',
),
array(
'name' => '深緑',
'slug' => 'dark-green',
'color' => '#005F30',
),
) );
} );
editor-styles.cssに下記コードを入力します。
/* 文字色 */
.has-vivid-red-color {
color: #C3201C;
}
.has-dark-blue-color {
color: #0D357C;
}
.has-medium-gray-color {
color: #59595A;
}
.has-dark-green-color {
color: #005F30;
}
/* 背景色 */
.has-vivid-red-background-color {
background-color: #C3201C;
}
.has-dark-blue-background-color {
background-color: #0D357C;
}
.has-medium-gray-background-color {
background-color: #59595A;
}
.has-dark-green-background-color {
background-color: #005F30;
}
ブロックエディター
実際ブロックスタイルがブロックエディターで反映されているか確認します。
カバーブロックの背景色を確認し、赤色に設定します。見出しのテキスト色を確認し、深緑に設定します。下に3カラムを作成し、すべてのテキスト色、背景色を設定します。
プレビューを表示し、ブロックエディターの設定が反映されているか確認します。
![](https://cxg-design.jp/wp-content/uploads/2024/07/5e41a672aa5b091bf67607401dce319c.png)
カバーブロックの背景色を確認
![](https://cxg-design.jp/wp-content/uploads/2024/07/cb84ad35c4bbd2dfa3dea9a19f1d02f4.png)
見出しのテキスト色を確認
![](https://cxg-design.jp/wp-content/uploads/2024/07/6775f787b22c1456a73e36e70c1d094a.png)
すべてのテキスト色、背景色を設定
![](https://cxg-design.jp/wp-content/uploads/2024/07/2f5fbfd9a4e08c2776c1b0587b66daac.png)
プレビューを表示し、ブロックエディターの設定が反映されているか確認
以上で今回の説明は終了です。サイトのデザインに合わせて使用する色を設定しておくと便利です。その他、テキストサイズなども設定することが出来ます。