みなさんこんにちは!おさかなです!
今回は「WP Dark Mode」について、書いていこうと思います!
それでは、レッツゴー!!!!!
・WordPressサイトを運営している方
・サイトにダークモード機能を実装したい方
・ダークモードにできるプラグインを知りたい方
サイトを「ダークモード」にしてみたい!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ナビまる~!サイトを「ダークモード」に切り替えてみたいんだけど…。
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
それなら、WP Dark Modeっていうプラグインがおすすめだよ!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
さっすがナビまる~!
![](https://osakanav.com/wp-content/uploads/2021/03/wp-dark-mode-top-160x90.jpg)
「WP Dark Mode」って何?
「WP Dark Mode」とは、WordPressで作成したサイトに「ダークモード」を実装できるプラグインのことです。(おお!)
サイトの読者が、ボタンで「ダークモード」と「ライトモード」を切り替えることができるので、幅広い層に記事を読んでもえること間違いなしです!
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode.gif)
![](https://ps.w.org/wp-dark-mode/assets/banner-772x250.gif?rev=2872214)
![](https://osakanav.com/wp-content/uploads/2021/04/wp-contact-top-160x90.jpg)
実際につかってみよう!
プラグインを導入しよう!
それでは早速使っていきましょう!
まずは「ダッシュボード」>「プラグイン」>「新規追加」へ移動します。
![](https://osakanav.com/wp-content/uploads/2021/03/wp-install-plugin.png)
すると、このような画面が表示されるので、検索ボックスから「WP Dark Mode」を探します!
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-plugin-kensaku_LI-1024x429.jpg)
プラグインを「追加」して「有効化」しましょう!(えいやあ!)
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-dark-mode_LI-1024x394.jpg)
(あともうちょっと…☕)
ダークモードを設定しよう!
それではプラグインを使って、ダークモードを設定していきましょう!(わーい!)
プラグインが有効化されていると、メニューに「WP Dark Mode」が追加されていると思います。
![](https://osakanav.com/wp-content/uploads/2021/04/wp-dark-mode-menu.png)
「WP Dark Mode」>「Settings」へ移動すると、このような画面が表示されます!
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode-settings-1024x638.png)
「Enable Frontend Darkmode」という項目では、サイトの見ため(ユーザーが見ることのできる部分)のダークモードを設定できます。
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-darkmode-settings_LI-1024x638.jpg)
「Enable Backend Darkmode」という項目では、管理者側の画面をダークモードに設定することができます。
![](https://osakanav.com/wp-content/uploads/2021/04/darkmode-settings2-1024x638.jpg)
「Enable OS aware Dark Mode」という項目では、OS対応のダークモードを有効にすることができます。
![](https://osakanav.com/wp-content/uploads/2021/04/darmode-settings-3-1024x638.jpg)
最後に一番下の「Save Settings」を押すのを忘れずに!(ぽちっと!)
![](https://osakanav.com/wp-content/uploads/2021/04/Inkedwp-dark-mode-save_LI-1024x560.jpg)
表示をチェックしよう!
それでは表示をチェックしていきましょう!
まずはサイトから!
基本反転していますが、記事のところが認識されていないのが残念💦
(何か対策があったら教えてもらえると助かります。🥺)
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode-osakanav.gif)
記事の中身はいい感じですね!
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode-kiji.gif)
ちょっと色々要素が被っていますが、右下の「🌙月のマーク」を押すと、ダークモードとライトモードを切り替えることができるようになっています。(ふむふむ…。)
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode-switch.gif)
ちなみに管理画面をダークモードにするとこんな感じ!
![](https://osakanav.com/wp-content/uploads/2021/04/wp-darkmode-admin.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
ぜひダークモードで、いい感じのサイトを目指してみてね♪
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
![](https://osakanav.com/wp-content/uploads/2021/03/wp-theme-liquid-top-160x90.jpg)
ここまで読んでくださり、ありがとうございました!