【Amazon】下部にある閲覧、おすすめ商品などを非表示にするCSS

2023年7月10日Amazon

この記事では、PCウェブサイト「Amazon」のトップページ、検索結果、商品詳細ページなどの下部に表示されるおすすめ商品・閲覧商品などの項目を、丸々非表示にするCSSを書きます。

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

Amazonで買い物している時、どのページでも下部に、僕にとって余計な項目があることに気づきました。トップページ、検索結果、商品詳細ページなどです。以下の項目が表示されました。

ページをスクリーンショットして共有する際などに、自分が過去調べた傾向が表示されると、少し恥ずかしいので、CSSで消してみたいと思います。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。自身の環境上だけで、他人には影響しません。いつでも元に戻せます。

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

インストール方法

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

Stylebot

Change the appearance of the web instantly

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

「Chromeに追加」をクリックしてインストールします。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。

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

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

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

あんまり検証していないので、別の場所が消えたらごめんなさい。問い合わせから教えていただければ修正したいと思います。

まず、「Amazon」のトップページ下部です。「文房具・オフィス用品で頻繁に再購入されています」や「閲覧履歴」といった項目が表示されていました。

検索結果の下部です（例：カロリーメイト）。「お客様の閲覧履歴に含まれている商品を閲覧した人は、こんな商品も見ています」が表示されていました。

商品詳細ページの下部です（例：大塚製薬カロリーメイトブロックチョコレート 4本×30個）。「お客様の閲覧履歴に含まれている商品を閲覧した人は、こんな商品も見ています」が表示されていました。

「Amazon」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*検索結果下部にあるおすすめとか閲覧商品とか丸々非表示*/
div#rhf {
    display: none !important;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト（例：www.amazon.co.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。

これでトップページ、検索結果、商品詳細ページから、ページ下部の余計なコンテンツが消えます。僕の環境だと、詰めてはくれませんでした。表示されていた部分が、何もないまっさらな空間になりました。

欲を言えば、スクロールできないように詰めたかったんですが、そこまでする気力はなかったので、調べるのをやめました。

完全に消しているのではなく、見えないよう隠しているだけです。Stylebotアイコン→「www.amazon.co.jp」をオフにすると、元通り表示されます。

Amazon上で、不要な部分を消す記事を、他にもいくつか書いています。気になった方は参考にしてみてください。検索結果に表示される「閲覧履歴に基づくおすすめ商品」や、検索ボックスにフォーカスした時に表示される「購入済み」や「トレンドキーワード」も消せます。

以上、PCウェブサイト「Amazon」のトップページ、検索結果、商品詳細ページなどの下部に表示されるおすすめ商品・閲覧商品などの項目を丸々非表示にするCSSでした。

最近、どのサービスも以前よりごちゃごちゃしてきたと思うのは僕だけでしょうか。もっとシンプルを維持していいと思うんですけども…。色々大人の事情があるのですかね。

2023年7月10日Amazon