Stylishで背景色を暗くする

〔約3500文字|読了の目安:7分〕

*2018/2/5 追記

 GoogleにしろYahoo!にしろウェブページの背景色は白が一般的だが、白だとまぶしくて困る人たちがいる。
 「ウェブ 背景 白 まぶしい」の検索結果
 しかしこれらの声は少数派なのか、一向に顧みられる様子がない。

 市場原理で考慮されないなら、自分で工夫するしかない。
 Stylishというアドオン (Firefox, Chrome, Opera) で、ページのCSS(HTMLの見栄え)をカスタマイズできる。
 素人がCSSを書くのは難しいが、公式サイトに他の人が書いたCSSが多数登録されている。有名なサイトは大抵、専用のCSSが用意されており、中には背景色が暗いスタイルもある。
 サイトを表示しているときにStylishのアイコンをクリックして「このサイト用のスタイルをもっと探す」を選べば、自動的に専用のスタイルが表示される。

専用スタイル

 有名どころのサイトの暗いスタイルは、この辺がよさそうだった(他にもたくさんあるので、全部試したわけではない)。

 適用した様子はこんな感じ。

 TwitterYoutubeは、正式に暗い背景が用意されている。
 Twitter……[右上の自分のアイコン>夜間モード]
 Youtube……[右上の自分のアイコン>ダークテーマ]

 flickrYouTubeなんかは、画像/映像に集中するためにも背景色は暗い方がいいと思う。

汎用スタイル

■汎用スタイル1

 暗いスタイルが用意されていなかったり、頻繁には訪れないので専用のCSSを用意するほどではないサイトを利用するときは、汎用のスタイルを使う。

 ここに集められている。
 Global themes and skins

 その中で自分はこれを使っている。
 Midnight Surfing - Global Dark Style
 ただコントラストが高すぎて目が疲れるので、背景色を少し明るくした。

 汎用のスタイルは常に適用されるが、専用のスタイルはそのサイトを表示すると自動的に適用される。その際、汎用のスタイルは除外しないと、スタイルが二重に適用されてしまう。
 サイトを表示するたびに手作業で除外するのは面倒。自動的に除外する方法は下記のサイトに書いてあった。

 [Google Chrome]ブラウザを見る時間が多くて目を酷使するなら Stylish で優しい色にしてしまえ!

 Firefoxの場合、汎用のスタイルの "@-moz-document" の後に文字を追加し、

@-moz-document regexp("https?://(?!(?:\w+\.)?(twitter|pixiv|youtube|flickr|amazon|google|b.hatena)).*")

 などとすればできた。

--

 その後Stylishのバージョンが上がり、コードが複数のセクションに分かれ、それぞれ適用先をプルダウンで選択するようになったChromeは元からそうだったかも)
 Midnight Surfingの場合だとコード2の適用先に「次で始まるURL」として「http://」など4つ指定されている。これをすべて削除する。
 次に「正規表現に一致するURL」を追加し、次のようなURLを入力する。

https?://(?!(?:\w+\.)?(twitter|pixiv|youtube|flickr|amazon|google|b.hatena)).*

 これでいける。


■汎用スタイル2(シンプル版)

 汎用スタイルは完璧ではなく、サイトによっては背景色と文字色が近い色になったり、画像やプルダウンが表示されなかったりと、見づらい所ができてしまう。
 その場合は自分でシンプルなCSSを作り、それを適用することにした。そしたら大抵の場合は問題ない。

 ただしシンプルなCSSだと一部に変更されない背景と文字があるため、背景色と文字色の明るさを反転すると、一部の文字が背景に溶け込んでしまう。
 なので明るさは反転させず、背景色は明るいグレーに、文字は暗いままにし、コントラストを下げて目が疲れないようにした。

 Multi_Gray.css

 Firefoxの場合、この3行目に

@-moz-document domain("***.ne.jp"), domain("***.co.jp") {

 とあるので、()内に適用したいドメインを記入する。
 スタイルが二重に適用されないよう、同じドメインを上記の汎用スタイル1の除外リストregexp~の部分)に追加する。

--

 バージョンが上がったStylish、あるいはChromeの場合、適用先に「次で始まるURL」「ドメイン上のURL」などで

***.ne.jp

 とドメインを一つずつ指定する。


■グローバルスタイル

 ごく稀にしか訪れないサイトで汎用スタイル2を使いたい場合、CSSにいちいちドメインを記述するのは面倒。
 その場合は汎用スタイル2を複製し、3行目の

@-moz-document domain("***.ne.jp"), domain("***.co.jp") {

 と、最後の

}

 を削除する。
 するとそれはグローバルスタイルとなり、Stylishのアイコンからいつでもオンオフできる。
 なのでそれを使いたいサイトを開いたら、適用されている汎用スタイル1をオフにし、グローバルスタイルをオンにする。

長い余談

◎余談1
 Stylishを作っている人もそうだけど、CSSを無料で配布してくれている人がいて本当に助かった。
 暗い背景色を好む人は少数派みたいだけど、少数でも集まればこんなに便利になるんだなと思った。久々にネットに集合知を感じた。
 Stylishがなくなったら困るので、前も寄付した気がするけど、また寄付した。

◎余談2
 まぶしいならモニターの輝度を下げればいいじゃん、と思う人もいるかもしれないが、画像や映像を見る場合は、あるていど輝度は高い方がいい。暗い所から明るい所までの明るさの幅(ダイナミックレンジ)が広くなるからだ。だからモニターの性能が上がると共に輝度 (cd/m2) も上がっている筈だ。
 つまり画像や映像を見るための役割が大きくなっているのが現状のモニターなのに、そこにそのまま100%の明るさで文字を表示し、目が疲れやすくなっているのが今のウェブとOS環境だ。
 おそらくMS-DOSなどの時代に[背景黒=暗い・ギーク・パソコンオタク]というイメージがあり、それに対しAppleMacで[背景白=明るい・おしゃれ]というイメージ戦略を打ち出したのが原因だろう。おしゃれのためなら体に悪いことも許される。市場原理の愚かな側面だ。
 わざわざモニターの明るさを上げておきながら、目に悪いブルーライトが出ているといってブルーライトカット眼鏡をつけるのは、自分にはアホなことをやっているようにしか見えない。

◎余談3
 このようなソフトStylishを使用する人がいるため、HTMLは文字色と背景色の明るさが反転しても問題ないように作らねばならない。
 例えば作品などをレビューする際に星マークを使うことがあるが、これは星いくつだろうか。
 ☆☆★★★
 左側の星が有効なら2個か? でも(このブログのデフォルトCSSなら)右側の星が明るいから3個だろうか。
 一般の、背景が白のサイトであればこうなるので星2個だとわかるが、
 
 明るさを反転している人のブラウザではこうなる。
 
 俺様の完璧にデザインされたサイトを反転して見るなんて侮蔑だ、そんな奴のことを考慮する必要はない、という人がいるかもしれないが、WindowsにもMacにも、弱視者のために画面の明るさを反転する機能がある。それを使用している人も無視していいのだろうか。
 上記の星の数については、こう書けば反転しても明白になる。
 ☆☆・・・

◎余談4
 白人は目の虹彩が青などでアジア人の黒より明るいから、強い日差しをまぶしく感じ、よくサングラスをかけるという。ではウェブページの白はまぶしくないのだろうか。西洋のオフィスは日本より薄暗いことがあるので、余計明るく感じると思うのだが。

◎余談5
 光がまぶしく感じる原因については、ネットで調べると、
 ・虹彩が薄い
 ・自律神経系の不調により敏感になる・瞳孔が開く
 ・白内障などの目の病気
 ・光過敏。発達障害の人に見られる傾向
 といったところだそうな。
 そういえば東日本大震災の年の夏に、職場が節電のために薄暗くなったら、自分はとても落ち着けて快適だった。蛍光灯が隅々まで照らしている部屋にはもう戻りたくなかった。
 こういう少数派の人のことも考慮してもらえる社会だと暮らしやすいのだが。