はじめに
Chrome , OPERA , Firefox にて背景がまぶしい。という方向けに背景を灰色にして疲れ目を軽減する
CSS を以下で配布していますが
Firefox stylish (Stylus) アドオンで
まぶしい背景色を暗く(灰色)にするCSS
※要 stylish または Stylus アドオン
上のリンクではとにかく白い背景を除外することを
第一目標にしていたので
サイトにより背景画像までも無効化してしまい
少し不満げ。
というわけで上の CSS を改良して
背景を灰色にしつつ、背景画像はそのままという
CSS が完成しましたので
なくさないように置いておきます。
よろしければどうぞ。
【 目次へ戻る 】
CSS の入手
それでは CSS のファイルです。あくまで Firefox で使用するがメインなので
Chrome / Edge / Vivaldi では変化しない類があるかと思います。
CSS-Gray v1.13a ( 2024/03/05 )
MD5：1A016DF47079CC53AB2039CE3247E0ED
■ v1.13a 更新内容
＊Youtube でのスクロールバーが白く戻っていたので修正
ほか数カ所改善あり
■ v1.12 更新内容
＊X ( 旧：ツイッター ) の Youtube 動画の透明度を調節
同じくシークバーの色を見やすくした
■ v1.11 更新内容
＊マウス反転背景色 を追加
マウスで文字を反転させた場合の文字背景色を指定に使用する例
Firefox / Vivaldi にてテスト、Chrome / Edge でも使えると思います
＊マウス反転背景色 を -moz-selection から selection へ変更
■ v1.10 更新内容
X ( 旧：ツイッター ) のマウスで文字を反転させた場合
文字表示の背景色が変化したので修正
■ v1.09 更新内容
X ( 旧：ツイッター ) の表示色が変化したので修正
文字色の黒を #000000 から #000001 へ、キャプチャーの黒色抜け対策
■ v1.08 更新内容
1.07 の変更箇所を他の CSS にも適用した
■ v1.07 更新内容
Chrome Edge Vivaldi でこの CSS を使用した場合に
Yahoo検索で枠の色がうっすら表示されているのに気づいたので消しました
Firefox で使用している場合は何も変化はありません
■ v1.06 更新内容
今回よりファイル名が日付ではなくバージョン名で配布いたします。
メインの All 強 が http のみの指定になっていたので https を含むに
強制透過無効 のツイッター指定を正規表現での指定に戻し
tweetdeck のみを除外、tweetdeck のみの設定を追加
このページの昔の CSS を入れている場合は
All 強 と 強制透過無効 を消して入れ直すだけです。
ファイル名に 200624 とついている物は不具合があります。
v1.06 に交換をお願いいたします、現在は修正済み。
ご不便をおかけいたしました。
■ 200624a 更新内容
200624 更新の部分、動画を濃くした部分の副作用で
逆にユーザーの部分が背景の文字と
重なり読みにくくなってしまったので微調整。
tweetdeck のCSS追加。
このページの昔の CSS を入れている場合は 強制透過無効 を
消して入れ直すだけです。
■ 200624 更新内容
ツイッターで表示されている動画が
薄く表示されているのを濃く調整しました。
このページの昔の CSS を入れている場合は 強制透過無効 を
消して入れ直すだけです。
■ 200501 更新内容
Youtube での戻る／進む時にバーの部分が薄く白く出て邪魔なので
出来るだけ透明になるよう調整しました。
このページの昔の CSS を入れている場合は 強制透過無効 を
消して入れ直すだけです。
■ 190314d 更新内容
Stylus-All 強 の CSS で Youtube、ニコニコ、yahoo動画、twitter、Google画像 を除外
代わりに 強制透過無効 の CSS で上のサイトを個別に適用するようにしました。
細かな CSS を 強制透過無効 へひとまとめにしましたので
今まで公開されていた CSS を適用している場合は
全部消して再度登録してください、ご面倒をおかけします。
-----
使用は何個か入れておきましたので
read.txt をみて必要なのだけ入れるか
全部入れて切り替えるか、どちらでもOK 。
一応全部入れるという条件で作成しております。
通常は All-強 を適用しておき
サイトにより 透過 000-100 を切り替え
各ブラウザの stylish または Stylus アドオン設定画面にて
登録してください。
※CSS をメモ帳で開いてコピペがトラブルなくていいです
ご使用は自己責任にて。
自己責任にてご使用いただけない場合は
ご使用の許可をいたしかねます。
適応画面、うちは CSS とか工夫しているわけではないので
ただ、背景が灰色になるだけですが・・・。
ほかサイトで透過 CSS を使用すると
まぶしすぎ → まぶしさ半減程度 まで可能かと。
[ クリックで拡大できます ]
【 目次へ戻る 】
Youtube の検索も可能
昔の CSS では Youtube の入力ボックスに文字が出ないよ、という状況でしたが
これはきちんと入力できます。
【 目次へ戻る 】
この本を見て改良
ちょこっと宣伝です。上の CSS を改良するにあたり
以下の書籍を読みました。
初心者用ですが自分は独学で書いていて
よくわからんままでしたが
この本は初心者にはとても理解しやすくていいです。
ここを観覧していただいている皆様で
CSS って面白そうだな、自分も書いてみたい。
または、基本的なことを学びたいという場合には
おすすめ。
10日でおぼえるCSS／CSS3入門教室
Amazon / 楽天市場 / Yahoo!
-----
とまあこんな感じで 背景をまぶしくしない CSS
その2 です。
まぶしい白い画面にバイバーイ。
以上。
おすすめリンク
・10日でおぼえるCSS／CSS3入門教室Amazon / 楽天市場 / Yahoo! で検索する。
・Amazon / 楽天市場 / Yahoo! でお買い物をする。
関連リンク
・Firefox stylish (Stylus) アドオンでまぶしい背景色を暗く(灰色)にするCSS
・【画面全体・ブラウザ・エクスプローラ】
パソコン画面のまぶしさをなくそう
・2018年９月 Firefox Quantum v60 に
入れた便利なアドオン
・Firefox Quantum v62.0 64bit Portable
HDDでも起動が速すぎて笑う。
・Firefox テーマ ( 外見 ) を変更するアドオン
「 Firefox Color 」( URL・検索蘭の色も変更可 )
・Win10 URL入力欄の背景色がまぶしくないブラウザ
・Firefox 読み込み中の背景色をまぶしくない色に変更
・【 2019年8月版】 Firefox と Waterfox に入れた便利なアドオン
・Firefox アドオン入手サイトでアドオンを使用したい ( 文字を翻訳したい等 )
・Chrome v87 アドレスバー ( URLバー ) の背景色をまぶしい白から変更
・Firefox Vivaldi Chrome ブックマークをHTMLで書き
Dropbox / Googleドライブで共有
・【2021年版】 同じバージョンの Firefox Portable を別名で多重起動する方法 v84.0.2～
・Win10 ハイコントラストテーマで Vivaldi／Chrome の配色が変を直す
・Firefox v89.0 で変化したスクロールバーの色の変更方法 ( 背景色／バー自体 )
・広告ブロック uBlock Origin で特定の部分／邪魔な表示を消す
Firefox Chrome Vivaldi Edge
・Firefox v92.0 Firefox Color アドオン環境でURLバー、検索バーの枠が表示されない
・Win11 ( 21H2 22000.194 ) のまぶしい背景色を灰色 (グレー) に変更
・Firefox v96.0.1 URLバー ( アドレスバー ) ／ 検索バー の
横幅を変更する userChrome.css
・Firefox v91～ HTTPサイトでダウンロード元ファイルが読み取れないの改善
・Firefox v98.0 ファイルをダウンロードすると
アイコンが展開するを止める ( ダウンロードパネル )
・Firefox v98.0 タブを切り替え／F5キーを押した直後に
OS を巻き込んでフリーズの改善
・タイッツーの背景色を灰色 ( グレー ) にし文字を大きくする CSS ／ Stylusアドオン使用
この記事へのコメント