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


はじめに

ブラウザで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_180617.zip
MD5:EBEB6A8FA58148F3B820B83554EF46FE

CSS-highlight_180712a.zip
MD5:49DAA6A6AB2E5712D57595C463E1050D
bing を追加、1つのCSSでbaidu,google,yahoo,bing を変化するよう改良

使用した検索画面

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 読み込み中の背景色をまぶしくない色に変更

この記事へのコメント

人気記事

プロフィール

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

プライバシーポリシー

プライバシーポリシー

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

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

カウンター