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を選択

文字の背景青色に設定

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

プレビューで確認

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

RECOMMEND

CONTACT

Webサイト作成は、是非
CXG DESIGNへご検討ください。