【ZOZOTOWN】検索結果に表示されるPR広告を非表示にする方法
CSSを使うことで、ZOZOTOWNの検索結果ページに表示されるPR商品（広告）を非表示にできます。具体的には、何かの単語で検索した時に、表示される1行目の5つのPR商品のことです。
PRかどうかは、商品画像（サムネイル）の左上を見たらわかります。「PR」と表示されていれば、広告ということになります。
CSSで、この部分を非表示にすることで、純粋な検索結果のみを表示できます。PRに戸惑わされることなく、快適なショッピングができます。
いつでもオンオフ切り替えできます。
ZOZOTOWNのPR 商品って自分が興味ありそうな絶妙なラインの商品を提示してきますよね。ついつい見たくなりますよね。（こういうのなんていうんでしたっけ。レコメンド広告？ターゲティング広告？）
本記事の方法は、PC サイトのみ設定できます。
スマホでは設定できません。
前提
この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
Vivaldi ブラウザを利用していて、サイドバーのウェブパネルにもCSSを適用したい場合は、「Stylus」がおすすめです。
こちらは、ウェブパネル内にもCSSを適用できます。
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です。
「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を非表示にする方法についてでした。