WordPress

Gutenbergの文字・背景色にカスタムカラーを登録する方法

WordPress 5.0から搭載された新エディタ「Gutenberg」の文字色、背景色に自分の好きな色をカスタム登録する方法を紹介します。

プラグインを使わずにfunctions.phpを編集して好きな色を追加登録します。

旧エディタ(Classic Editor)はこちらの記事をどうぞ↓

【WordPress】エディタの文字・背景色に好きな色をカスタム登録する方法
...

functions.phpを編集する

functions.phpは少しでもコードが間違っているとサイトが真っ白になります。編集は慎重にやりましょう。

以下のコードをfunctions.phpにコピペするだけで色を追加できます。文字色も背景色も共通のコードなので、両方に反映されます。

「カラー1〜カラー5」が新しく追加した部分です。カラーコードだけ変更すればオッケーですが、好きな名前にしても構いません。

カラーコードを調べるのはこういうサイトが便利です↓

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

色を増やす・減らしたい場合

色を増やしたい場合も自由に追加することができます。コードの以下の部分をどんどん追加していく感じです↓

逆に表示する色を減らしたい場合も、コードを削除するだけ。デフォルトで入っている色を削除しても問題ありません。

例えばこちらのコードだと↓

こんな感じで表示されるカラーを少なくすることもできます。

好きな色を登録しておくと便利なので、皆さんもぜひカスタムしてみてください。

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

タイトルとURLをコピーしました