[WordPress] エディタ画面をダークテーマにしたい（Dark Reader拡張機能）

WordPressの編集画面を目に優しいダークテーマに変更したくなりました。
個人的には、黒背景の方が落ち着くからです。

最初はプラグインを使ってカスタマイズしようと考えましたが、望む色調にうまく調整できませんでした。

そこで、発想を転換してブラウザの拡張機能を利用することにしました。
自分が使用する画面のみをダークテーマに変更できればよいからです。

もちろん、サイトを訪れる人全員にダークテーマを提供したい場合は、プラグインが適しています。
ただし、理想のデザインや色にカスタマイズするには、ある程度の費用が必要になるかもしれません。

1. 長時間作業するなら「ダークテーマ」

ダークテーマにすると、目がラクになるし、文字も読みやすくなります。

スマホやパソコンを長時間使うことが多いですよね。
そんなとき、ダークテーマを使うと、目の疲れをかなり減らせます。
画面が暗いと、目に入る光の量が減るからです。

1-1. プラグインと拡張機能

今回は、毎日使う WordPressエディタの画面を黒基調に変更しようと思います。

WordPressプラグインとブラウザ拡張機能は、どちらもウェブサイトの使い勝手を良くするためのツールです。

要するに、WordPressプラグインはWordPressのサイトにしか使えないけど、サイトをパワーアップできるツールです。
ブラウザ拡張機能は、どのウェブサイトでもブラウザを通して使える便利なツールってわけです。

2. 拡張機能「Dark Reader」

「Dark Reader」は、どんなウェブサイトでも目に優しいダークテーマに変更できるブラウザ拡張機能です。
使い方はとっても簡単で、いくつかのステップで設定できますよ。

2-1. 「Dark Reader」のインストール方法

1. ブラウザの「拡張機能ストア」で「Dark Reader」を検索します（Google ChromeやFirefoxなど）。
2. 「Dark Reader」を見つけたら、「追加」や「インストール」のボタンをクリックします。

これでブラウザに拡張機能が追加されます。

2-2. WordPressで「Dark Reader」を有効にする手順

「Dark Reader」はブラウザの拡張機能なので、特にWordPress専用の設定は必要ありません。
ブラウザでWordPressのサイトを開くと自動的にダークテーマが適用されます。

ただ、エディタ画面でだけダークテーマにしたかったので、「サイトリスト」の「反転リスト（そのサイトだけ適用）」に、

• 「https://chiilabo.com/wp-admin/post.php」
• 「https://chiilabo.com/wp-admin/new-post.php」

を追加しました。

「Dark Reader」は色々カスタマイズできて、自分の目にとって最も快適な設定を見つけられます。

• 明るさとコントラスト
• カラースキーム

個人的には、「フィルタ+」が暗くてよかったです。

3. 「WP Dark Mode」プラグイン

いっぽう、「WP Dark Mode」プラグインは、WordPressサイトをダークテーマに変更するツールです。

ダークテーマは人気が高くなってきているので、多くの訪問者にとって便利になるかもしれません。
ただ、プレミアム機能を利用する場合のコストや、サイトパフォーマンスへの影響も考慮に入れる必要があります。

3-1. プラグインを使って理想のダークテーマを設計する

「WP Dark Mode」をインストールしたら、WordPressの管理画面から簡単にダークモードの設定を行えます。

プラグインの設定ページでは、ダークモードの自動適用、ユーザーがモードを切り替えられるようにするスイッチの配置、さらにはダークテーマの色合いやフォントスタイルまで、細かくカスタマイズが可能です。
これにより、サイトのブランドやデザインに合わせたダークテーマを実現できます。

ただし、エディタ画面のダークテーマの種類には限りがありました。
基本は青基調のテーマで、それ以外は「PRO（有料版）」限定なのです。

今回の要は、エディタ画面だったので、残念。

サイト全体のダークモードがほしくなったら、有効化しようと思います。

こちらもどうぞ。

サイト高速化のため FontAwesome 5 を 4 に戻した [WordPress, Cocoon]

サイト表示の負荷を減らすために、FontAwesome 5 から 4 に変更しました。CSSで一部で FontAwesome 5のアイコンフォントを利用していたので、FontAwesome 4 に変えました。Largest Contentful Paint を速めるのに、ちょっと効果がありました。項目FontAwesome 5FontAwesome 4パフォーマンス9294First Contentful Paint1.9 秒1.8 秒Largest Contentful P...

chiilabo.com

「ブラウザ拡張機能」とは？

「ブラウザ拡張機能」は、インターネット画面に便利な情報や機能を追加する仕組みです。ページ読み込み時に動作するスクリプト（JavaScript）で、ページ内容を自由に改変することができます。ブラウザ拡張機能には、ブラウザにボタンを追加するものウェブサイトに情報を追加するものがあります。ブラウザ拡張機能は作れるGoogle Chrome の「ブラウザ拡張機能」は、プログラミング言語 JavaScript で作られます。見ているウェブページの HTML や CSS をスクリプトで書...

chiilabo.com

[Cocoon] サイトのキーカラーを変更した

濃いめのキーカラーの候補を出して、それに合う補助の色を組合せてみました。サイトの配色を試行錯誤元の配色です。臙脂色を基調した配色。焦げ茶色をメインにした配色。それをさらに濃くした配色です。「ユーザー補助」「ユーザー補助」の面で、十分なカラーコントラストになるように調整しました。パッと見でも、文字が読みやすくなったと思います。CSSでのカスタムカラー追加CSSの中でサイトのキーカラーは 直接 値を指定するより、var(--wp--preset--color--key-color...

chiilabo.com

QRコードを読み込むと、関連記事を確認できます。