【Amazon】レビューページから不要な項目を非表示するCSS

2023年12月29日2024年9月17日Amazon

この記事では、PCウェブサイト「Amazon」の商品レビューページにある不要な要素（ユーザー名、役に立ったボタン等）を非表示にするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」や「Stylusスタイラス」を利用します。

PCウェブサイト版「Amazon」のレビューページを見てみると、僕にとっては不要な項目がいくつかあることに気づきました。例えば以下の項目です。

ユーザー名
レビューを書くボタン
上位の肯定的レビュー、上位の批判的レビュー
役に立った、レポートボタン

CSSを利用することで自身の環境上で非表示にできます。いつでも元に戻せます。本記事はChrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホやタブレットのアプリ版ではできません。

余談ですが、2023年の「Amazonプライムデー」で購入した商品を貼っただけの記事を書いています。

【Amazonプライムデー】2023年のセールでナポ寿司が買ったやつ貼るだけ

1. インストール方法
2. AmazonのレビューページをカスタマイズするCSS
3. レビューページではなく、商品ページでも適用したい場合
4. 【関連記事の紹介】他にも消す記事書いているよ
5. 感想

インストール方法

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebotスタイルボット」を利用します。

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

AmazonのレビューページをカスタマイズするCSS

レビューページだけで動作するスタイルシートを作成する

今回はAmazonのドメイン上ではなくレビューページだけで動作させたいので、レビューページ専用のスタイルシートを作成します。

インストールした「Stylebot」拡張機能アイコンを左クリック→「オプション」をクリックします。右クリックからでもOKです。

「Stylebot」拡張機能でAmazonのレビューページだけで動作するスタイルシートを作成する手順画像1

左側の「スタイル」をクリックします。「新しいスタイルを追加」をクリックします。

「Stylebot」拡張機能でAmazonのレビューページだけで動作するスタイルシートを作成する手順画像2

2つのテキストボックスが表示されます。1つ目にページのURL、2つ目にCSSを書き込んでいきます。

「Stylebot」拡張機能でAmazonのレビューページだけで動作するスタイルシートを作成する手順画像3

今回の場合、Amazonのレビューページだけで動作させたいので以下のURLを指定します。「**」はワイルドカードで任意の一文字以上という意味です。

https://www.amazon.co.jp/**/product-reviews/**

僕が見た感じレビューページのURLには「product-reviews」という文字列が含まれていたので、上記のような形（パターン）にしています。

「Stylus」拡張機能を利用している場合（正規表現）

「Stylebot」拡張機能ではなく「Stylus」拡張機能を利用している場合、ワイルドカードではなく正規表現で書きます。「**」の部分が「.*」になります。

https://www.amazon.co.jp/.*/product-reviews/.*

スタイルシート画面を開いてページ指定の部分を「正規表現に一致するURL」にします。右横のテキストボックスに上記のURLを書き込みます。

「Stylus」拡張機能でAmazonのレビューページだけで動作するスタイルシートを作成する手順画像

CSSを書き込む

2つ目のテキストボックスにCSSを書き込みます。以下になります。全てを書き込む必要はなく、自分が使いたいCSSだけ書きます。

/*【レビュー】「レビューを書く」ボタン非表示*/
.reviewSolicitation:has([href*="create-review"]) {
    display: none !important;
}

/*【レビュー】上位の肯定的レビュー、上位の批判的レビュー非表示*/
div#cm_cr-rvw_summary {
    display: none !important;
}

/*【レビュー】ユーザー名非表示*/
.review [id^="customer_review"] div:has(>.a-profile) {
    display: none !important;
}

/*【レビュー】各レビュー下の「役に立った」と「レポート」ボタン非表示*/
.review [id^="customer_review"] .a-row.review-comments {
    display: none !important;
}

/*【レビュー】「Amazonで購入」非表示*/
.review-data span[data-action="reviews:filter-action:push-state"] {
    display: none !important;
}

/*【レビュー】レビューに枠線を付ける。余白具合*/
.review:has([id^="customer_review"]) {
    border: 2px solid #bbbfbf !important;
    border-top: none !important;
    margin-bottom: 0px !important;
}

注意事項

本記事のCSSは僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で修正したいと思います。