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

2023年4月4日2024年10月6日Stylebot&Stylus(CSS)

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

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

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

どうやらここの閲覧履歴は消せないようです。新しい単語で検索して上書きするしかありません。

人によってはこの項目自体が不要かもしれません。僕の場合、スクリーンショットを撮影する時に過去閲覧した関連商品が映ってしまうのが少々恥ずかしいので消すことにしました。CSSを利用することで非表示にできます。

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

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

CSSを導入したブラウザ上での見た目を変えるだけです。他人には影響しません。自身が出品した商品を相手のおすすめ欄に表示させないようにする…といったものではありません。拡張機能を導入できるPCブラウザ専用で、スマホやタブレットのアプリ版ではできません。

1. インストール方法
2. メルカリの「閲覧した商品からのおすすめ」を消す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/

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

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

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

/*トップページの「閲覧した商品からのおすすめ」非表示（2024年10月修正）*/
main>div>div:not([class]):has(ul>li>a[data-location^="home:recommend"]) {
    display: none !important;
}

更新履歴・注意点

2023年9月に入ったころから多数本記事のCSSが使えなくなったと連絡をいただきました。僕の環境では上記CSSで問題なく非表示にできています。

どうやら一部アカウントのみで仕様変更しているようです。もし非表示にならない場合、以下のCSSのどれかを試してみてください。どちらかは自身の環境で使えるかもしれません。

main#main>div.merTabPanel>div:nth-last-child(2) {
    display: none !important;
}

main#main>div.merTabPanel>div:has([href*="/search?keyword=" i][data-location*="home:recommend:component:see_all" i]) {
    display: none !important;
}

main#main>div>section:has(a[data-location^="home:recommend"]) {
    display: none !important;
}

もし上記CSSの両方を試してもうまく非表示にならない場合、上記CSSの1番目を「Stylebot」に書き込んだ上で、「div:nth-last-child(2)」の部分を「div:nth-last-child(3)」といったように数字を前後に書き換えてみてください。

数字を変えることで非表示になった事例があります。

今回の厄介やっかいな点は、僕のメルカリでは特に仕様変更がされておらず、以前のCSSで問題なく消える点です。

「YouTube」などのサービスあるあるの一部アカウントからアップデートしていき、最終的に全ユーザーに反映させるパターンと同じで、メルカリも数日～数週間すれば新しい仕様変更が僕のアカウントにもくるだろうと思っていました。

しかし、待てど暮らせどきませんでした。そのため「閲覧した商品からのおすすめ」が非表示にならなくなった読者様からウェブサイトのHTMLファイルを送っていただき、僕のほうで解析して新しいCSSを作成する…という手順を踏んでいます。

僕の環境で使えなくなったらすぐにでも修正に取り掛かれますが、一部アカウントのみの変更となると、その方からHTMLファイルを送っていただかないと調べようがない状況です。

もし皆さんの環境で使えなくなった場合は、HTMLファイルを添付して問い合わせしていただけるとなるべく早く修正できるかもしれません。

ただHTMLファイルを送るということは右上のユーザー名とトップページに表示されている閲覧している商品が僕にばれてしまうというデメリットがあります。

以前までは「閲覧した商品からのおすすめ」に分かりやすいCSSのclass名（セレクタ）が用意されていたので簡単に消せていました。その方のHTMLでは丸々削除されていて、まるで「そう簡単に閲覧した商品からのおすすめを消せないようメルカリに対策された…」ような印象を受けました。

一部アカウントだけでそういった仕様変更がなされたことも謎です。まぁ色々思うことはありますが、本記事ではできる限り修正していけたらなと思います。初心者なのでいずれ限界はきそうです。

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

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

トップページから「閲覧した商品からのおすすめ」が消えると思います。

検索した単語ごとで表示されていましたが丸ごと消えます。「閲覧した商品からのおすすめ」の下部にあった「おすすめの商品」項目が上に詰めて表示されます。もし「いいね！」している商品があればそのタイルが一番上に表示されます。

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

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

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

「おすすめの商品」も一緒に消したい場合は以下のCSSを追加で書き込みます。

/*トップページの「おすすめの商品」非表示（2024年02月01日修正）*/
main>div>div[data-testid*="recommendation" i] {
    display: none !important;
}

「閲覧した商品からのおすすめ」を消すCSSと併用することで、トップページの「おすすめ」タブには「いいね！」した商品だけが表示されます。

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

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

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

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

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

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

メルカリ関連の他記事紹介

同じようにCSSを利用して、メルカリをちょっと快適にする記事をいくつか書いています。

感想

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

2023年4月4日2024年10月6日Stylebot&Stylus(CSS)

Posted by ナポリタン寿司

【Yahoo!知恵袋】右側サイドバーを丸ごと非表示にするCSS

「Logicool G ゲーミングマウスパッド(G840)」を買った話