WordPress

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

WordPressのビジュアルエディタは文字や背景色を簡単に変えることができますが、カスタムで作ったカラーは新規記事を作る時には消えてしまいますよね。

好きな色を登録しておくためにプラグインを使う方法もありますが、今回はプラグインを使わずに「functions.php」で登録する方法をご紹介します。

ビジュアルエディタのテキスト色や背景色に自分の好きなカラーを登録することができます。

WordPress 5.0から搭載された新エディタ「Gutenberg」をカスタマイズする場合はこちらの記事をどうぞ↓

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

functions.phpで文字色をカスタム登録する

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

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

$custom_colors」で7色登録できるようになっていますので、お好きなカラーコードに書き換えてください。カラーコードはこういうサイトで調べることができます↓

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

「Color 1〜Color 7」の部分はマウスをのせた時に表示される部分なので、色の名前など分かりやすいものにしておきましょう。日本語でも大丈夫です。

$custom_colors」をさらに増やすこともできます。その場合はこんな感じで「$init[‘textcolor_rows’] = 6;」の部分を、必要な行の分に増やします↓

上記のコードは抜粋したものなので、この部分だけをコピペしてしまうとエラーになるので注意してください。

$default_colors」の40色は初期状態で登録されているカラーですが、この部分を書き換えても大丈夫です。または不要であれば削除しても大丈夫です。

例えばこのコードだと↓

こんな感じでカスタムカラーだけを表示することもできます。

デフォルトのカラーは彩度がキツい

記事を書いていて赤文字などはよく使うと思いますが、個人的にデフォルトで登録されている赤(ff0000)はちょっと彩度が高すぎてまぶしく感じてしまいます。

僕がよく使っているのは彩度が低めの赤(e36b6d)ですが、こっちのほうが目に優しい感じがしませんか?

個人的な好みもありますが、文字の色にも少しこだわってみると他のサイトとの差別化になると思います。

皆さんも色々と試してみてくださいね。

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

コメント