【メルカリ】「閲覧した商品からのおすすめ」を非表示にするCSS

​​Stylebot&Stylus(CSS)

「メルカリ」のアイコン

この記事では、PCウェブサイト版「メルカリ」のトップページにある「閲覧した商品からのおすすめ」項目を非表示にするCSSを紹介します。

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

【メルカリ】「閲覧した商品からのおすすめ」を非表示にするCSS

PCウェブサイト版「メルカリ」のトップページには、「閲覧した商品からのおすすめ」という項目があります。過去に検索したキーワードに関する出品された商品がタイル状で表示されます。

PCウェブサイト版メルカリの「閲覧した商品からのおすすめ」画像

どうやら、ここの閲覧履歴は消せないようです。新しい単語で検索して上書きするしかありません。人によっては、この項目自体が不要かもしれません。CSSを利用することで、非表示にできます。

「閲覧した商品からのおすすめ」を消して、トップページを「おすすめの商品」だけにできます。なんなら、「おすすめの商品」すらも消すことが可能です。トップページに何も関連商品を表示させない状態です。

ただし、CSSなので、メルカリの仕様変更で使えなくなる可能性があります。本記事で紹介しているCSSが使えなくなっていた場合、問い合わせよりご連絡いただければ幸いです。僕ができる範囲でコードを修正したいと思います。

CSSを導入したブラウザ上での見た目を変えるだけです。他人には影響しません。自身が出品した商品を相手のおすすめ欄に表示させないようにする…といったものではありません。

インストール方法

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

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

「Stylebot」のインストール手順画像

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

メルカリの「閲覧した商品からのおすすめ」を消すCSS

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

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらに以下のコードを書き込みます。以下のコードになります。

/*トップページの「閲覧した商品からのおすすめ」非表示*/
main>mer-tab-panel>div:nth-of-type(3):has([data-location^="home:recommend:component:item_thumbnail"]) {
  display: none !important;
}

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

Stylebotのスクリーンショット2

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

これで、トップページから「閲覧した商品からのおすすめ」が消えると思います。検索した単語ごとで表示されていましたが、丸ごと消えます。「閲覧した商品からのおすすめ」の下部にあった「おすすめの商品」項目が、上に詰めて表示されます。

PCウェブサイト版メルカリの「閲覧した商品からのおすすめ」を非表示にした画像

トップページではなく、商品詳細ページの下部にある「この商品を見ている人におすすめ」項目は無関係です。消しません。

PCウェブサイト版メルカリの「この商品を見ている人におすすめ」画像

一時的に無効化したい場合は、Stylebot→「jp.mercari.com」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

「おすすめの商品」も一緒に消したい場合

「閲覧した商品からのおすすめ」、「おすすめの商品」の両方全部消したいという場合は、上記で紹介したコードではなく、以下のコードを使ってみてください。

/*トップページのおすすめ系の商品全部非表示*/
main>mer-tab-panel>div:has(a[data-location^="home:recommend"]) {
  display: none !important;
}

メルカリトップページのおすすめされた商品には、「home:recommend」という文字列が設定されていました。これらの文字を含んでいる場合、問答無用で非表示にします。

その結果、トップページの「おすすめ」タブには、何も表示されなくなります。まっさらな状態です。

メルカリトップページにある「閲覧した商品からのおすすめ」と「おすすめの商品」を非表示にした画像

「マイリスト」タブなどは、今まで通り表示されます。「おすすめ」タブ内のおすすめ商品だけ消します。もしかしたら、僕が知らない部分も消えている可能性があります。

メルカリトップページにある「マイリスト」タブ画像

商品詳細ページのおすすめ欄は消えませんでした。ここも消したい場合は、以下のCSSを追加で書き込みます。あんまり検証していないので、うまく動作しない可能性もあります。

/*商品詳細ページの「この商品を見ている人におすすめ」非表示*/
div#item-grid:has(a[data-location^="item_details:recommended_items"]) {
  display: none !important;
}

僕の環境では、非表示になりました。「この商品を見ている人におすすめ」という文字は残りました。手間なのでそのままにしています。消そうと思えば消せます。

メルカリ商品詳細ページにある「この商品を見ている人におすすめ」を非表示にした画像

感想

以上、PCウェブサイト版「メルカリ」のトップページに表示される「閲覧した商品からのおすすめ」や「おすすめの商品」項目を消す方法（CSS）でした。

以下の記事も役立つかもしれません。

​​Stylebot&Stylus(CSS)