TT2(Twenty Twenty-Two)テーマで投稿を作りつつ、文字単位で色を付けてみようとしたら...

とてつもなく、とんでもなく質素な選択肢にびっくりしました(笑)。

文字単位の装飾は、以下のように、文字を選択して、縦に「・・・」をクリックして、ハイライトを選択することで可能なのですが...

TT2テーマに独自のカラーを追加する方法|Twenty Twenty-Two (TT2)のカスタマイズ情報
TT2テーマに独自のカラーを追加する方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

なんと出てきたのはたった5色!!

これでは装飾もクソもありません(笑)。

この部分はブロックテーマらしくtheme.jsonで設定してあるので、色を追加してみました。

こちらで配布している子テーマを使用している前提で進めます

まず、親テーマのtheme.jsonファイルに書かれている内容をすべてコピーします(すでにコピーして何等かのカスタマイズをしている場合は必要ありません)

次に、以下の部分を探します(130行目あたりにあります)。

{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
}

これを続きがありますよ!と以下のように、末尾に「,」を追加します(一旦エラー表示されますが無視で大丈夫です)

{
"slug": "tertiary",
"color": "#F6F6F6",
"name": "Tertiary"
},

そして試しにその下へ次の色設定を追加して保存します。

{
"slug": "ha-red",
"color": "#e60033",
"name": "Red"
}

そして、投稿管理画面を開き(開いている場合はリロードして)、もう一度文字装飾をしてみると...。

TT2テーマに独自のカラーを追加する方法|Twenty Twenty-Two (TT2)のカスタマイズ情報

あら不思議(笑)、簡単にカラーの追加ができました。これで気に入った色を追加していけばいろんな色にできるようになります。

theme.jsonってすばらしい!!


コードの内容について簡単に解説すると、以下が色を決定するひと塊になります。

{
"slug": "ha-red",
"color": "#e60033",
"name": "Red"
}
  • slug・・・色を示す一意の名前(半角英数字)です
  • color・・・この色が選択されたときのカラーコードを入力します
  • name・・・この色をマウスオーバーしたときに表示される名前を入力します

これを作って追加していけば、カラーパレットの「テーマ」という欄にどんどん色が追加でき、すぐに指定することができます。

ただ1点、theme.jsonは厳格に区切り文字などを検証しますので、先ほどのように、まだまだ続くよ~という場合には末尾に「,(コンマ)」を、これで終わりだよ~という場合にはコンマを付けないというのがお約束なので、画面左に×マークが出たらその辺をチェックしてくださいね。

ちなみにこのサイトでは以下の色を追加しました。

{
"slug": "ha-red",
"color": "#e60033",
"name": "Red"
},
{
"slug": "ha-blue",
"color": "#0095d9",
"name": "Blue"
},
{
"slug": "ha-green",
"color": "#3eb370",
"name": "Green"
},
{
"slug": "ha-yellow",
"color": "#ffd900",
"name": "Yellow"
},				
{
"slug": "ha-grey",
"color": "#949495",
"name": "Grey"
},	
{
"slug": "ha-bibid-white",
"color": "#ffffff",
"name": "White"
},
{
"slug": "ha-watery-blue",
"color": "#f3fafe",
"name": "Watery Blue"
},
{
"slug": "ha-watery-yellow",
"color": "#fff7cc",
"name": "Watery Yellow"
},
{
"slug": "ha-watery-red",
"color": "#fdf2f2",
"name": "Watery Red"
},
{
"slug": "ha-watery-green",
"color": "#ebf8f4",
"name": "Watery Green"
}