ブログがダークモードに対応!
![ダークモード対応!](https://kazuki-mizuc.com/wp-content/uploads/2023/10/blog-darkmode_eye.jpg)
いつかこのブログをダークモードに対応させようと思い、やっとダークモード対応させました。
![Mizuc ismの記事(ライトモード)](https://kazuki-mizuc.com/wp-content/uploads/2023/10/blog-darkmode-sp_3.jpeg)
![Mizuc ismの記事(ダークモード)](https://kazuki-mizuc.com/wp-content/uploads/2023/10/blog-darkmode-sp_4.jpeg)
デバイスがダークモード設定の場合、当ブログを表示すると最初からダークモードで表示されます。
PC・スマホ画面の右下に、モード切替ボタンを設置しています。押すたびにモードが切り替わります。
![Mizuc ismのモード変更ボタン(ライトモード)](https://kazuki-mizuc.com/wp-content/uploads/2023/10/blog-darkmode-btn_1.gif)
![Mizuc ismのモード変更ボタン(ダークモード)](https://kazuki-mizuc.com/wp-content/uploads/2023/10/blog-darkmode-btn_2.gif)
WordPressで運用している当ブログ。ダークモードにするWordPressプラグインをつかえば、そこまで手間ではない。
使用しているWordPressテーマは「SWELL」ですが、ダークモード機能はありません。今後も対応しない方向な雰囲気。
プラグイン使わなくても対応できるが、それなりにカスタマイズが必要。ついに、重い腰を上げて対応作業しました。
ブログの全ページを確認したわけではないので、ダークモードになっていない箇所もありるかも。(リライトやリンクの確認もしないとなと思っている)
目次
ダークモード対応カスタマイズの参考記事
ダークモードに対応させるために、ネット先人の知恵をいくつか参考にさせてもらった。ありがとうございます!
Webクリエイターボックス
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://www.webcreatorbox.com/wp-content/uploads/2019/09/thumb_darkmode.jpg)
Webサイトをダークモードに対応させよう
ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めるこ...
WordPressプラグインを使わないカスタマイズは、子テーマでコードを書いています。
先人たちの情報に感謝です!
まとめ
ブログをダークモードに対応させて、自分でもブログを見るのに目が楽になりました。
ダークモードに対応していないウェブサイトをブラウザの拡張機能で、無理矢理ダークモードにしていました。
拡張機能だと、サイトによっては見づらいダークモードだったりもして、サイトがダークモードに対応したほうがいいなと思えました。
ちなみに私が使っているウェブサイトをダークモードにするブラウザ拡張機能は「Dark Reader」です。
Chromeなら無料で使用できます。Apple Safariは有料。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
Dark Reader - Chrome Web Store
Dark mode for every website. Take care of your eyes, use dark theme for night and daily browsing.
App Store
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://is1-ssl.mzstatic.com/image/thumb/Purple126/v4/60/46/e2/6046e2e4-327e-d669-7efa-be3105971ea6/AppIcon-0-0-85-220-0-0-4-0-2x.png/1200x630wa.png)
Dark Reader for Safari
This eye-care extension enables night mode creating dark themes for websites on the fly. Dark Reader inverts bright colors making them high contrast and easy t...
Mac、iPhoneユーザー参考
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://kazuki-mizuc.com/wp-content/uploads/2022/03/dark-reader-for-safari_eye.jpg)
すべてのWebサイトをダークモードにするMacのSafari拡張機能「Dark Reader for Safari」
この記事を読んで、あなたもダークサイドへ。 少し前からmacOSの外観やアプリがダークモードに対応するようになりました。 ダークモードで、目の負担が減ったことを実感...