【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 サイトのみ設定できます。

スマホでは設定できません。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。

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

まだインストールしていない方は、以下の記事を参考にしてみてください。

ポイント

Vivaldi ブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。

こちらは、ウェブパネル内にもCSSを適用できます。

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つのアイテム非表示)

「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を非表示にする方法についてでした。

Posted by ナポリタン寿司