【TVer】動画マウスホバー時に暗くさせないようにするCSS

2024年1月2日2024年8月18日Stylebot&Stylus(CSS)

この記事では、民放テレビ配信サービス「TVerティーバー」で、動画プレーヤーにマウスを置いた時、シークバー周りが暗くなるのを防ぐCSSを書きます。

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

PCウェブサイト版「Tverティーバー」で、動画プレーヤーの上にマウスを置くと、コントロールバー（シークバーや操作ボタン）が出てきます。この時、ボタンや進行時間を確認しやすいようコントロールバー周辺が暗くなる仕様になっています。

GIF画像も貼っておきます。マウスを置くとふわっと下らへんが暗くなります。

グラデーションがないとボタンやシークバーが動画の背景と同化してしまい操作しにくいと思います。しかし、人によっては視認性よりも動画が暗くなるのが許せないと思うかもしれません。

CSSを利用することで自身の環境上（見た目）だけで、グラデーションを無効化（削除）できます。動画が暗くならなくなります。他人には全く影響しないので、誰かに迷惑をかける心配もありません。自分のPC上だけです。いつでもオンオフできます。

完全な削除ではなく、ちょっと色を薄める方法も紹介します。本記事は拡張機能を導入できるPCブラウザ向けの内容です。スマホやタブレットのアプリ版ではできません。

1. インストール方法
2. 「TVer」の動画プレーヤーにマウスを置いた時、暗くさせないCSS
3. グラデーションの色を薄めるCSS
4. 「Tver」関連の他記事紹介
5. 「Tver」以外のサービスで動画プレーヤーを暗くさせない方法
6. 感想

インストール方法

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

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

Stylebot

Change the appearance of the web instantly

https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...

「Chromeに追加」をクリックします。

「拡張機能を追加」をクリックします。

拡張機能のオーバーフローメニューに追加されたらOKです。

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

「TVer」の動画プレーヤーにマウスを置いた時、暗くさせないCSS

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

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

以下のコードを書き込みます。完全な削除ではなく色を薄めたい方は、こちらのCSSを使ってみてください。

/*動画プレーヤーのマウスホバー時に暗くなるグラデーション仕様削除*/
div[class^="controller_container" i]:before {
    background: none !important;
}

注意点

僕は、普段「TVer」を利用しないので、いつの間にかコードが使えなくなっていても、気づかない可能性が高いです。もし使えなくなっていた場合は、お手数ですが、問い合わせより連絡いただければ幸いです。

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

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

「Tver」の動画を再生して、マウスをプレーヤー上に置きます。コントロールバーが出てきますが、CSS導入後はいつものグラデーションはでてきません。動画が明るいままです。

「Tver」の動画プレーヤーにマウスを置いた時表示される暗い装飾をCSSで消した画像

いちおライブ配信（リアルタイム）と見逃し配信の両方で確認してみましたが、動画の種類によってはCSSが適用されないかもしれません。「こういった動画だと適用されなかった！」というのを見つけた場合、教えていただければ修正するかもしれません。

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

グラデーションの色を薄めるCSS

上記で紹介した完全削除のCSSだと、動画の状況によって操作ボタンや進行状況の時間が見えにくくなります。特に動画の背景が白色だった場合、ほぼ何も見えません。操作しにくいです。

「Tver」の動画プレーヤーにマウスを置いた時表示されるグラデーションをCSSで薄くした画像1

進行状況の時間や各種ボタン周りだけ背景色を付けたり、テキストに影を付けたり、色々対処法は考えられますが、本記事ではグラデーションを弱くするCSSを紹介します。以下になります。

/*動画プレーヤーのマウスホバー時に暗くなるグラデーションを薄める*/
div[class^="controller_container" i]:before {
    height: 34px !important;
    background: linear-gradient(0deg, #0d192b7a 0, #0e171f00) !important;
}

完全削除のCSSと併用しても意味がないので、どちらかだけを利用します。適用すると、グラデーション自体は表示されて、うっすら暗くなりますが、デフォルトより目立たなくなります。各種ボタンの視認性をぎりぎり保った状態で、かつ動画の邪魔にならない範囲だと思います。

「Tver」の動画プレーヤーにマウスを置いた時表示されるグラデーションをCSSで薄くした画像2

「height」がグラデーションの高さです。動画の下部分からどのくらいまで、グラデーションを伸ばすか？の設定です。数値を小さくすると、その分高さが縮まります。

「background」が暗いグラデーションの正体です。色を薄くできます。本記事ではあまり詳しく書きませんが、分かる方は好きな色や透明度に調整してみましょう。上記のサンプルCSSは、若干デフォルトより薄めた色にしています。

「Tver」関連の他記事紹介

他にも「Tver」関連の記事を書いています。気になった方は、当サイトのサイト内検索等を活用してみてください。

2023年11月から、お気に入りページの視聴済み動画を非表示にする機能が廃止されましたが、有志の方が作成してくださったスクリプト「Remove watched programs for TVer」を利用することで、強制的に視聴済みの動画を非表示にできます。

見逃し配信動画は「Picture-in-Picture Extension」でピクチャーインピクチャーにできますが、現在進行形で配信されているライブ動画はピクチャーインピクチャーにできません。別の拡張機能を利用することで、疑似的にピクチャーインピクチャー化できます。

「Tver」以外のサービスで動画プレーヤーを暗くさせない方法

いくつか他のサービスについても、暗くなるグラデーションを無効化する記事を書いています。同じくCSSを利用します。気になるサービスがあればクリックして確認していただけると嬉しいです。

感想

以上、民放テレビ配信サービス「TVerティーバー」で、動画プレーヤーにマウスを置いた時、動画の下部分を暗くさせないようにするCSSでした。

2024年1月2日2024年8月18日Stylebot&Stylus(CSS)

Posted by ナポリタン寿司