1. khsk

    適応 → 適用

    khsk
Changes in body
Source | HTML | Preview
@@ -1,59 +1,59 @@
SEOを仕事にしている方なら、共感していただけると思うのですが、
<img width="685" alt="スクリーンショット 2018-10-21 16.00.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/1ee208fb-9813-a697-7885-00dfbc9b071b.png">
ある検索結果に対して、この記事は何位だっけ?というのを一番上から数えて...
という経験はないですか?
そんな時に、サクッと何位かわかる方法を紹介します。
# やり方
まず、chromeの拡張機能「[stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne)」をインストールします。これは、お気に入りのWebサイトのスタイル(CSS)を任意のCSSに変えてしまうアドオンです。
そして、詳細設定で、下記の通りに設定を行ってください。
stylusを選択して、「管理」を選択
<img width="248" alt="スクリーンショット 2018-10-21 15.42.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/45e965d0-002f-b222-3cc0-16eb6f99df43.png">
すると、 色々なメニューが出力されます。そこから「新スタイルを作成」を選びます。
<img width="233" alt="スクリーンショット 2018-10-21 15.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/91603209-fa58-ff29-3666-07a430531b1d.png">
次に、
- 指定のCSSを貼り付けます
- 指定のURLを貼り付けます「https://www.google.co」
-- 任意の名前を入力(参考:google_rank) ← google検索した時のみこのスタイルを適させる
+- 任意の名前を入力(参考:google_rank) ← google検索した時のみこのスタイルを適させる
- 保存
<img width="849" alt="スクリーンショット 2018-10-21 15.51.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/72e98884-c663-2ac0-b4f1-ab3382faf8c9.png">
指定のCSSを下記に貼り付けます。
```css
body {
counter-reset: result !important;
}
h3.LC20lb:before {
content: counter(result) ". " !important;
counter-increment: result !important;
display: inline-block;
background: #fbe4c2;
margin-right: 1em;
}
```
ポイントは、CSSのプロパティである`counter-increment`を使って、任意のクラス(`h3.LC20lb`)を要素回数ごとに連番をつけているところです。
ここまで設定できたら、google検索した際にランクが表示されています。
<img width="729" alt="スクリーンショット 2018-10-21 15.58.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/14191/d4835101-1820-2e82-7e22-eb0131c3ff0a.png">
これで、サクッと何位かわかるようになりましたね。
# 改善ポイント
2ページ目からも1から表示されてしまうところですね。ここ、なんとかできる方、コメント待ってます。もちろん、GRCとか使えば指定キーワードの順位は定期的に取れるんですが、今回はサクッとわかるやり方を紹介しました。ありがとうございました!