【ABEMA】動画とサムネイルを好きな角丸にするCSS

Stylebot&Stylus(CSS)

「ABEMA」のアイコン

この記事では、インターネットテレビサイト「ABEMA(アベマ)」の動画サムネイルと動画プレーヤーを任意の角丸具合にするCSSを書きます。

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

【ABEMA】動画とサムネイルを好きな角丸にするCSS

本記事で紹介するCSSを使えば、「ABEMA」の動画プレーヤーとサムネイルを、自分好みの角丸にできます。デフォルトでも多少角丸になっていますが、もっと角丸にできます。角丸が好きな方、参考にしてみてください。

CSSなので、いつでもオンオフでき、誰にも迷惑をかけません。PCユーザー向けです。スマホではできません。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

角丸にする手順

ABEMA」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

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

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

/*動画サムネイルの角丸具合*/
.com-m-Thumbnail {
  border-radius: 20px !important;
}

/*動画プレーヤー(アーカイブ)の角丸具合*/
.com-vod-VODMiniPlayerWrapper {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/*動画プレーヤー(テレビ)の角丸具合*/
.com-tv-TVScreen__player-container {
  border-radius: 20px !important;
  overflow: hidden !important;
}

下記画像のようになればOKです。「border-radius」が角丸具合です。ここの数字を大きくすることで、好きな角丸にできます。逆にカクカクが良い場合は、「0」にします。

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

右上の「×」でスタイルシートを閉じます。

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

動画のサムネイルが任意の角丸具合になります。エピソード一覧、サイドバーの人気・注目動画などが対象です。

「ABEMA」の動画サムネイルを角丸にした比較画像

動画プレーヤーの四隅も角丸になります。サムネイルと動画プレーヤーで、別々の角丸具合にすることも可能です。

「ABEMA」の動画プレーヤーを角丸にした画像

現在放送中のテレビ番組も角丸になります。

テレビチャンネルを角丸にした画像

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

感想

以上、「ABEMA(アベマ)」で、動画の四隅を好きな角丸具合にするCSSでした。

角丸関連の記事は、他にも書いているので、サイト内検索で参考にしてみてください。

Stylebot&Stylus(CSS)