Gutenbergの文字色をカスタムカラーに変更する方法

2018年末に実装されたWordPress5.0「Gutenberg」以降、文字色・背景色を変更する時は既存のカラーパレットから選択、あるいは虹色のアイコンのカラーピッカーで調節する仕様になりました。

一つ一つのアイコンは旧エディターより大きくなって誤操作しにくくなったのですが、バリエーションも少ないですし正直地味な色ばかりですよね。

なので今回は自分の好みの色をカスタムカラーとして登録する方法を紹介します。

自由度が上がってより手っ取り早く文字色を変更できるようになるので、困っている人は参考にしてみてください。




デフォルトのカラーって地味なのばかり…

冒頭でも言いましたが、Gutenbergのデフォルトのパレットって地味な色ばかりって思いませんか?

例えば既存の「レッド」はこんな色ですが、なんだか暗いし綺麗じゃない…。

個人的には鮮やかで目につきやすい「こんな赤色」が理想的です。

少なくとも文字や文章を強調する時は目立つ色に変更しなければ意味がありません。

本当になんでこんな地味な色たちがデフォルトになっているのか不思議でしょうがないです(笑)

一応カラーピッカーを使えば好きな色に調節することはできますが、正直面倒ですよね。

滅多に使わないような色ならともかく、赤や黄色のような高い頻度で使用する色は1クリックでサッと変更したいところです。

functions.phpを編集

ここからはカスタムカラーをパレットに登録する方法を具体的に解説していきますが、functions.phpを編集することで結構簡単に設定することができます。

こういったカスタマイズに慣れている人ならすぐ編集できると思いますが、functions.phpはコードを誤って入力するとサイトが機能しなくなってしまうので、あまり慣れていないという人は慎重に行いましょう。

また子テーマで編集することを忘れず、間違って親テーマをいじらないように気をつけてください。

そして肝心のコードですが、以下のものをfunctions.phpに追加してください。

ただこれはデフォルトカラーのコードになっているので、そこからそれぞれをカスタマイズすることで自分好みの色を登録することができます。

add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'ピンク', 'genesis-sample' ),
		'slug'  => 'pink',
		'color'	=> '#f78da7',
	),
	array(
		'name'  => __( 'レッド', 'genesis-sample' ),
		'slug'  => 'red',
		'color' => '#cf2e2e',
	),
	array(
		'name'  => __( 'オレンジ', 'genesis-sample' ),
		'slug'  => 'orange',
		'color' => '#ff6900',
       ),
	array(
		'name'  => __( '琥珀', 'genesis-sample' ),
		'slug'  => 'amber',
		'color' => '#fcb900',
       ),
	array(
		'name'  => __( '薄いグリーンシアン', 'genesis-sample' ),
		'slug'  => 'light-green-cyan',
		'color' => '#7bdcb5',
       ),
	array(
		'name'  => __( '鮮やかなグリーンシアン', 'genesis-sample' ),
		'slug'  => 'vivid-green-cyan',
		'color' => '#00d084',
       ),
	array(
		'name'  => __( '淡いシアンブルー', 'genesis-sample' ),
		'slug'  => 'pale-cyan-blue',
		'color' => '#8ed1fc',
       ),
	array(
		'name'  => __( '鮮やかなシアンブルー', 'genesis-sample' ),
		'slug'  => 'vivid-cyan-blue',
		'color' => '#0693e3',
       ),
	array(
		'name'  => __( 'ライト・グレー', 'genesis-sample' ),
		'slug'  => 'light-gray',
		'color' => '#eeeeee',
       ),
	array(
		'name'  => __( 'シアンブルーグレー', 'genesis-sample' ),
		'slug'  => 'cyan-blue-gray',
		'color' => '#abb8c3',
       ),
	array(
		'name'  => __( '濃灰', 'genesis-sample' ),
		'slug'  => 'dark-gray',
		'color' => '#313131',
       ),
) );

具体的に上のコードのどの部分を変えていけばいいのかというと、まずは各カラーコードです。

「color」の後ろにある「#~~~~~~」の部分ですね。

それぞれのカラーコードを変更することで好みの色を登録することができます。

カラーコードはどこからでも引っ張ってこれますが、手っ取り早く好みの色に調節するには実際にWordPressの編集画面のカラーピッカーで調節し、その時表示されていたカラーコードをコピペすればいいと思います。

あと細かいところまでこだわりたい人は「name」・「slug」の部分もカスタマイズすることでより正確に表示することができます。

直接色に影響はありませんが、ちゃんと変更した方が気持ちもすっきりしますよね。

ちなみに各色のコードを増減すればパレットの数も調節できます。

「もっとたくさん登録したい」、「こんなにいらない」という人はここもいじってみてください。

また今回のカスタマイズにカスタムカラーは関係ないので勝手についてきます。

※追記
5月7日にリリースされたWordPress 5.2よりカスタムカラーの表示形式が変更されましたが、本カスタマイズにおいては変わらず影響はありません。




理想のパレットができました

無事カスタマイズできたでしょうか?

今一度デフォルトのパレットを見せておくとこんな感じです。

やっぱり地味ですね。

そして僕のパレットはこんな感じ。

滅多に使わない色もいくつか入れていますが、やっぱり明るい色の方が使いやすいです。

ちなみに黄色は背景色として使うことが多いので淡い色に設定しています。

実際に文字色を変更してみます。

レッド
オレンジ
イエロー
グリーン
ブルー
インディゴ
パープル
ピンク

ああ綺麗…。やっぱり鮮やかな色の方が目を引きますね。

一応コードも載せておくので、僕ので構わないという人はぜひ使ってください。

add_theme_support( 'editor-color-palette', array(
	array(
		'name'  => __( 'ホワイト', 'genesis-sample' ),
		'slug'  => 'white',
		'color'	=> '#ffffff',
	),
	array(
		'name'  => __( 'グレー', 'genesis-sample' ),
		'slug'  => 'gray',
		'color' => '#666666',
 	),
	array(
		'name'  => __( 'ブラック', 'genesis-sample' ),
		'slug'  => 'black',
		'color' => '#000000',
	),
	array(
		'name'  => __( 'レッド', 'genesis-sample' ),
		'slug'  => 'red',
		'color' => '#ff0000',
	),
	array(
		'name'  => __( 'オレンジ', 'genesis-sample' ),
		'slug'  => 'orange',
		'color' => '#ff6900',
	),
	array(
		'name'  => __( 'イエロー', 'genesis-sample' ),
		'slug'  => 'yellow',
		'color' => '#f7f694',
       ),
	array(
		'name'  => __( 'グリーン', 'genesis-sample' ),
		'slug'  => 'green',
		'color' => '#00ff40',
       ),
	array(
		'name'  => __( 'ブルー', 'genesis-sample' ),
		'slug'  => 'blue',
		'color' => '#0693e3',
       ),
	array(
		'name'  => __( 'インディゴ', 'genesis-sample' ),
		'slug'  => 'indigo',
		'color' => '#001076',
       ),
	array(
		'name'  => __( 'パープル', 'genesis-sample' ),
		'slug'  => 'purple',
		'color' => '#e300ff',
       ),
	array(
		'name'  => __( 'ピンク', 'genesis-sample' ),
		'slug'  => 'pink',
		'color' => '#fa00bb',
       ),
) );

ブロック内の一部の文字色だけ変更する方法

ちなみにGutenbergの通常ブロックで文字色・背景色を変更しようとするとブロック内全ての文字が変更されてしまいますよね。

同じブロックでもその中の一部の文字だけ変更したいという人も多いと思いますが、その方法は下の記事で紹介しています。

興味があればご覧ください。

Gutenbergで一部の文字色を変更する方法