【 FC2ブログ 】ダークモードはシロクロでなくても良い話

弊ブログで今日現在利用中のFC2ブログテンプレート「Halo OSダークモード対応版」ですから、閲覧者さんがパソコンやスマホの設定でダークモード設定をしてありますと、本来はダーク基調(簡単に言えば白黒モード)の画面で表示されるんです。

しかし、筆者は自身の目の調子(60代前半で両眼白内障手術済み)で、黒色系背景色で白色系テキスト(ダークモード対応のテンプレートの一般的設定)で表示される画面は、そのコントラストからギラギラ感が強く、目に優しい筈のダークモードが、かえって目が疲れてしまうと言う、ちょっと偏屈な目なんです(笑)

従って、せっかくのダークモード対応テンプレートをカスタマイズして、ダークモード非対応設定でかつ「ダーク系背景色」にして、そんな画面でいままで閲覧者さんに観て戴いておりました。

しかし「せっかくのダークモード対応版なんだから、その機能も活かしてみよう」と、古希を過ぎようとしていて、段々と脳みその働きも衰え始めるのを予防する意味でも、ちょっと奮起して、今までのダーク系背景色デザインも丸ごと活かしつつ、ライトモード用の白色系画面も閲覧して戴けるように、再カスタマイズを実施してみました。

本日より、遅ればせながら、弊ブログも「ダークモード対応版」として表示させて戴きます。


ダークモード対応版画面

「ダークモード未設定」での閲覧画面。

「ダークモード設定」での閲覧画面。

こちらの画面は昨日までとほぼ同じ画面表示です。 上図2枚のスクショは縮小加工してありますから、見映え的に難がありますが「こんな感じ~」と表現したものです。

ダークモードなのに黒色系背景色ではない

そうなんです、筆者の目の調子に合わせて、黒色系背景色に白色系テキストのコンビネーションだと、そのコントラストから目にギラギラ感が強く感じられ、逆に目に優しくないものですから、昨日までの弊ブログ画面とほぼ同じ「ダーク調背景色」をそのまま活かしてあります。

これが、弊記事の一番のネタでもあります(笑)

つまりは、ダークモードとは「黒色系背景色がセオリーではない」と言うことなんでして、要は「閲覧者さんの目に優しい配色」で閲覧して戴ければ、どんな色でも良いと言うことなんです。

ただし、サイト検証ツールの一つであるLighthouse検証で「背景色と前景色には十分なコントラスト比がありません」のように警告されることのないよう、ライトモード時でもダークモード時でも配慮も必要です。

メディアクエリで配色を楽しく切り替える

先ずは、下図2枚のスクショを見比べてください。

上図スクショは過日の記事の一部分ですが、その中の「OSダークモード対応」と「Lighthouse」の、マーカー色とテキスト色の違いに注目してください。

要は、ライトモード時の白色背景時のそられの色が、通常の「ダークモード」設定だと、ダークモード画面ではとても見にくい色合いになってしまって、Lighthouse検証では「背景色と前景色には十分なコントラスト比がありません」のように警告されることになってしまうんです。

筆者の場合には、それを避けて、なおかつ目に優しい色合いで表示出来るように、ダークモード表示用に「メディアクエリ」と言う方法で、色合いのデザインを作成してあって、その色で表示するようにしてある訳です。 それを下図スクショで表してみます。

要は、ダークモード時には、メディアクエリ @media (prefers-color-scheme: dark)で、デザインの切り替えを行っている訳です。

Web上のテキストに蛍光ペン風のマーカーを引くのに、よくHTMLタグで<mark> </mark>のように文字列を囲うとそれが表現出来るように、テンプレート作者さんが予めCSSで設定してある場合もありますから、一度ご自身の記事で「下書きプレビュー」をして確認してみると良いですね。

ああ、それでもダークモード時で筆者のようにメディアクエリで別途デザインを行ってあるテンプレート作者さんは居ないでしょう。 だって、面倒過ぎるんですから(爆) ですからそう言うことは自分で楽しみながらやりましょ(笑)

メディアクエリは多用は避けるべし

ブログテンプレートのカスタマイズ好きなブロガーさんにとっては「おっ 好いねぇ、このメディアクエリでダークモードデザインを造るのは楽しそう」と、早速取り入れようとするのは一考すべしですからね。

要は、ライトモード時の既存のCSSに対して、ダークモード時のCSSを別途用意することになる訳ですから、極端に言うと1つの表示要素にCSSリソースが2倍必要になる訳でして、そのテクニックを多用し過ぎるとCSSのリソースが増えすぎて、結果として「ブログ全体の表示が遅くなってしまう」ことに繋がりますから、それらも加味して利用すると良いでしょう。

まぁ、上手に利用すれば「ダークモード画面だってカラフルにデザイン出来る」ってことなんです(笑)

まとめ

やっぱり筆者の目には「白黒のギラギラ感」はしんどいです(笑)

ダークモード対応のテンプレートをご利用の皆さん、黒色基調の背景色をもっと目に優しい色にして戴けませんかね~(笑)

ああ、そうです、FC2ブログテンプレート作者さんには、これからのダークモード対応テンプレートをデザインなさる時には、今の一般的黒色基調の背景色から、もっと目に優しくなる背景色デザインをお願いしたいものです (•‾⌣‾•)にこ♪

遅ればせながらも、本日より弊ブログも「ダークモード対応版」となりましたが、まだまだあちこちに「テンプレートの設定不足」があるかもしれませんので、ボチボチとそんな部分も修正を進めたく思います。

もし「ここが変だよ」なんて箇所がありましたら、是非にコメント欄でお教えくださいまし (•‾⌣‾•)にこ♪

おやおや、なんとなんと、筆者所在地の静岡県も今日梅雨明けしてしまったとか。 いやぁ、今からこんな猛暑じゃ、これから先の電気代が困ったことになる、年金生活者にはたまらんぞなもし(爆)




白黒のスマホを両手に持つ男

あなたの
ブログのダークモードって
まだ白黒なの?

関連する記事
[ コメント投稿に関するご案内 ]

弊ブログでは、コメント主さんがご自身のサイトURLを記入してくださると、コメント一覧にご自身のアイコンが表示されるようになっております。

コメント投稿時には、入力必須項目お名前・ご自身のサイトURL・コメント本文」の三項目を入力すると、送信ボタンが表示されます。

コメントは管理人承認後に表示されます。

更新順
Topics