2020年8月：Yahooで番号が表示されなくなったので、コードを書き換えしました。
Firefox に導入しましたが Google Chrome でも同じようにできると思います。
Firefox + 自動的に次のページを表示するアドオン(weAutoPagerizeまたはAutoPagerize Advanced)を使うことを想定しています。アドオンを使わず「次へ」をクリックすると、再び1から番号が表示されます。
注1:Yahoo JAPAN
Firefox + weAutoPagerizeまたはAutoPagerize Advancedでは自動ページ送りが効かないようです（2021年4月：動作を確認しました。）- Chrome + AutoPagerizeまたはuAutoPagerizeだと自動ページ送りが効きます。
注2:Chrome
拡張機能のみで番号を表示することが可能です
だだ、 AutoPagerize、uAutoPagerizeとの相性は良くないようです。
導入
まずは Stylus をインストール。
右上のアイコンをクリック
「管理」をクリック
画面の左側にある「新スタイルを作成」をクリック
右の画面に下記コードをコピペ
注：下記コードはGoogle, Yahoo, Bingをひとつのファイルにまとめた例です。それぞれの検索エンジン別にファイルをつくったり、セクションで管理してもいいと思います。
/* 共通設定 */
body {
counter-reset: result;
}
/* Google */
#search h3::before {
counter-increment: result;
content: counter(result) ". ";
}
/* Yahoo */
#contents h3::before {
counter-increment: result;
content: counter(result) ". ";
}
/* Bing */
#b_content h2::before {
counter-increment: result;
content: counter(result) ". ";
}
注3:上記コードだとGoogleの場合、番号の付き方がこうなります。
Googleの部分を下記コードにすると
/* Google */
div.r h3::before {
counter-increment: result;
content: counter(result) ". ";
}
番号の付き方がこうなります。
適用先 すべて 右側の + マークをクリック。「次で始まるURL」を選択する。
+ マークを押して適用先をそれぞれ入力。個別のファイルで管理する場合は該当アドレスのみを入力
最後に、画面左側の入力欄に任意の名前を入力、保存をクリック。これで完成です。
これが
こんな感じに
補足
検索結果のタイトルはGoogleとYahooはh3要素、Bingはh2要素なので個別ファイルやセクションで管理する場合は下記でもOKです。
Google, Yahoo用
/* Google, Yahoo */
body {
counter-reset: result;
}
h3::before {
counter-increment: result;
content: counter(result) ". ";
}
Bing用
/* Bing */
body {
counter-reset: result;
}
h2::before {
counter-increment: result;
content: counter(result) ". ";
}
有益な情報提供をありがとうございました。Yahoo!とGoogleの検索結果ページに順位表示を付けたいと思い、方法を探しておりました。手順通りにやってみたところきちんと順位が表示され、大変満足しております。ところで今後の検索エンジンの仕様変更が少し心配です。私はここで用いられているようなコードを作成したりすることに関しては全く心得がないのですが、少々の勉強で自分でコードを修正できるようになるものでしょうか？
返信削除コメントありがとうございます。
削除きっとできるようになると思いますよ!
ちなみに今回の修正箇所は Chrome や Firefox の開発ツール（[Ctrl] + [Shift] + [i] で出てくるやつ）で探しました。
----------
:before となっていた部分があったので ::before に修正しました。（疑似要素はコロン2つが良いということなので）
sutajp様
返信削除ご返信ありがとうございました。
ぜひ勉強してみたいと思います。