【ZOZOTOWN】検索結果に表示されるPR広告を非表示にする方法
CSSを使うことで、ZOZOTOWNの検索結果ページに表示されるPR商品（広告）を非表示にできます。具体的には、何かの単語で検索した時に、表示される1行目の5つのPR商品のことです。
PRかどうかは、商品画像（サムネイル）の左上を見たらわかります。「PR」と表示されていれば、広告ということになります。
CSSで、この部分を非表示にすることで、純粋な検索結果のみを表示できます。PRに戸惑わされることなく、快適なショッピングができます。
いつでもオンオフ切り替えできます。
ZOZOTOWNのPR商品って自分が興味ありそうな絶妙なラインの商品を提示してきますよね。ついつい見たくなりますよね。（こういうのなんていうんでしたっけ。レコメンド広告？ターゲティング広告？）
本記事の方法は、PCサイトのみ設定できます。スマホでは設定できません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
ZOZOTOWNのPR商品を消すCSS
適当にZOZOTOWN内で検索して、どのようにPR商品が表示されるか確認してみます。試しに、「ピアス（片耳用）メンズ」のカテゴリーで検索してみました。
検索結果の1行目に5つのPR商品が表示されています。並び替え、形状などの絞り込みをしても、必ず1行目は広告です。確認できたら、早速CSSを書き込みます。
ZOZOTOWN上で、拡張機能の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です。右上の「×」をクリックして、スタイルシートを閉じます。
再度Stylebotアイコンをクリックして、「zozo.jp」がオンになっていることを確認します。オンになっている間は、有効になっています。無効化したい場合は、オフにします。
PR商品がごっそり非表示になります。
ピアス以外のカテゴリーや、検索結果のPR商品も表示されません。
注意点ですが、上記コードは5列表示の時のみ有効です。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商品が表示されなくなります。
3列と5列のCSS両方使うこともできます。どっちのレイアウトになってもいいように、両方追加しておくといいかなと思います。改行して追加で書き込むだけです。
感想
以上、ZOZOTOWNの検索結果に表示されるPRを非表示にする方法についてでした。
ZOZOTOWN、見ているだけで楽しいですよね。色々服が欲しくなってしまいます。