Gutenbergの色設定を自分好みにカスタマイズする方法！カラーパレットを独自設定に変更しよう！

WordPressのGutenbergは使ってますか？ブロックエディタも慣れてくるとなかなか便利で、HTMLやCSSの知識がない方こそ使うと便利に感じるのではないでしょうか。

初期設定で使っても良いのですが、カスタマイズすることでより一層使い勝手が良くなりますので、今日は「色設定」をカスタマイズする方法をご紹介します。

Gutenbergのブロックエディタの色設定をカスタマイズする方法

Gutenbergのブロックエディタにて、例えば段落を選んだ時に右側に「色設定」という項目が出てきます。

ここで、テキストカラーや背景色を変更することができます。

この初期設定を自分好みに変更するためのコードを紹介していきますね。

functions.phpに追記するコード

まずは下記のコードをfunctions.phpに追記し、コピペして追加したい色を増やしたり変更したりしてください。

function my_color_set()	{
  add_theme_support('editor-color-palette', array(
    array(
      'name' => __('red','赤') ,
      'slug' => 'red',
      'color' => '#f00',
    ) ,
    array(
      'name' => __('blue','青') ,
      'slug' => 'blue',
      'color' => '#00f',
    )
  ));
}
add_action('after_setup_theme', 'my_color_set');

nameは、マウスオーバーした時に表示される色の名前です。

slugは、CSSで色を変更するために付与するクラス名になる部分なので、色が分かるようなスラッグをつけておきましょう。

colorは、色設定のカラーパレット用の色です。CSSで同じ色を設定するようにしてください。

style.cssに追記するコード

デザインを反映させるために、style.cssには下記のようなコードを追記しましょう。

.has-red-color{color:#f00 !important;}
.has-red-background-color{background-color:#f00 !important;}

.has-blue-color{color:#00f !important;}
.has-blue-background-color{background-color:#00f !important;}

ご覧の通り「has-〇〇-color」「has-〇〇-background-color」という具合に、〇〇のところにfunctions.phpでslugに設定したものを入れてください。

importantは必要ないかなと思ったんですが、何かしら元々の色が設定されているブロックもあるのかなと思い、一応入れておきました。不要だと感じましたら消してお使いください。

最後に

Gutenbergについて調べているとなかなか奥が深くて、調べるほどに新しい発見があるので、またブログで紹介していきたいと思います。

ちなみに、Gutenbergは仕事では触ってますが、少なくともこの記事執筆現在の当ブログでは全く使っておりません。テキストだけをゴリゴリと書いていくほうが僕のスタイルには向いてるようです。