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

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

はじめに

ブラウザで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
google
yahoo
serx.cf
searx.tiekoetter.com

下の2つはあまり知られていませんが、
結果が精査されていて便利なサーチエンジンなので追加してあります。
https://serx.cf
https://searx.tiekoetter.com

使用した検索画面

Highlight_Color_180607_001.png

文字の色を変更のみの CSS と
色変更+文字を見やすく少し拡大 の CSS が入っております。

お約束:
このファイルを使用しての
どのような状況でも責任は取りません。

使用する場合は自己責任にて、
この条件に同意いただけない方は使用を禁止いたします。

【 目次へ戻る 】

使用方法

Firefox の stylus アドオンの例を書いておきます。

アドオンを入れてアドオンをクリック、オプション

Highlight_Color_180607_002.png

管理画面を下にスクロールして、スタイル管理

Highlight_Color_180607_003.png

左上の 新スタイルを作成 を押します。

Highlight_Color_180607_004.png

任意の名前を入れます。
保存 はまだ押しません。

Highlight_Color_180607_005.png

上でダウンロードした 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 の両方を記載してます。
全部入れたら 上で押さないでと書いた 保存 ボタンを押して終了。

Highlight_Color_180607_006.png

適用したら 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アドオン使用

この記事へのコメント

人気記事

プロフィール

・このブログの管理者:気ままさん
・性別:男
・年齢:40代
・性格:プログラミング的思考
    スキゾイド傾向
    去る者は追わず、来る者は拒まず
・趣味:読書、ブログ ( 情報の In / Out )
    プログラミング ( 素人 / 独学 )
    パソコンを少しでも快適に設定する
・一言:ご観覧ありがとうございます。
    自分で購入したり行ったという類の商品レビューを扱うサイトです。
    他のサイトより情報を集め、使ったように見せかけレビューをしているではありません。
    プログラミング的思考な性格のため商品のワクワク感をお伝えしたり
    購入を後押しする表現は使えませんが、逆に考えますと
    過度に評価を高めたり誤解させるような類の表現はいたしません。
    私が感じた情報を提供するのみであり、判断は皆様のご自由にがモットー。

    記事は全て私がキーボードで打っており、AIの類は一切使用しておりません。

プライバシーポリシー

詳しくはこちらをご覧ください。 [ プライバシーポリシー ]

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

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

メールフォームにて入力する情報は誰がどのお問い合わせかを確実に把握するために使用いたします。
それ以外に情報を使用することはありません。

当サイトで紹介されている商品やアプリは出来るだけ客観的に記載しておりますが人により感じ方は違いますので記事とは違って感じるはあり得ます、ご了承ください。

当サイトで紹介しているアプリ ( 私の自作も含みます ) の使用やアプリの設定類は自己責任にて行ってください。
アプリ自体の仕様変更などの類により不具合が生じる場合があります。
あくまで設定の見本でありご注意ください。

当サイトはリンクフリーです、悪意の用途でない限りはご自由に。

カウンター