【プライムビデオ】レビューを非表示(削除)するCSS

2022年2月13日Stylebot&Stylus

Amazonプライムビデオのアイコン

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

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

プライムビデオのレビュー(星)を非表示にするイメージ画像

本記事で紹介するCSSを使えば、「Amazonプライムビデオ」のレビューを非表示にできます。星とレビュー件数の両方です。

以下の2か所にある星レビュー(星)を非表示にします。

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

CSSで非表示にしているだけなので、いつでもオンにできます。CSSといっても、本記事のコード(文字列)をコピペするだけでOKです。初心者でもできると思います。誰にも迷惑をかけません。

プライムビデオでは、各映像に対して、視聴者が満足度をつけられる「レビュー(星)」という制度が設けられています。コンテンツの詳細ページのタイトル下にあります。

プライムビデオのスクリーンショット(モンスターハンター)

映画やアニメを見る前に、周りの評価を簡易的にチェックできる便利な機能ですが、人によっては邪魔かもしれません。

「評価が見えてしまうと、見る前にがっかりする!萎える!」、「もっと自分の直感で、映画やドラマを楽しみたい!評価邪魔!」って思っている、そこのあなたです!(ドン)

僕は、ある程度レビューを信用しているので、ありがたく見るかどうかの判断材料にしています。(なんじゃそりゃw)

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

本編を見る前に、レビューが目に入ってしまうと、どうしても頭の片隅に、「あぁ、これ低評価ばっかりだったなぁ」とバイアスがかかってしまいますよね。その気持ちは、確かに理解できます。

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

詳細のレビュー欄は、これまで通り表示するので、映画見終わった後に見る、見る前にちょっと確認する…といったことは可能です。おまけで、レビュー欄自体削除するコードも紹介します。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

CSS

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

Amazonプライムビデオ」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

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

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

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.amazon.co.jp)がオンになっていることを確認します。オンになっている間は有効になっているということです。

動画詳細ページのタイトル下にある星とレビュー件数が非表示になります。比較画像を貼っておきます。

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

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

サムネイルホバー時のポップアップ内レビューを非表示にする前と後の比較画像

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

【ポイント】詳細の「レビュー欄」は表示される

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

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

プライムビデオの詳細ページのレビュー画像

「詳細」を押さない限りは表示されないので、非表示にしなくてもいいかなぁと思いました。「いやいや、ここも非表示にしたいんだ!」という方は、こちらを参考にしてみてください。

余談ですが、Amazonショッピングでは、これまで通り表示されます。プライムビデオ上だけです。

Amazonショッピングのレビュー画像

一時的に無効化したい場合は、Stylebot→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

Stylebotのスクリーンショット3

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

「非表示にするのは、さすがに嫌だ!」って方は、ホバー時(マウスを乗せたとき)だけ表示する…なんてのはいかがでしょうか。

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

/*プライムビデオレビュー非表示*/
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;
}

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

ホバー時にレビューを表示してみたGIF画像

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

Stylebotのスクリーンショット4

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

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

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

「詳細のレビュー欄も非表示にしたい!プライムビデオのレビューなんて二度と見たくねぇ!」という方は、こちらのコードを追加で利用してみてください。上記で紹介したコードとセットで利用します。

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

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

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

感想

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

プライムビデオ関連の記事は、他にも書いているので、参考にしてみてください。個人的には、関連動画を複数行表示にするのがちょーおすすめです。マジで。

Posted by ナポリタン寿司