【TVer】サムネイルと動画プレーヤーを角丸にするCSS

​​Stylebot&Stylus(CSS)

「TVer（ティーバー）」のアイコン

この記事では、民放テレビ配信サービス「TVer（ティーバー）」の動画プレーヤーとサムネイルを角丸にするCSSについて書きます。

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

【TVer】サムネイルと動画プレーヤーを角丸にするCSS

本記事で紹介するCSSを使えば、「TVer（ティーバー）」の動画の四隅を、任意の角丸具合に変更できます。

通常は、以下のようになっていて、カクカクです。僕は、角丸が好きなので、カクカクを排除することにしました。サムネイルは、元々角丸ですが、もっと角丸にできます。

通常の「TVer（ティーバー）」の動画プレーヤー画像

「Stylebot（スタイルボット）」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

「Stylebot」のインストール手順画像

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

角丸にするCSS

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

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

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

/*動画プレーヤーを角丸化*/
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」のままでも、結構な角丸になると思います。動画プレーヤーとサムネイルの角丸を別々にすることも可能です。

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

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

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

これで、動画プレーヤーが指定した角丸サイズになります。柔らかい印象になっていい感じです。ただし、動画の端っこが、その分見切れるので、角丸のしすぎには注意です。

「TVer（ティーバー）」の動画プレーヤーを角丸にした画像

サイドバーにある関連動画などのサムネイルは、元々角丸ですが、CSSを使って、より角丸にしています。デフォルトでは、「4px」になっていました。

「TVer（ティーバー）」のサムネイルを角丸にした画像

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

感想

以上、民放テレビ配信サービス「TVer（ティーバー）」で、動画プレーヤー・及びサムネイルを角丸にするCSSでした。

実を言うと、僕はテレビを見ないので、あまり恩恵がありません。本日（2022年12月18日）、M-1グランプリ 2022年があるので、そのためだけに「TVer」を開いています。

​​Stylebot&Stylus(CSS)