ブロックの色設定を使うときの注意点

ブロックの色設定を使うときの注意点

Posted: 2020/1/27 Updated: 2020/1/28

段落やグループといった一部のブロックには、色設定として文字の色や背景色を変えるカラーパレットの機能がついています。

このカラーパレットは、管理画面で設定するものではなく、テーマで設定したカラーが適用されます。

カラーパレットの色はadd_theme_supportで設定します。

add_theme_support(
	'editor-color-palette',
	array(
		array(
			'name'  => __( 'Red', 'futuristic' ),
			'slug'  => 'red',
			'color' => '#c90000',
		),
		array(
			'name'  => __( 'Blue', 'futuristic' ),
			'slug'  => 'blue',
			'color' => '#0018c9',
		),
		array(
			'name'  => __( 'Green', 'futuristic' ),
			'slug'  => 'green',
			'color' => '#05c900',
		),
	)
);

カラーパレットの色を使用したとき、背景色であればhas-(カラー名)-background-color、文字色であればhas-(カラー名)-colorが付与されます。

どんな色を管理する?

私だったら、強調でよくつかいそうな赤や、逆に主張を弱くするときのグレーなどを設定します。コーポレートサイトであれば、会社の色を入れてもよさそう。

逆に、あまり使わないような突飛な色は「カスタムカラー」で使えるので、特に必要ないかなと思います。

赤は赤でも#f00といった真っ赤!って感じの色ではなく、ちょっと彩度や明度を落とした見やすい赤を設定できたりするのがいいですね!

テーマで設定する=カラーはテーマ依存

テーマのfunctions.phpでカラーを追加していくので、当然テーマを切り替えると、色が反映されなくなります

同じサイトをリニューアルするときなんかは、カラー設定(特に、editor-color-paletteのslug)は引き継いでおくのが無難ですね。