【 目次 】
はじめに改良元のCSSサイト
Stylish (stylus) アドオンを使用
CSSのダウンロード
使用方法
おまけ 文字色も変更したい
おまけ 背景色がまぶしい
おすすめリンク/関連記事
はじめに
ブラウザでGoogle検索 ( Yahoo検索等も ) していて検索結果の文字がズラーッと並んでいると
検索した文字が含まれているのかがわかりにくい。
入力した文字だけ色を変更 ( ハイライト ) 出来ないかな?
と思っていましたが出来る様なので
ブログネタです。
【 目次へ戻る 】
改良元のCSSサイト
色々調べていたら以下のサイトを発見いたしました。とても見やすく CSS が記載されています。
【Stylish】Google検索結果のハイライト表示 - 備忘録と
サイトに編集してOK、と書いてありましたので
以下は上に記載されていました CSS を改良、
シンプルにして Google、Yahoo、baidu でも
検索した文字の色を変更できる様にしました。
CSSを公開、しかも編集可能としていただいている作者様に感謝を。
【 目次へ戻る 】
Stylish (stylus) アドオンを使用
テストしたブラウザは以下です。OPERA、Firefox、Waterfox の3つ。
各ブラウザに CSS を読み込んで反映させる
Stylish または stylus アドオンを入れてての動作確認。
アドオンは以下から。
Stylus
Chrome & OPERA
Stylish
Chrome & OPERA
stylus
Firefox
Stylish
Firefox
【 目次へ戻る 】
CSSのダウンロード
それでは、以下のファイルを落として解凍してください。CSS-highlight_220119.zip ( 2022/01/19 )
MD5:A3537E6057DBD5C992931D56E8D15D52
以下のサイトに対応します。
baidu
bing
yahoo
serx.cf
searx.tiekoetter.com
下の2つはあまり知られていませんが、
結果が精査されていて便利なサーチエンジンなので追加してあります。
https://serx.cf
https://searx.tiekoetter.com
使用した検索画面
文字の色を変更のみの CSS と
色変更+文字を見やすく少し拡大 の CSS が入っております。
お約束:
このファイルを使用しての
どのような状況でも責任は取りません。
使用する場合は自己責任にて、
この条件に同意いただけない方は使用を禁止いたします。
【 目次へ戻る 】
使用方法
Firefox の stylus アドオンの例を書いておきます。アドオンを入れてアドオンをクリック、オプション
管理画面を下にスクロールして、スタイル管理
左上の 新スタイルを作成 を押します。
任意の名前を入れます。
保存 はまだ押しません。
上でダウンロードした CSS をメモ帳などで開き
画面にコピペして貼り付けます。
※ファイルをドラッグするとURL設定が自動で入りません
手動で入れるのであれば問題ないですが
手動の場合は
適用先を 次で始まる URL にして
右に 適用する URL を入れます。
※適用する URL は CSS の先頭に書いてあります
Google であれば以下です
http://www.google.co.jp/search?
https://www.google.co.jp/search?
http://www.google.com/search?
https://www.google.com/search?
一応 URL は http と https の両方を記載してます。
全部入れたら 上で押さないでと書いた 保存 ボタンを押して終了。
適用したら Google で検索して文字が変化したかを確認。
適用が出来ないという場合は、上で入力した URL と
ブラウザの URL の頭が同じか確認して違ったら書き換えるなど。
ちなみに Yahoo の CSS で
https://search.yahoo.co.jp/search の
最後に ? が入っていませんが
Yahoo トップからの検索と
Yahoo 検索で ? が入っていたりなかったりしてるので
除外しておきました。
【 目次へ戻る 】
おまけ 文字色も変更したい
背景色だけではなく文字色も変更したい場合は各 CSS のこの一文のすぐ上に
background: #B58246 !important;
このように追加すれば文字色も変更可能。
color: #000000 !important;
000000 が色の数値 ( 黒 ) です。
目的の色を出すには カラーピッカー で検索。
【 目次へ戻る 】
おまけ 背景色がまぶしい
ブラウザの背景色がまぶしいと感じている方はいますでしょうか。
以下で上のアドオンを使用して
背景色をグレー ( 灰色 ) にする CSS を配布しています。
よかったらどうぞ。
Firefox stylishアドオンで
まぶしい背景色を暗く(灰色)にするCSS
Firefox stylish (Stylus) アドオンで
まぶしい背景色を暗く(灰色)にするCSS その2
-----
とまあ、こんな感じで
検索結果をハイライトさせようでした。
ちなみにこの方法を探るべくググっていて
背景 変更 検索 ブラウザ
みたいなワードで探していたら全然出てきませんでした。
ハイライトで検索したら一発だったでござる。
以上。
※お詫び 2018/06/09
Stylish の Chrome & OPERA のリンクが間違っていました。
現在は修正済みです。
なお、間違ったリンク先へ飛んでも問題はないです。
ご迷惑をおかけいたしました。
おすすめリンク
・Amazon / 楽天市場 / Yahoo! でお買い物をする。関連リンク
・【Stylish】Google検索結果のハイライト表示 - 備忘録と・Stylus Chrome & OPERA
・Stylish Chrome & OPERA
・stylus Firefox
・Stylish Firefox
・Firefox stylishアドオンで
まぶしい背景色を暗く(灰色)にするCSS
・Firefox stylish (Stylus) アドオンで
まぶしい背景色を暗く(灰色)にするCSS その2
・Windows10 April 2018 のまぶしい背景色を灰色 (グレー) に変更
・F.luxでまぶしい画面を暗くして快適に。
・【設定・使い方 f.lux】モニタの画面を暗くして
目がチカチカ・まぶしい・頭痛を軽減
・2018年9月 Firefox Quantum v60 に
入れた便利なアドオン
・Firefox Quantum v62.0 64bit Portable
HDDでも起動が速すぎて笑う。
・Firefox テーマ ( 外見 ) を変更するアドオン
「 Firefox Color 」( URL・検索蘭の色も変更可 )
・【設定】デスクトップをホイール上下し画面の明るさを変更
MouseGestureL.ahk と f.lux 使用
・パソコン画面がまぶしく感じるという人に
オススメのモニタ、文字を書くのに最適。
・Win10 URL入力欄の背景色がまぶしくないブラウザ
・Firefox 読み込み中の背景色をまぶしくない色に変更
・Firefox アドオン入手サイトでアドオンを使用したい ( 文字を翻訳したい等 )
・Firefox Vivaldi Chrome ブックマークをHTMLで書き
Dropbox / Googleドライブで共有
・Firefox v89.0 で変化したスクロールバーの色の変更方法 ( 背景色/バー自体 )
・広告ブロック uBlock Origin で特定の部分/邪魔な表示を消す
Firefox Chrome Vivaldi Edge
・Firefox v92.0 Firefox Color アドオン環境でURLバー、検索バーの枠が表示されない
・Firefox v96.0.1 URLバー ( アドレスバー ) / 検索バー の
横幅を変更する userChrome.css
・Firefox v91~ HTTPサイトでダウンロード元ファイルが読み取れないの改善
・Firefox v98.0 ファイルをダウンロードすると
アイコンが展開するを止める ( ダウンロードパネル )
・Firefox v98.0 タブを切り替え/F5キーを押した直後に
OS を巻き込んでフリーズの改善
・タイッツーの背景色を灰色 ( グレー ) にし文字を大きくする CSS / Stylusアドオン使用
この記事へのコメント