当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象（通称:ステマ規制）にならないよう、配慮して記事を作成しています（記事はこちら、消す方法はこちら）

参考：令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【SPOTV NOW】右上のログインしているユーザー名非表示CSS

Stylebot&Stylus(CSS)

No Image

この記事では、PCウェブサイト版「SPOTV NOW」でログインしている時、右上に表示されるアカウント名を消すCSSについて書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

【SPOTV NOW】右上のログインしているユーザー名非表示CSS

PCウェブサイト版「SPOTV NOW」にログインしていると、右上に現在ログインしているアカウント名が表示されます。僕の場合、「高橋輝様」という感じです。

PCウェブサイト版「SPOTV NOW」の右上に表示されるアカウント名の画像

本名はブログとかあちこちで公開しているので、特に問題ないんですが、人によってはプライバシー的にちょっと…と思うかもしれません。外出先で「SPOTV NOW」を見ている時に、第三者にちらっと見られるのが怖い…とかね。

僕の場合、本名はひっそり公開しているとはいえ、本記事のように「SPOTV NOW」に関する記事を書きたい時、キャプチャーするたび、ユーザー名が映ってしまうのが気になりました。

CSSを使えば、サクッと見えないよう自身の環境上で隠せます。あくまでCSSを書き込んだブラウザ上だけの反映で、他の人には、影響しません。CSSを適用できるPCウェブサイト向けです。スマホのアプリ版ではできません。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

「Chromeに追加」をクリックしてインストールします。

Stylebot - Chrome ウェブストア

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

「SPOTV NOW」の右上に表示されるアカウント名を消すCSS

「SPOTV NOW」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。

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

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*右上のユーザー名非表示*/
p.icon.user>span {
    opacity: 0 !important;
}

/*ユーザー名をクリックした時のポップアップ内の名前非表示*/
p.icon.user+.user-menu>.user-name {
    opacity: 0 !important;
}
注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

書き込めたら、右上の「×」でスタイルシートを閉じます。

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

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

「SPOTV NOW」にログインしても、ユーザー名が表示されなくなります。その部分を完全抹消しているわけではなく、「opacity」で、表面上見えないようにしているだけです。

PCウェブサイト版「SPOTV NOW」の右上に表示されるアカウント名をCSSで消した画像

クリック判定はこれまで通りあります。クリックするとポップアップが表示されます。この中にも、でかでかと本名が映っていますが、上記で紹介したCSSの2つ目を書き込むことで、一緒に消えます。

PCウェブサイト版「SPOTV NOW」の右上に表示されるアカウント名をクリックした時のメニュー内から名前を消した比較画像

一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.spotvnow.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

【余談】動画プレーヤーホバー時の黒いグラデーションを無効化するCSS

通常、PCウェブサイト版「SPOTV NOW」の動画プレーヤーの上にマウスを置くと、下部からプログレスバーと同時に、黒い帯みたいなのが表示されます。

PCウェブサイト版「SPOTV NOW」の動画プレーヤー画像

暗くなるのを防いで、バーだけ表示させたい場合は、以下の記事を参考にしてみてください。同じくCSSを利用します。

【余談】動画プレーヤーを角丸にしたい場合

以下の記事を参考にしてみてください。

【余談】Amazonのユーザー名や郵便番号を隠すCSS

以下の記事を参考にしてみてください。

感想

以上、PCウェブサイト版「SPOTV NOW」でログインしている時、右上に表示されるアカウント名（ユーザー名）を見えないよう隠すCSSでした。

余談ですが、僕はサッカーのプレミアリーグやFAカップを見るために加入しています。面白すぎます。

「SPOTV NOW」関連で、「ここも消したい！」などの要望がある場合、問い合わせていただけたら、もしかしたら対応…するかもしれません。ただし、僕は初心者なので、できないことのほうが多いと思います。

Stylebot&Stylus(CSS)