【超簡単】WordPress管理画面をダークモードで記事を編集

- WordPress -
2021.07.10
WordPress/ワードプレス
  • WordPress管理画面を暗くして記事を書きたい
  • プラグインなしで簡単にできる方法を知りたい

そんなダークモード大好きな人へ向けてメモ。

↓このようなデフォルト状態で明るくまぶしい編集画面を、(エディタ欄が黒いのは、僕の使っているWordPressテーマのCSSの影響)

WordPress管理画面をダークテーマに

↓WordPressのプラグインなしでこのように真っ黒にします。目に優しい。

WordPress管理画面をダークテーマに

結論から言うと、Dark ReaderというGoogle Chromeの拡張機能を使うだけで簡単にできます。

ちまたには管理画面をダークモードにするためだけのWordPressプラグインだったり、CSSをインポートして設定するような"Stylus"というGoogle Chromeの拡張機能もあるようです。

が、Dark ReaderはWordPressの設定は必要なくChrome拡張機能をインストールするだけ(HTML, CSSの概念すら知る必要なし)というお手軽さなので気に入りました。

ほんのわずかだけ、編集画面のページ表示が遅くなる体感があります(ストレスには感じない程度ですが)

WordPress管理画面をダークモードにする【プラグインなし】

以下3つのステップで操作していけばカンペキです。

  1. Chrome拡張機能 Dark Reader のインストール
  2. オン・オフで表示モードを切り替える
  3. WordPressの管理画面だけをダークモード表示にする

ひとつずつ順番に。

1. Chrome拡張機能 Dark Reader のインストール

以下Chrome公式のウェブストアよりインストールします。

Dark Reader

WordPress管理画面をダークテーマに

インストールが完了した時点で、Google検索結果画面など、全てのサイトが黒が基調の画面になります。

WordPress管理画面をダークテーマに

Dark Readerは、デフォルト状態で全てのページがこのように黒くなります。

ご自分のWordPress管理画面へ行ってみて、冒頭で載せた画像のように管理画面全体も黒くなっていればとりあえず目的は達成です。

全てのページがダークモードで表示されてハッピーな人はもうこのままで良いかもしれませんが、色合い的に明らかに見辛いサイトが出てくると思います。

その場合の設定方法は以下です。

2. オン・オフで表示モードを切り替える

Dark Readerの拡張機能アイコンをクリックするとコントロールパネルが表示されるので、そこの「オン|オフ」で表示を切り替えることができます。

WordPress管理画面をダークテーマに

オフにすると、オンにするまではインストール前と同様に全てのページが普通に表示されます。

WordPressの管理画面だけをダークモード表示にする

コントロールパネルの「サイトリスト > ホワイトリスト」に、{自分のドメイン名}/wp-admin/を指定して保存することで、自分のWordPress管理画面のみダークモード表示になります。

WordPress管理画面をダークテーマに

保存は、文字列を入力したあと「エンターキー」をパチンと叩くことでできます。

管理画面だけが黒くなることを確認しましょう。

僕は記事を書く時だけ真っ黒にしたいのでこの状態で使っています。

↑TOP