【TVer】サムネイルと動画プレーヤーを角丸にするCSS
この記事では、民放テレビ配信サービス「TVer（ティーバー）」の動画プレーヤーと、サムネイルを角丸にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。
本記事で紹介するCSSを使えば、PCウェブサイト版「TVer（ティーバー）」の動画の四隅を、任意の角丸具合に変更できます。
通常は、下記画像のようになっていてカクカクです。僕は角丸が好きなので、カクカクを排除することにしました。サムネイルは元々角丸ですが、もっと角丸にできます。
CSSを利用します。CSSを適用することで、自身の環境上（見た目）だけでカスタマイズできます。他人には全く影響しないので、誰かに迷惑をかける心配はありません。自分のPC上だけです。いつでもオンオフできます。
本記事は、拡張機能を導入できるPCブラウザ向けの内容です。スマホやタブレットのアプリ版ではできません。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
拡張機能のオーバーフローメニューに追加されたらOKです。
頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。
詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/「TVer」の動画プレーヤーとサムネイルを角丸にするCSS
「TVer（ティーバー）」にアクセスします。右上にある「Stylebot」拡張機能アイコンを左クリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*動画プレーヤーを角丸化*/
video-js[aria-label="Video Player"],
div[aria-label="Video Player"] {
border-radius: 10px !important;
}
/*サムネイルの角丸化*/
img[class*="thumbnail-img"] {
border-radius: 10px !important;
}僕は、普段「TVer」を利用しないので、いつの間にかコードが使えなくなっていても、気づかない可能性が高いです。もし使えなくなっていた場合は、お手数ですが、問い合わせより連絡いただければ幸いです。
下記画像のようになればOKです。「border-radius」が角丸を意味しています。ここの数値を大きくすることで、より角丸になります。上記CSSの「10px」のままでも、結構な角丸になると思います。動画プレーヤーとサムネイルの角丸を、別々にすることも可能です。
書き込めたら右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：tver.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。
動画プレーヤーが指定した角丸サイズになります。柔らかい印象になっていい感じです。ただし、動画の端っこが、その分見切れるので、角丸のしすぎには注意です。
サイドバーにある関連動画などのサムネイルは、元々角丸ですが、CSSを使ってより角丸にしています。デフォルトでは、「4px」になっていました。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「tver.jp」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
お気に入りページから視聴済み動画を非表示にする方法
2023年11月から、お気に入りページの視聴済み動画を非表示にする機能が廃止されてしまいました。2023年12月時点で復活していません。
有志の方が作成してくださったスクリプト「Remove watched programs for TVer」を利用することで、強制的に視聴済みの動画を非表示にできます。
公式機能のように、素早くオンオフを切り替える…といったことはできませんが、視聴済み動画が不要な方は、試す価値があるかもしれません。詳しくは、下記記事を参考にしてみてください。
ライブ動画をピクチャーインピクチャーにする方法
見逃し配信されているアーカイブ動画は、「Picture-in-Picture Extension」拡張機能を使うことで、ピクチャーインピクチャーにできます。一方で現在進行形で配信されているライブ動画はピクチャーインピクチャーにできません。
ライブ配信動画を無理やりピクチャーインピクチャーにしたい場合は、ちょっとコツが必要です。詳しくは、下記記事を参考にしてみてください。別の拡張機能を利用します。
感想
以上、民放テレビ配信サービス「TVer（ティーバー）」で、動画プレーヤー・及びサムネイルを角丸にするCSSでした。
実を言うと、僕はテレビを見ないので、あまり恩恵がありません。本日（2022年12月18日）、M-1グランプリ 2022年があるので、そのためだけに「TVer」を開いています。（2023年12月追記→2023年も、M-1を見るためにお世話になりました）