【Stylebot】プライムビデオの視聴者を非表示にするCSS

Stylebot&Stylus

Stylebotのアイコン

この記事では、Amazonプライムビデオの右上にある「視聴者」の名前を非表示にするCSSについて書きます。

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

【Stylebot】プライムビデオの視聴者を非表示にするCSS

Amazonプライムビデオの右上にある「視聴者」の名前を非表示にするCSSです。

プライムビデオ上で、スクリーンショットを撮影する方におすすめです。名前を非表示にするので、うっかり本名が映っちゃう心配がありません。名前だけをピンポイントで非表示（透明）にするので、ドロップダウンリストなどのメニューにはアクセスできます。

マウスホバーで表示するコードも合わせて紹介します。CSSなので、オンオフもワンクリックでできます。

「毎回、スクショして、モザイクかけるのが手間…」という方、ぜひ試してみてください。

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

合わせて読みたい

Amazonのショッピングサイト上の名前、郵便番号を非表示にしたい場合は、下記記事を参考にしてみてください。

同じように、Amazonでスクリーンショットする方におすすめです。本記事のCSSと併用することも可能です。

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能です。

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

Firefoxをご利用の場合

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

Firefoxをご利用の方は、以下のFirefoxアドオンストアからインストールできます。

「Firefoxへ追加」をクリックします。

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

CSS

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

アクセスしたらCSSを書き込んでいきます。Stylebotを使っている人は、右上の拡張機能アイコン→Stylebotを開くをクリックします。

拡張機能ボタン　Stylebotを開く

Firefoxで、Stylusを使っている方は、右上の拡張機能アイコン→「次のスタイルを書く」の「www.amazon.co.jp」をクリックします。

新しいタブでスタイルシートが表示されるので、書き込んでいきます。書き込めたら、忘れずに「保存」をクリックします。

書き込むコードは、以下になっています。Stylebot、Stylusどちらも一緒です。

/*Amazonプライムビデオの視聴履歴を非表示にするCSS*/
span.profiles-dropdown-name {
  opacity: 0;
}

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

「Amazonプライムビデオの視聴履歴を非表示にするCSS」を書き込む　Stylebot

書き込んだら、瞬時に反映されます。視聴者の下にあった本名が非表示になります。

CSS導入前と導入後の比較画像　プライムビデオの視聴者名が非表示になる

「視聴者」と、その横の矢印アイコンはそのままにするので、「アカウントの切り替え」、「プロフィールを編集」などがあるドロップダウンメニューにはアクセスできます。

プライムビデオの視聴者のドロップダウンメニューの展開画像

マウスを乗せた時は表示する

マウスを乗せた時に表示させたい場合、以下のコードになります。

/*Amazonプライムビデオの視聴履歴を非表示にするCSS（ホバー時に表示）*/
span.profiles-dropdown-name:not(:hover) {
  opacity: 0;
}

普段は非表示、マウスを乗せた時だけ表示します。

マウスホバーで視聴者名を表示するコードを適用した動画

感想

以上、プライムビデオの視聴者名を非表示にするCSSについてでした。

モザイクかける手間が省けます。僕なんかは本名出しているので、困らないんですけどね。

Posted by ナポリタン寿司