Twenty Twenty-Two 4 カラーパレットの編集

カラーパレットについては、ワードプレスのデフォルト以外に、Twenty Twenty-Twoのテーマ独自の5つのカスタムパレットが設定されていました。

• 上の図のオレンジ枠内がTwenty Twenty-Twoで設定されたカスタムパレット
• 青色枠内が私が追加で設定したカスタムパレット
• 灰色枠内がワードプレスのデフォルトのパレット

パレットを1つ設定すると、(私の知る範囲で)下記の5つのエリアに簡単に色を付けることができます。

• ブロックの背景
• ブロックの文字色
• ブロック内のリンクの色
• ブロック内の文字列の一部の色の変更
• ブロック内の文字列の一部のハイライト

Twenty Twenty-Oneが設定したカスタムパレットは、foreground(文字色など前面の色)、background(背景色)、primary(1番目)、secondary(2番目)、tertiary(3番目)の5種類でした。※primaryはボタンの色と連動しています。

※私が気付いた範囲では、backgroundパレットはホームのヘッダー(鳥の部分)の背景色に、primaryはボタンに使われていました。

色の変更方法は、CSSで配色を上書きすることができますが、親テーマから子テーマにtheme.jsonを複製して、複製した子テーマのtheme.jsonの色指定箇所を別の色に置き換えるのが最も簡単でシンプルでした。

※子テーマに親テーマのファイルをコピーする方法は、下記の関連記事「ワードプレス、「子テーマ」作成」のscreenshot.phpを複製するのと同じ方法です。

※一旦、コントロールパネルでファイルを複製したら、ワードプレスの管理画面からも編集できるようになります。

(マルチサイトじゃない場合は)外観 → テーマエディタ → 子テーマを選択 → theme.json

子テーマのtheme.jsonを開いて、paletteで検索すると、割と簡単に上のような部分が出てくると思います。{}に挟まれたのが1つのパレットで、colorの部分を別の色コードへ変更すると、色が変わります。

• slugは、パレットのコードみたいなもの、英字始まりの英数字で。
• colorは、色コードを。
• nameは、パレットをホバーした時などに表示されるパレット名なので、日本語でもOK。
• tertiaryまでがTwentyTwentyOneのカスタムパレット、important以降が私が作ったものです。

コードは下記の通り

	{
		"slug": "foreground",
		"color": "#000000",
		"name": "Foreground"
	},
	{
		"slug": "background",
		"color": "#ffffff",
		"name": "Background"
	},
	{
		"slug": "primary",
		"color": "#1a4548",
		"name": "Primary"
	},
	{
		"slug": "secondary",
		"color": "#ffe2c7",
		"name": "Secondary"
	},
	{
		"slug": "tertiary",
		"color": "#F6F6F6",
		"name": "Tertiary"
	},
	{
		"slug": "important",
		"color": "#FF7C7C",
		"name": "重要"
	},
	{
		"slug": "tips",
		"color": "#E0CB6D",
		"name": "ヒント"
	},
	{
		"slug": "notes",
		"color": "#808000",
		"name": "メモ"
	},
	{
		"slug": "reference",
		"color": "#ffffff",
		"name": "参照元"
	},
	{
		"slug": "tranlslation",
		"color": "#E47CFF",
		"name": "翻訳"
	}

それから、ブロックの背景色については、CSSでもうちょっと装飾してみてもいいかもしれません。

外観 → カスタマイズ → 追加CSSにコードを追記して装飾

↓私のコードはこんな感じ↓

.has-important-background-color {
  background: linear-gradient(to right, #FF7C7C, #FFCA7C,#FF7C7C);
}

.has-tips-background-color {
  border: solid 3px #FFFFFF;
  outline: dashed 2px #FFFFFF;
  outline-offset: -8px;
}

.has-notes-background-color {
  border: solid 3px #FFFFFF;
  outline: dotted 4px #FFFFFF;
  outline-offset: -10px;
	color: #FFFFFF;
}

.has-translation-background-color {
  background: linear-gradient(to right bottom, #E47CFF, #7CFFFC, #CDFF7C);
}

.has-reference-background-color {
  border: double 7px #000000;
}

最後に

ブロックの背景色などを変えると、テーマを引っ越した時に同じブロックIDをもつカスタムパレットを追記しないと、つけた配色が表示されなくなります。

一方、インライン(＝ブロック内の文字の一部)のハイライトや文字色の変更データは、記事レコード内に残る仕様みたいです。