【Amazonプライムビデオ】レビューを非表示にするCSS

Stylebot&Stylus

Stylebotのアイコン

この記事では、プライムビデオのレビュー評価を非表示にするCSSについて書きます。

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

【Amazonプライムビデオ】レビューを非表示にするCSS

プライムビデオのレビューを非表示にするCSSです。星とレビュー件数をごっそり抹消します。

CSSを適用すると、以下の2か所にある星レビュー(星)が非表示になります。

  • サムネイルをホバーした時に表示されるポップアップ内
  • 動画詳細ページ

CSSで非表示にしているだけなので、いつでもオンにできます。

「評価が見えてしまうと、見る前にがっかりする!萎える!」、「もっと自分の直感で、映画やドラマを楽しみたい!」って方におすすめです。

レビューを非表示にして、完全に初見で映画を見ると、何か新しい発見があるかもしれません。

本編を見る前に、レビューが目に入ってしまうと、どうしても頭の片隅に「あぁ、これ低評価ばっかだったなぁ」と思っちゃいますよね。

もっと純粋な気持ちで、プライムビデオのコンテンツを堪能したい方、ぜひ試してみてください。評価疲れした方にもおすすめです。

詳細のレビュー欄は、これまで通り表示するので、映画見終わった後に見る、見る前にちょっと確認する…といったことは可能です。

前提

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

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

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

ポイント

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

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

CSS

プライムビデオにアクセスします。

ツールバーにあるStylebotのアイコンアイコンをクリックします。

「Stylebotを開く」をクリックします。

拡張機能アイコン Stylebotを開く

スタイルシートが表示されるので、CSSを書き込んでいきます。

書き込むコードは、以下になっています。

/*【レビュー非表示】動画詳細ページ*/
a[data-automation-id="customer-review-badge"] {
  display: none !important;
}

/*【レビュー非表示】サムネイルホバー時のポップアップ*/
.tst-hover-customer-reviews {
  display: none !important;
}

以下画像のようになればOKです。

プライムビデオのレビューを非表示にするCSS

記入すると、ページをリロードしなくても評価(レビュー)が非表示になるはずです。

ならない場合は、ページをF5でリロードしてみてください。

動画詳細ページのタイトル下にある星とレビュー件数が非表示になります。

レビュー(評価)非表示CSSの導入前と導入後の比較画像
参考:グリーン・インフェルノ (吹替版)

トップページの動画サムネイルをホバー(マウスを乗せた時)した時に表示されるレビューも非表示になります。

サムネイルホバー時のポップアップ内のレビューも非表示になる

「評価、時間、公開日」から、「時間、公開日」のみの表記になります。

あくまで、サムネイルホバー時のポップアップ内、動画詳細ページのタイトル下にある評価のみの非表示です。

動画詳細ページを下にスクロールして、「詳細」をクリックした時は、通常通りレビューが表示されます。

動画詳細ページ 詳細のレビューは確認できる

Amazon ショッピングでは、これまで通り表示されます。

Amazonショッピングのレビューは、これまで通り表示される

オフにする

Stylebot アイコンをクリックして、「www.amazon.co.jp」をオフにします。

Stylebot 「www.amazon.co.jp」をオフ

これまで通り、星レビューが表示されます。

これまで通り星が表示される

ホバー時に表示するように調整

「非表示にするのは、さすがに嫌だ!」って場合は、ホバー時(マウスを乗せたとき)だけ表示するようにしてみましょう。

上記で紹介したコードではなく、以下のコードを利用してみてください。

/*プライムビデオレビュー非表示*/
a[data-automation-id="customer-review-badge"],
.tst-hover-customer-reviews {
  opacity: 0 !important;
}

/*プライムビデオレビュー非表示、ホバー時に表示*/
a[data-automation-id="customer-review-badge"]:hover,
.tst-hover-customer-review:hover {
  opacity: 1 !important;
}

普段は非表示、マウスを乗せたときだけ、ひょこっと表示されるようになります。

トップページのサムネイルホバー時のポップアップについては、ホバーしても表示されませんでした。僕の技術不足です。

ホバー時にレビュー表示CSSは、ポップアップ内では動作しなかった

多分ですが、ポップアップが表示される時が既にホバー状態なので、上書きできないのかなぁと思います。もう少し調べれば何とかなるかもしれませんが、とりあえずは放置しています。

分かる方いらっしゃいましたら、コメント欄にて教えていただければなと思います。

詳細のレビュー欄も非表示にする

「いや、詳細のレビュー欄も非表示にしたいんだ!」という方向けです。

/*動画ページ下の「詳細」レビューを非表示*/
div[data-testid="customer-review-section"] {
  display: none !important;
}

上記CSSを適用すると、動画ページ下の「詳細」をクリックしても、星の数どころか、レビューの内容自体が非表示になります。

詳細レビューも非表示にするCSSの導入前と導入後の比較画像

感想

以上、プライムビデオのレビューを非表示にするCSSについてでした。

余談ですが、プライムビデオのUIを角丸フローティングにするCSSを、以下の記事で紹介しています。気になったら、合わせて参考にしてみてください。

さらに、本編を再生した時の冒頭に表示される別動画の予告編(広告)をスキップする拡張機能も紹介しています。頻繁に利用する方におすすめです。

Posted by ナポリタン寿司