【ZOZOTOWN】検索結果に表示されるPR広告を非表示にする方法

2022年2月19日Stylebot&Stylus

Stylebotのアイコン

この記事では、ZOZOTOWN内の検索結果ページに表示されるPR商品(広告)を非表示にするCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。

【ZOZOTOWN】検索結果に表示されるPR広告を非表示にする方法

CSSを使うことで、ZOZOTOWNの検索結果ページに表示されるPR商品(広告)を非表示にできます。具体的には、何かの単語で検索した時に、表示される1行目の5つのPR商品のことです。

PRかどうかは、商品画像(サムネイル)の左上を見たらわかります。「PR」と表示されていれば、広告ということになります。

ZOZOTOWNのPR商品

CSSで、この部分を非表示にすることで、純粋な検索結果のみを表示できます。PRに戸惑わされることなく、快適なショッピングができます。

いつでもオンオフ切り替えできます。

ZOZOTOWNのPR商品って自分が興味ありそうな絶妙なラインの商品を提示してきますよね。ついつい見たくなりますよね。(こういうのなんていうんでしたっけ。レコメンド広告?ターゲティング広告?)

ポイント

本記事の方法は、PCサイトのみ設定できます。スマホでは設定できません。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

ZOZOTOWNのPR商品を消すCSS

適当にZOZOTOWN内で検索して、どのようにPR商品が表示されるか確認してみます。試しに、「ピアス(片耳用)メンズ」のカテゴリーで検索してみました。

メンズのピアス(片耳用)ファッション通販 ZOZOTOWN
参考:メンズのピアス(片耳用)ファッション通販 ZOZOTOWN

検索結果の1行目に5つのPR商品が表示されています。並び替え、形状などの絞り込みをしても、必ず1行目は広告です。確認できたら、早速CSSを書き込みます。

ZOZOTOWN上で、拡張機能のStylebotのアイコンStylebotボタンをクリック→Stylebotを開くをクリックします。

Stylebotを開く

白紙のスタイルシートが表示されます。こちらに、以下のコードをコピペして、貼り付けます。

/*検索結果のPR商品非表示(正確には1行目の5つのアイテム非表示)*/
.p-search-list .o-grid-catalog.\--column-5 .o-grid-catalog__item:nth-child(-n+5) {
	display: none !important;
}

以下画像のようになればOKです。右上の「×」をクリックして、スタイルシートを閉じます。

検索結果のPR商品非表示(正確には1行目の5つのアイテム非表示)

再度Stylebotアイコンをクリックして、「zozo.jp」がオンになっていることを確認します。オンになっている間は、有効になっています。無効化したい場合は、オフにします。

「zozo.jp」がオンになっていればCSSが適用されている

PR商品がごっそり非表示になります。

PR商品が非表示になる

ピアス以外のカテゴリーや、検索結果のPR商品も表示されません。

どのジャンルにしてもPR広告が表示されなくなる
ポイント

注意点ですが、上記コードは5列表示の時のみ有効です。3列表示だとPR商品が表示されてしまいます。

3列表示(カラム)だとPR商品が表示されてしまう

3列表示で非表示にしたい場合は、以下のコードを利用しましょう。

/*検索結果のPR商品非表示(3列表示にしている場合)*/
.p-search-list .o-grid-catalog.\--column-3 .o-grid-catalog__item:nth-child(-n+3) {
	display: none !important;
}

3列表示でPR商品が表示されなくなります。

CSSを適用することで、3列表示でも広告が非表示になる

3列と5列のCSS両方使うこともできます。どっちのレイアウトになってもいいように、両方追加しておくといいかなと思います。改行して追加で書き込むだけです。

感想

以上、ZOZOTOWNの検索結果に表示されるPRを非表示にする方法についてでした。

ZOZOTOWN、見ているだけで楽しいですよね。色々服が欲しくなってしまいます。

Posted by ナポリタン寿司