[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 Contentfu...

chiilabo.com

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

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

chiilabo.com

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

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

chiilabo.com

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