ブログ運営

Word Pressの管理画面をダークモードにする2つの方法【プラグイン】

Word Press 管理画面 ダークモード

夜にWord Pressでブログを書いていると、結構目が疲れますよね

短時間しか見ないものであればいいですが、Word Pressは比較的見る時間が長く、カラーテーマを変更する機能はあるものの、細かい部分はほぼデフォルトカラーのまま・・・

もっとがっつり、ダークモード(ナイトモード)にしたくないですか?

ということで、今回はWord Pressの管理画面をダークモードにする方法として

  1. Chromeの拡張機能『Stylus』
  2. Word Pressのプラグイン『Dark Mode』

の2つを紹介します!

どちらも使いやすい機能なのでお好きな方法で試してみてください!

  • Word Pressで記事を書いていると目が疲れる
  • Word Pressの管理画面をスタイリッシュにしたい
  • 黒い背景に白文字の方が好き

Word Pressの管理画面ダークモードにする2つの方法

Chromeの拡張機能を使った方法と、Word Pressのプラグインを使った方法を紹介します

使用してみて、もし見づらいと感じたらアンインストールしてください

Stylusを使う場合

まずはChromeの拡張機能『Stylus』を使った方法を紹介します

Word Pressに余計なプラグインを入れたくないという人はこちらがおすすめです

StylusをCSSを使って色の変更を行いますが

Website Themes & Skins by Stylish | Userstyles.org

こちらのサイトからスタイルをインストールできるので、CSSの知識がなくてもすぐにデザインの変更ができます

Stylusのインストール

まず、Stylus – Chrome ウェブストアを開いて、Chromeに追加というボタンを押してStylusをインストールします

これでStylusが使えるようになります

Stylusの使い方

基本的な使い方としては、StylusにWord Pressのダークモード用のスタイルをインストールするだけです

Dark WordPress Admin | Userstyles.orgを開いて、Install Styleを押すとCSSをインストールできます

Stylus インストール画面

オレンジ枠の部分が『Style Installed』の表示に変わればインストールが完了です

Stylus インストール完了画面
他のWord Pressのスタイルも見たい場合は、画面上部の検索バーで『wordpress』と検索すると、他の方が作成したスタイルも表示されます

画面の確認

Stylusでダークモード化したWord Pressの管理画面を見ていきます

投稿編集画面
Stylus 投稿編集画面
投稿一覧画面
Stylus 投稿一覧画面

めちゃくちゃダークモードになってますね!!これはテンションがあがります

目に優しいし、デザインもかっこいい

Word Pressのデフォルト機能として採用して欲しいです

一応サクッと他の画面も見ていたのですが1つ問題が・・・

こちらの画面をご覧ください▼

Stylus ダークモード カーラー設定

これはWord Press人気有料テーマ『JIN』のカラー設定の画面です

もうお気づきかと思いますが、カラー結果もダークモード化されていますw

サイトに反映されるわけではないのでそこまで問題ではありませんが、ちょっと気になりますよね・・・

そこで次に紹介するWord Pressプラグイン『Dark Mode』の出番です

他のサイトにも使える!

Dark Modeの紹介に入る前に余談ですが、StylusはChromeの拡張機能なので基本的に他のサイトでも使えます

例えば、みんな大好きAmazonさんもこんな風にスタイリッシュなデザインになります▼

Stylus Amazon検索画面

これは購買意欲が増すかもw

ちなみにこのスタイルはAmazon – Dark slate | Userstyles.orgのものを使っています

PCでAmazonをよく見る人におすすめです!

Dark Modeを使う場合

次にWord Pressの『Dark Mode』というプラグインを使った方法を紹介します

Stylusよりさらに簡単に導入することができます

Dark Modeのインストール

まずはDark Modeをインストールします

Word Pressのプラグイン新規追加を開いて『Dark Mode』と検索します

こんなアイコンのやつ▼

Dark Mode アイコン

プラグインを見つけたら、今すぐインストールを押してインストールします

インストールが終わったら、有効化を押します

Dark Modeの使い方

使うのは10秒で終わりますw

Word Pressのユーザーあなたのプロフィールを開くと、『Dark Mode』という項目が追加されているので、『管理画面のダークモードを有効化』にチェックします

Dark Mode 反映画面

チェックしたら一番下のプロフィールの更新を押して、ダークモード化完了です

画面の確認

Dark Modeでダークモード化したWord Pressの管理画面を見ていきます

投稿編集画面
Dark Mode 投稿編集画面
投稿一覧画面
Dark Mode 投稿一覧画面

Stylusでダークモード化したときよりも配色が増えて見やすい!

個人的にはこちらの方が好みです

ただ、投稿編集画面のテキストを入力するところが白い・・・

ちなみにカラー設定の画面では、カラー結果がダークモード化されず元の色が表示されていました!

Dark Mode ダークモード カラー設定

『テキストを入力するところは白がいい!』という人はDark Modeだけの導入で問題ないと思います

個人的にはDark Modeのデザインのままテキストを入力する部分もダークモード化したかったので、Dark ModeとStylusを組み合わせることにしました

StylusとDark Modeの併用

Stylusにインストールしたスタイルを修正します

Chromeの右上に『S』というStylusのアイコンがあるので、こちらの管理を押して管理画面を開きます

Stylus 簡易管理画面

すると、インストール済みスタイルの管理画面が別タブで開かれます

Stylus 個別管理画面

チェックマークがついているものが現在反映中のスタイルで、チェックを外すとスタイルの反映を解除できます

不要になったスタイルがあれば『×』マークで削除することも可能です

インストールしたDark WordPress Adminを押してCSSコードを修正します

開くと長いCSSコードが出ると思いますが、テキストを入力するところ以外はいらないので一旦全部消します

消し終わったら、以下のCSSコードをコピペしてください

Stylus コード修正画面

他の色に変更したい場合はこのCSSのカラーコード部分から修正することができます

ビジュアルモードメインで説明していますが、テキストモードについても変更できます

テキストモードの入力部分の色を変更したい場合は貼り付けたコードの『textarea』と書かれている方を変更してください

コードを貼り付け終わったら、保存を押しましょう

これでスタイルの反映完了です

反映した画面がこちら▼

Stylus Dark Mode併用 投稿編集画面

テキストを入力する部分もダークモード化できました!

これはかなり見やすいです

これで夜にも存分にライティングに集中することができます

おわりに

今回はWord Pressの管理画面をダークモードにする方法として

  1. Chromeの拡張機能『Stylus』
  2. Word Pressのプラグイン『Dark Mode』

の2つを紹介しましたがいかがだったでしょうか?

ダークモードは目に優しく、スタイリッシュでいいですよね

ちなみにTwitterYoutubeはすでにダークモード化に対応されているので、設定で簡単に変更できます

当サイトでも独自にダークモード化(ナイトモード)を取り入れているので、夜にご利用される方はぜひ使って見てください!

ダークモード ナイトモード 使い方
ダークモードの使い方本サイトで実装しているナイトモードの使い方についての紹介です。...
合わせて読みたい