Firefox の Stylish でYahoo!・Google・bingの検索結果に順位表示。 ☺ webruary

Firefox の Stylish でYahoo!・Google・bingの検索結果に順位表示。

2013 - 10: 16
Category: Web
Comments: 0

イロイロ変更してたので、新しく書き直しました
https://webruary.net/web/2020-11-04/stylus-resultnum/

数年前に旧ブログで『GreasemonkeyでYahoo!・Google・bingの検索結果に順位表示。』ってのを書いてましたが、実はこちら、その後の検索サイト側の仕様変更などにより使えないのもあったりします。
で、自分はちゃっかり他のスクリプトに変更したり、Yahoo! に至っては Stylish を使って対応してたりしました。

話は代わり、昨日 Firefox をクリーンに再インストール。

パソコンが変わった時とか OS 再インストールした時等、いつもは『MozBackup』を使ってましたが、今まで about:config でイロイロいじった上に、古いバージョンからアップデート続きのバックアップファイルからの復元だったので、なんとなくスッキリしたくて MozBackup の復元を使用せず、再インストール後はほぼ手動で復元しました。

そこで、手動ついでにイロイロ整理してる中、実は Greasemonkey で使ってるスクリプトは Google と bing の検索結果に順位を表示するのみだったので、じゃぁ、Greasemonkey やめてこっちも Stylish でやっちゃえばいんじゃないかな？みたいな。

ここから続き

さっそく Stylish 用 CSS。

やっぱり、調べてみると同じようにやっておられる方が居りましたので、参考にしました。

tomhat / display_ranking_number.css

↓が適用後の Yahoo! と bing の検索結果。

ただ、上記のままだと↓の様に Google で下層ページのサイトリンクがあると番号がズレる模様。

検索結果のソースを見るとわかりますが、タイトルとサイトリンクは共に <h3 class="r"> で囲まれてるのが原因のようです。

コードを追加。

ってなわけで、少々コードを追加して対処。
※下部に追記あり。

CSS

/* Google */
@-moz-document url-prefix("http://www.google.co.jp/"), url-prefix("https://www.google.co.jp/") {
	body {
		counter-reset: result !important;
	}
	div.rc h3::before {
		content: counter(result) ". " !important;
		counter-increment: result !important;
	}
}


/* Yahoo */
@-moz-document url-prefix("http://search.yahoo.co.jp/"), url-prefix("https://search.yahoo.co.jp/") {
	body {
		counter-reset: result !important;
	}
	div.hd h3:before {
		content: counter(result) ". " !important;
		counter-increment: result !important;
	}
}

 
/* Bing */
@-moz-document url-prefix("http://www.bing.com/"), url-prefix("https://www.bing.com/") {
	body {
		counter-reset: result !important;
	}
	div.sb_tlst h3:before {
		content: counter(result) ". " !important;
		counter-increment: result !important;
	}
}

簡単に言うとサイトリンクを入れてる『table.nrgt』内の『 h3.r』は番号を非表示するように上書きって感じ。

また、自分は特に必要ないので日本語サイトのみに対応するようにしてますが、url-prefix に URL を追加すれば Google.com とか海外もイケたりします。
ついでに、content の ".（ドット）" を違うのに変更して楽しむことも出来ます。

最後に。

実は Greasemonkey のスクリプトとは違い Stylish は CSS な関係上、2ページ目とかに行くと番号がリセットされます。
自分の場合、基本1ページに100件表示しているので特に気にはなりませんが。

あくまで、順位表示は目安ということで。

※2018/8/30 追記: google 用のコードを修正しました。
なんでか h3 にクラス名を指定してると番号が表示されず…。
あと table も無くなってました。

webruary