「Blogger」ブログをダークモードで表示したい
 |
さて、「ダークモード」ってなに？って思ってる方は少ないと思うんですが、最近ではOSやSNSでも取り入れられているものですが、簡単に言うと、背景を暗くし、文字を明るくするスタイルシートです。
夜中に真っ白な背景は目にも辛いと感じる方も多いのではないでしょうか。そんな時、ダークモードがあると、目に優しいと思いませんか？
今回、ブログに実装した「ダークモード」は、OSの設定で「ダークモード」と「ライトモード」に勝手に変わるものにしてみました。
OSでダークモードとライトモードを切り替える
OSでダークモードにする方法ですが、Windowsの場合「設定」から「個人用設定」をクリックします。
|
「個人用設定」に移動したら、「色」を選択し、「既定のアプリモードを選択します」の個所にある「ダーク」と「ライト」のどちらかにチェックを入れます。初期設定では「ライト」にチェックが入っています。
「ダーク」にチェックを入れると、すぐにウィンドウ全体が、暗くなるのがわかります。
この設定は切替は、ブログにダークモードを実装する際に、確認で必要になるので、覚えておきましょう。
|
「ダーク」にチェックを入れると、すぐにウィンドウ全体が、暗くなるのがわかります。
|
この設定は切替は、ブログにダークモードを実装する際に、確認で必要になるので、覚えておきましょう。
ダークモードのスタイルシートを記述する
ダークモードのスタイルシートをテンプレートに記述するのですが、元々設定されているスタイルシートを修正する必要があるので、最初にバックアップを取っておいてください。
次に以下のスタイルシートをテンプレートの「<b:skin></b:skin>」内に貼り付けます。
@media (prefers-color-scheme: dark) {
＊ここにCSSを記述する＊
}
ある程度、スタイルシートの記述方法を知っておく必要がありますので、記述する位置に注意しましょう。
「＊ここにCSSを記述する＊」には、ダークモード時に表示させる背景色、文字色を指定するCSSを記述します。
自分のブログでは、以下のように記述しました。
@media (prefers-color-scheme: dark) {
body {
color:#ffffff;
background:#061324;
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
}
a:focus {
text-decoration: none;
}
a:active,
a:hover {
color: #00ccff;
outline: 0;
}
a:hover {
text-decoration: none;
}
}
参考になればと思いますが、ブログのテンプレートにもよるので、あくまで参考程度にしてください。上のものをそのまま使ってしまうと、悪い影響が出るかもしれません。
また、ダークモードのスタイルシートだけでは不十分です。
ダークモードのスタイルシートが必要であれば、ライトモードのスタイルシートも必要です。
ライトモードのスタイルシートを記述をする
ダークモードのスタイルシートを参考に、以下のように記述します。
見るとわかるかと思いますが、背景色と文字色が入れ替わっています。
@media (prefers-color-scheme: light) {
body {
background: #ffffff;
color: #061324;
}
a {
color: #061324;
text-decoration: none;
}
a:visited {
color: #061324;
}
a:focus {
outline: thin dotted;
}
a:active,
a:hover {
color: #00ccff;
outline: 0;
}
a:hover {
text-decoration: none;
}
}
ダークモードの記述と合わせて設定しておく必要があります。
少々長い記述になってしまっていますが、必要な物を入れています。
（実はブログのタイトル画像が、この時点でダークモードに合わせていません。）
ただ、ブラウザのバージョンによっては、正しく表示されない場合もあります。
今回、Chromeブラウザでは、OSをダークモードに切り替えれば、ダークモードに切り替わるのを確認しましたが、他のOSでは未確認です。
他のブラウザで見たらひどかった
たまたまiPadでブログを見てみたら、ダークモードすら動作せず（そもそも古いiOSではダークモードに対応していません。）、スタイルシートも正しく表示されておらず、「なんじゃこりゃああ！！」ってなりました。
現在は問題ないはずなんですが、上で紹介したものでは上手く行かないようでした。
結論を先に言うと、さらにスタイルシートを直しました。よかったら、こちらの記事でも直したスタイルシートを公開していますので、ご覧ください。
直したスタイルシートはこちらです。
:root {
--text: #333;
--bg: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--text: #fff;
--bg: #061324;
}
.header-image-wrapper img{
filter: brightness(100);
}
a {
color: #ffffff;
text-decoration: none;
}
a:visited {
color: #ffffff;
}
a:focus {
text-decoration: none;
}
a:active,
a:hover {
color: #00ccff;
outline: 0;
}
a:hover {
text-decoration: none;
}
}
どうやら、ライトモードは必要なかったようです。自分のブログの場合、デフォルトがライトなモードなので、このスタイルシートで良かったわけです。
ご興味がありましたら、以下のURLを参考にダークモードを取り入れてみてはいかがでしょうか。
- 【外部URL】https://developer.mozilla.org/ja/docs/Web/CSS/@media/prefers-color-scheme
