すたすた式
Firefox
2020年8月：Yahooで番号が表示されなくなったので、コードを書き換えしました。
Firefox に導入しましたが Google Chrome でも同じようにできると思います。
Firefox + 自動的に次のページを表示するアドオン(weAutoPagerizeまたはAutoPagerize Advanced)を使うことを想定しています。アドオンを使わず「次へ」をクリックすると、再び1から番号が表示されます。
注1:Yahoo JAPAN
注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) ". "; }
Firefox の Stylish でYahoo!・Google・bingの検索結果に順位表示。 ☺ webruary
【CSS】counterを利用した自動ナンバリング | 静岡県藤枝市のデザインスタジオ・エフ
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
有益な情報提供をありがとうございました。Yahoo!とGoogleの検索結果ページに順位表示を付けたいと思い、方法を探しておりました。手順通りにやってみたところきちんと順位が表示され、大変満足しております。ところで今後の検索エンジンの仕様変更が少し心配です。私はここで用いられているようなコードを作成したりすることに関しては全く心得がないのですが、少々の勉強で自分でコードを修正できるようになるものでしょうか？
返信削除コメントありがとうございます。
削除きっとできるようになると思いますよ!
ちなみに今回の修正箇所は Chrome や Firefox の開発ツール（[Ctrl] + [Shift] + [i] で出てくるやつ）で探しました。
----------
:before となっていた部分があったので ::before に修正しました。（疑似要素はコロン2つが良いということなので）
sutajp様
返信削除ご返信ありがとうございました。
ぜひ勉強してみたいと思います。