みなさんこんにちは!おさかなです!
今回は「WP Dark Mode」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・WordPressサイトを運営している方
・サイトにダークモード機能を実装したい方
・ダークモードにできるプラグインを知りたい方
サイトを「ダークモード」にしてみたい!

ナビまる~!サイトを「ダークモード」に切り替えてみたいんだけど…。

それなら、WP Dark Modeっていうプラグインがおすすめだよ!

さっすがナビまる~!

「WP Dark Mode」って何?
「WP Dark Mode」とは、WordPressで作成したサイトに「ダークモード」を実装できるプラグインのことです。(おお!)
サイトの読者が、ボタンで「ダークモード」と「ライトモード」を切り替えることができるので、幅広い層に記事を読んでもえること間違いなしです!



実際につかってみよう!
プラグインを導入しよう!
それでは早速使っていきましょう!
まずは「ダッシュボード」>「プラグイン」>「新規追加」へ移動します。

すると、このような画面が表示されるので、検索ボックスから「WP Dark Mode」を探します!

プラグインを「追加」して「有効化」しましょう!(えいやあ!)

(あともうちょっと…☕)
ダークモードを設定しよう!
それではプラグインを使って、ダークモードを設定していきましょう!(わーい!)
プラグインが有効化されていると、メニューに「WP Dark Mode」が追加されていると思います。

「WP Dark Mode」>「Settings」へ移動すると、このような画面が表示されます!

「Enable Frontend Darkmode」という項目では、サイトの見ため(ユーザーが見ることのできる部分)のダークモードを設定できます。

「Enable Backend Darkmode」という項目では、管理者側の画面をダークモードに設定することができます。

「Enable OS aware Dark Mode」という項目では、OS対応のダークモードを有効にすることができます。

最後に一番下の「Save Settings」を押すのを忘れずに!(ぽちっと!)

表示をチェックしよう!
それでは表示をチェックしていきましょう!
まずはサイトから!
基本反転していますが、記事のところが認識されていないのが残念💦
(何か対策があったら教えてもらえると助かります。🥺)

記事の中身はいい感じですね!

ちょっと色々要素が被っていますが、右下の「🌙月のマーク」を押すと、ダークモードとライトモードを切り替えることができるようになっています。(ふむふむ…。)

ちなみに管理画面をダークモードにするとこんな感じ!


ぜひダークモードで、いい感じのサイトを目指してみてね♪
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕

ここまで読んでくださり、ありがとうございました!