Firefox stylish (Stylus) アドオンでまぶしい背景色を暗く(灰色)にするCSS: 気ままの簡易レビュー 2

2017年09月02日

Firefox stylish (Stylus) アドオンでまぶしい背景色を暗く(灰色)にするCSS

商品リンクをクリックし通販サイトへ飛ぶ物は「広告」のリンクです。
記事の執筆に AI な類は使用しておりません。

※まぶしい画面を改善する記事をまとめました。
　よろしければどうぞ。

　【画面全体・ブラウザ・エクスプローラ】
　パソコン画面のまぶしさをなくそう

※この記事の CSS を少し改良しました。
　Firefox stylish (Stylus) アドオンで
　まぶしい背景色を暗く(灰色)にするCSS その2

【目次】

はじめに
Firefoxデフォルトの設定
アドオン stylishの入手と設定
背景色を灰色 (グレー) にするCSS
Youtubeでも背景を変更したい
有効・無効の切り替え
使用注意
おまけショートカットキーを登録して切り替え
おまけ検索文字をハイライト
おすすめリンク／関連記事

はじめに

Firefoxを使用していてサイトの白の背景色がまぶしい、
配色がおかしくてまぶしい、
とにかくまぶしい。

という人はいると思います。

このページでは WEBページの表示が崩れてもいい、
背景の画像が表示されなくてもいい、
背景色をまぶしくない色にしたい、という

とにかく背景色のまぶしさが憎い (笑)
という人のページです。

【目次へ戻る】

Firefoxデフォルトの設定

Firefox　にはデフォルトで背景を任意の色に変更する機能が
備わっております。

このページに来ている人はそれで満足できないんじゃー
という人だと思うのですが一応紹介。

Firefox を起動して右上の三とある箇所をクリック
オプションを選択。

コンテンツ → フォントと配色 → 配色設定にて
背景とある右に色が出ているので色の部分をクリックすると
好きな色を選択できます。

これだけでは変わらなくてすぐ下の
ウェブページが指定した配色を選択した配色で上書きするの設定で
常に上書きか高コントラストのみに設定します。

違いは、
前者は全部のページに指定した配色を適用、
後者はまぶしいと感じる色の範囲 ( どの範囲かは不明ですが ) のみ
背景色を指定した色に変更します。

とにかくまぶしい、ページの背景色は気にしないという
人は常に上書きで使用しましょう。

これで設定は終わりですが、問題はワンクリック (１クリック)で
設定を変更できないことです。

下に紹介するアドオンを入れるとワンクリックで
背景色を変更するCSSの設定を適用／解除が出来ます。

【目次へ戻る】

アドオン stylish (Stylus) の入手と設定

ここよりアドオンを入手します。
Stylish - Firefox Add-ons - Mozilla

現在公開されている最新の v3 を入れると
環境設定が変更できなくなっているようです？
※やり方があるらしいのですが英語で読むのがめんどい・・・

なので v3 を入れて設定を追加できない場合は以下から
きちんと動作する v2.1.1 を入手。

Stylish - バージョン履歴

※アドオンを追加したら設定画面で自動更新を停止してください
　放置すると勝手に v3 にバージョンが上がります

それか上のアドオンの代わりに以下を入れる手もあります。
Stylus (Beta)

※設定・動作はほぼ同じです
　入れるのであればこちらの方が自分的にはおすすめ
　理由はショートカットキーで CSS の ON/OFF が可能です。

【目次へ戻る】

背景色を灰色 (グレー) にするCSS

それでは CSS を設定しますが
とりあえず設定後の画面はこんな感じです。

[ クリックで拡大できます ]

以下の CSS は開くページ全ての背景色を変更します。

一応 Google , youtube , Amazon , 楽天等での
表示テストをしましたが
一部背景の画像が表示できなかったりします。
背景色をまぶしくなくする、に重点を置いているため仕様です。

また、Youtube で何故か検索欄で
文字が出ないという不具合があり、
背景色と文字色が同じで見えない模様。

※1
CSS を無効で表示可能、無効にしない場合、
文字が見えないだけで入力可

※2
この問題は改良した以下では解決済みです。
Firefox stylish (Stylus) アドオンで
まぶしい背景色を暗く(灰色)にするCSS その2

Amazon , 楽天等は問題ないのに何故、＿|￣|○

とまあ色々と不具合がありますが
よかったらどうぞ。

All_Set_Web_170901.css
MD5：278F295FC4D6BE7D3874F11A711A6F82

このファイルを使用する場合は自己責任にてお願いいたします。
自分は責任はとれません、ご了承下さい。

ちなみに独学なので正式に習っている方からすると
変な書式・書き方だろうと思いますが
どうぞニヤニヤしてくださいませ (^o^)ﾉ

設定方法

Firefox を起動して右上の三とある箇所をクリック
アドオンを選択。

アドオン入手の下の方にユーザースタイルがあるので選択
新しいスタイルを書くをクリック。

上に保存名 ( 任意設定 ) を入力して
先ほどダウンロードした CSS をメモ帳で開いてコピペして下さい。

保存ボタンを押します。

あとは、先ほど Firefoxデフォルトの設定 で
紹介しました

ウェブページが指定した配色を選択した配色で上書きするの設定を
上書きしないに設定して下さい。

これを設定しないとページの色が切り替わりません。

※画像付きの説明を別記事で書きましたので
よろしければお飛びください。
Stylish (stylus) アドオン使用
cssで検索した文字をハイライト Google Yahoo baidu

【目次へ戻る】

Youtubeでも背景を変更したい

すぐ上で説明したとおり、今紹介している CSS は
Youtube の入力欄に問題があります。
解決しようとしましたが自分の力では無理そうなので代案。

自分のように CSS を公開されている方がおりますので
それを導入しようです。

例えばですが
Fade+ for Youtube を導入するとか。

表示も問題なく、まぶしくも？そんなにないと思うので
導入すれば Youtube のみ動作する CSS が使用できます。

ちなみに、上の CSS も何カ所か書き換えれば
このブログで紹介しているように灰色になりますが

書き換えが許可されていない？模様なので
ここでは残念ですが書き換え箇所は書きません。

【目次へ戻る】

有効・無効の切り替え

CSS の切り替えは Firefox を起動すると
S というアイコンが出るので
左クリックして全てのスタイルを停止するで切り替わります。

同じく止める方法としまして
グローバルスタイルから止める方法もありますが
３回クリックしなくてはならないので上がおすすめです。

【目次へ戻る】

使用注意

最後に注意事項を。

使用すればすぐわかりますが
サイトのデザインによって背景が出なかったり
背景画像が出なかったりと色々ありますので

普通に検索とかで使用する場合は問題ないですが
情報を見逃して不都合が出る場合、

例えば通販のページとかで注意文が背景画像指定になっていて
この CSS で表示されなかったので気づかないで色々したとか

そういう事態が想像できますので
そういう場合は無効にして下さい。

上にも書きましたがこのサイトの管理者は何事にも責任をとりませんので
ご理解いただけないお方はご使用をお控え下さい。

【目次へ戻る】

おまけショートカットキーを登録して切り替え

上の CSS を登録して背景が変更できた。
と思っても変更しないでページを表示したい。
という場合があります。

その場合はショートカットキーを登録しておけば
登録キーを押すだけで背景の切り替え ( CSS の ON/OFF ) が可能。

以下は Firefox に stylus の組み合わせで設定した例。

stylus の設定画面を開き、
一番下のショートカットを開く。

すべてのスタイルをオフにするの箇所がそうです。
設定したいキーボードのキーを手入力。

画面では F1 キーで切り替え。

押すキーの記載方法がわからない場合は
下のヘルプを押せばキーの書き方ページが見られます。

【目次へ戻る】

おまけ検索文字をハイライト

背景色を灰色にして見やすくなり
ご満足？のあなたへ、もう一つ。

Google、Yahoo、baidu での検索時、入力した文字が
指定した色でハイライトされて表示されたら
さらに見やすくありませんか？

上で使用したアドオンを使用すれば
同じく CSS を追加するだけで可能です。

見本画像

Stylish (stylus) アドオン使用
cssで検索した文字をハイライト Google Yahoo baidu

-----

とまあ、こんな感じで背景を見やすくでした。

「背景色を無効にしたい、望むのはそれだけ」
という方には便利かと思います。

以上。

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

気ままの簡易レビュー 2