
theme.jsonで、ブロックエディターのハイライトカラーのパレットを変更
theme.jsonでは、ブロックエディターのデフォルト設定を変更するとこができます。今回は、theme.jsonで、ブロックエディターのハイライトカラーのパレットを変更する方法を紹介します。
コード
テーマ直下にtheme.jsonファイルを作成し、下記コードを入力します。
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "800px",
"wideSize": "1200px"
},
"color": {
"palette": [
{
"name": "Red",
"slug": "red",
"color": "#e60033"
},
{
"name": "Blue",
"slug": "blue",
"color": "#004be1"
}
]
}
},
"styles": {},
"patterns": [],
"customTemplates": [],
"templateParts": []
}
確認
テキストを入力し、ハイライト設定する文字を選択。さらに表示>ハイライトをクリックします。テキスト>Redをクリックします。文字が赤色に設定されます。

文字を選択し、さらに表示>ハイライトをクリック

テキスト>Redをクリック

文字が赤色に設定
別のテキストを選択し、さらに表示>ハイライトをクリックします。背景>Blueを選択します。文字の背景が青色に設定されます。

背景>Blueを選択

文字の背景が青色に設定
最後に、プレビューで確認します。設定がプレビューに反映されていれば完了です。

プレビューで確認
以上で今回の説明は終了です。赤や黄色など、よく使う色をのみ登録しておけば便利ですね。