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

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

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


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



はじめに

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

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

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

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

【 目次へ戻る 】

Firefoxデフォルトの設定

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

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

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

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

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

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

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

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

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

【 目次へ戻る 】

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

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

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

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

Stylish - バージョン履歴

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

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

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

【 目次へ戻る 】

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

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

Firefox_stylish_gray_css_170901_001.jpg

Firefox_stylish_gray_css_170901_002.jpg

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

以下の 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 というアイコンが出るので
左クリックして 全てのスタイルを停止する で切り替わります。

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

【 目次へ戻る 】

使用注意

最後に注意事項を。

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

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

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

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

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

【 目次へ戻る 】

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

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

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

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

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

stylus_FireFox_css_key_180610_001.png

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

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

stylus_FireFox_css_key_180610_002.png

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

【 目次へ戻る 】

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

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

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

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

見本画像

Highlight_Color_180607_001.png

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


-----

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

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

以上。

おすすめリンク

Amazon / 楽天市場 / Yahoo! でお買い物をする。

関連リンク

FireFox Portable 動作軽快/日本語化/シークレット・キャッシュ設定など。
【設定・使い方 f.lux】モニタの画面を暗くして
 目がチカチカ・まぶしい・頭痛を軽減

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

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

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

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

2018年9月 Firefox Quantum v60 に
 入れた便利なアドオン

FireFox テーマ ( 外見 ) を変更するアドオン
 「 Firefox Color 」( URL・検索蘭の色も変更可 )

【設定】デスクトップをホイール上下し画面の明るさを変更
 MouseGestureL.ahk と f.lux 使用

パソコン画面がまぶしく感じるという人に
 オススメのモニタ、文字を書くのに最適。

【移行方法】 Firefox Portable から Firefox ESR Portable へ乗り換え
Win10 URL入力欄の背景色がまぶしくないブラウザ
FireFox 読み込み中の背景色をまぶしくない色に変更
【 2019年8月版】 FireFox と Waterfox に入れた便利なアドオン

この記事へのコメント

人気記事

プロフィール

・このブログの管理者:気ままさん
・性別:男
・年齢:ぼーっとしている間に35~45歳の間になる。
・趣味:パソコンを使用する環境を快適にする為に知識を蓄え、設定する、読書
・好きな食べ物:夕食に食べるフルグラが最近のお気に入り。
・嫌いな食べ物:生もの全般 ( 食事の楽しみより食あたりを警戒 )
 口に入れるとネチョネチョするもの全般
・好きな言葉:小さな事からコツコツと、継続は力なり、縁の下の力持ち
・嫌いな言葉:( 年単位で継続しているものに対し ) こんな役に立たないものに時間をかけて
・一言: ( 2019/01/11 )
 こんにちは、気ままなブログを管理している 気ままさん です。
 使ってよかった商品のレビューと生活で便利そうな事と
 パソコン、タブレット、アプリの設定などが主です、
 私は記憶力がポンコツなのでどこかに書いておかないと
 記憶が DELキー 押したかのように消えるので自分用だったりします。
 コツコツ継続は得意なので 気まま に更新中。
 いらっしゃいませー。

プライバシーポリシー

プライバシーポリシー

当サイトでは、第三者配信による広告サービスを利用しています。このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 (氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、ここを参照するか ブラウザのCookie機能をオフにしてアクセスしてください。

気ままの簡易レビュー 2 はamazon.co.jpを宣伝しリンクすることによって
サイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムであるAmazonアソシエイト・プログラムの参加者です。

カウンター