株式会社HAMWORKS
☝️

WordPressのサイトエディターで何ができるのかみていく【スタイル:色】

2025/02/03に公開

今回はスタイルのうち、色を見ていきます。

色ではサイトで使えるカラーパレットの設定ができます。任意のカラーを使うことももちろんできますが、サイトのブランドカラーやよく使う色は登録しておくと便利です。

パレット

パレットの文字の下に表示されているカラーパレットをクリックすると、以下の画面に遷移します。

[色]のタブでは単色、[グラデーション]のタブではグラデーションの他、デュオトーンのカラーがデフォルトで設定されています。

パレット名の横にある縦三つのドットをクリックすると、パレットの表示方法が変わります。

色をクリックすることで変更できますが、デフォルトパレットは色名の変更ができない(実際の色と色名が合わなくなる)ので控えた方がいいですね。

追加する場合は下の[カスタム]から可能です。[カスタム]の文字の右側にあるプラスアイコンをクリックすると、[色 1]として黒が追加されるので、色と色名を変更します。

なお、色名はCSSの変数として扱われるので半角英数字しか使えません。日本語や全角英数字を入れると消されて設定できないようになっています。

[完了]をクリックするだけではtheme.jsonが更新されていません
パレットを追加したら、きちんと[保存]をクリックする意識をしましょう。特に、Create Block Themeで書き出すときはページがリロードされるので、手癖で更新するとせっかく追加したパレットが全て消えてしまいます。


[保存]ボタンが非アクティブになっていれば問題なし

グラデーションカラーも同様にカスタムした項目を追加できます。

カスタムカラーの削除

カラーの削除も行えますが、三点縦ドットからは全色一気に消すことしかできません。

単体で色を消したい場合は、三点縦ドットの中にある[詳細を表示]から表示形式を変更すれば可能です。

デフォルトカラーの削除はできる?

管理画面からはできません。デフォルトのカラーパレットを無効にしたい場合は、theme.jsonを編集する必要があります。

https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#color

  • defaultPalette
  • defaultGradients
  • defaultDuotone

false にすればOKです。

{
	"settings": {
		"color": {
			"defaultPalette": false,
			"defaultGradients": false,
			"defaultDuotone": false
		},
		...
}

こんな感じに。

これでカラーパレットが自分で設定したもののみになります。

要素

項目それぞれの色を設定します。テキストを選ぶと、サイト全体の色を変更することができます。

設定した色を初期化したい場合は、[クリア]を選択します。

パレットに入れていない色を設定したい場合は、下図の画像の赤枠部分をクリックすると、カラーピッカーが表示されるので、このカラーピッカーを使って設定します。

[リンク]を選択したらホバー色も設定できます。ただし、このリンク色やホバー色はテキストリンク限定です。

[ボタン]は別途項目があり、こちらでテキスト色、背景色(グラデーションも可能)を設定できますが、ホバーの設定項目はありません。こちらはtheme.jsonでも設定不可の項目で、現状やろうと思ったらCSSを書くしかないです。

ホバーは統一した色にするとか色々やりようはあると思いますが、私は大体透明度の変更やbrightnessで対応することが多いですね。

株式会社HAMWORKS
株式会社HAMWORKS

Discussion