Google検索に順位（連番）を表示する

はじめに

Google検索に順位（連番）を表示するユーザスタイルです。

検索がちょっとだけ便利になります。

結果の表示例

結果

簡単な説明

CSSのcounter関数を利用して、検索結果のタイトルに連番を計算します。計算した連番を::beforeのcontentプロパティを使用して表示しています。

仕様

  • Google検索の検索結果に連番を表示する
    • 2ページ目以降も1番からの連番となる
    • 動画など通常の検索結果と異なる結果も合わせて連番を表示する

コード

GoogleSearchNumbering.user.css/*! GoogleSearchNumbering.user.css */
/* ==UserStyle==
@name         GoogleSearchNumbering.user.css
@description  Numbering Google search results.
@match        *://www.google.com/search?*
@match        *://www.google.co.jp/search?*
@author       toshi (https://github.com/k08045kk)
@license      MIT License | https://opensource.org/licenses/MIT
@version      1.0
@since        1.0 - 20210317 - 初版
@see          https://www.bugbugnow.net/2021/04/google-search-numbering-user-css.html
@preprocessor default
==/UserStyle== */

body {
  counter-reset: search-index;
}
#search h3 {
  white-space: nowrap;
}
#search h3::before {
  content: counter(search-index) ". ";
/*content: counter(search-index, decimal-leading-zero) ". ";*/
  counter-increment: search-index;
}