WordPress

Chromeの拡張機能『Dark Reader』でWordPressの編集画面をダークモードにする方法

※ 当サイトではアフィリエイト広告を利用しています

WordPressの編集画面が眩しいけどダークモードに出来ない?

MacBookやWindowsにはダークモードという設定がありますが、WordPressの編集画面は暗くなりません。

そこで今回はプラグインを使ったりコードを書く必要がなく、Chromeの拡張機能でWordPressの編集画面をダークモードに出来る『Dark Reader』の使い方をご紹介します。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Chromeの拡張機能『Dark Reader』でWordPressの編集画面をダークモードにする方法

まず通常のWordPress編集画面を見てみましょう。

こちらはブロックエディタの場合。

WordPress:ブロックエディタ編集画面

WordPress:ブロックエディタ編集画面

こちらはクラシックエディタの場合。

WordPress:クラシックエディタ編集画面

WordPress:クラシックエディタ編集画面

 

Chromeの拡張機能『Dark Reader』をインストール

Chromeの拡張機能『Dark Reader』をインストールします。

以下のページにアクセスしたら『Chromeに追加』をクリックします。

Dark Reader - Chrome ウェブストア

Chrome拡張機能追加:Dark Reader

Chrome拡張機能追加:Dark Reader

そしてこちらがポップアップされるので『拡張機能を追加』をクリックします。

Dark Reader追加ポップアップ

Dark Reader追加ポップアップ

そしてページ上部のパズルのようなアイコンをクリックし、Dark Readerのピンをクリックすれば追加完了です。

Chrome拡張機能追加

Chrome拡張機能追加

Chrome拡張機能機能ON

Chrome拡張機能機能ON

これで一旦WordPressの編集画面を見てみます。

こちらがブロックエディタの場合。

WordPress:ブロックエディタ編集画面

WordPress:ブロックエディタ編集画面

こちらがクラシックエディタの場合。

WordPress:クラシックエディタ編集画面

WordPress:クラシックエディタ編集画面

これで目的は達成されましたが・・・WordPressの編集画面だけでなく全てのページに適用されます。

例えば当ブログのトップページもこんな感じになります。

じゅんぺいブログ:トップページ(Dark Reader使用)

じゅんぺいブログ:トップページ(Dark Reader使用)

もちろん他のサイトも適用されるので、かなり見にくいページも出てくると思います。

 

ダークモードのオン・オフを切り替える

Dark Readerは拡張機能を有効にしていても、オン・オフの切り替えは簡単に出来ます。

こちらのアイコンをクリックすると設定が表示されるので、ここでオン・オフの切り替えが出ます。

Dark Readerオン・オフ切り替え

Dark Readerオン・オフ切り替え

これで拡張機能が有効なままオン・オフの切り替えが出来ますが、これもまた全てのページが対象なので特定のページだけダークモードには出来ません。

 

現在のページだけダークモードのオン・オフ切り替え

現在のページだけダークモードのオン・オフ切り替えをするには、先ほどの設定画面で左上にあるURLをクリックすればOKです。

まずはこちらが全体のダークモードがオンの状態。

Dark Reader:現在のページの切り替え

Dark Reader:現在のページの切り替え

ここで赤枠内をクリックするとチェックが✗になり、現在のページだけダークモードが解除されます。

Dark Reader:現在のページの切り替え

Dark Reader:現在のページの切り替え

この設定はページを閉じても維持されます(複数ページ設定保存可)

フィルタタブの隣の『サイトリスト』に設定は保存されていてここで設定の追加や削除も出来ますが、左上でクリックするのが直感的で分かりやすいかと思います。

また、

ダークモードだと暗すぎる・・・

という場合には『ダーク』ではなく『ライト』にするなど、フィルタで様々な変更が可能です。

Dark Reader:フィルタ

Dark Reader:フィルタ

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-WordPress
-