ホーム / IT /

Stylusで背景色を暗くする

2016/06/30

IT

　〔約3500文字｜読了の目安：7分〕

＊2018/2/5, 2025/7/6 追記：Stylishは問題がありStylusに置き換わりました。

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

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

専用スタイル

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

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

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

汎用スタイル

■汎用スタイル１

　暗いスタイルが用意されていなかったり、頻繁には訪れないので専用の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)).*

　これでいける。

■汎用スタイル２（シンプル版）

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

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

　Firefoxの場合、この３行目に

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

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

－－

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

***.ne.jp

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

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

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

　と、最後の

}

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

QooQ