【ABEMA】動画タイトルを全部表示するCSS

Stylebot&Stylus(CSS)

「ABEMA」のアイコン

この記事では、インターネットテレビサイト「ABEMA(アベマ)」の動画タイトルを省略せずに、全部表示するCSSを書きます。

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

【ABEMA】動画タイトルを全部表示するCSS

本記事で紹介するCSSを使えば、「ABEMA」のサムネイル下にある動画タイトルを省略せずに全部表示できます。

通常は、1行だけになっていて、それ以降は「…」で省略されます。見切れるのが嫌だという方、参考にしてみてください。いつでもオンオフできます。

「ABEMA」のサムネイル下にあるタイトルのスクリーンショット

本記事は、PCユーザー向けです。スマホではできません。「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

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

Stylebot - Chrome ウェブストア

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

ABEMA動画タイトルを100%表示する手順

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

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

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。

/*タイトル全部表示*/
.com-feature-area-CardItem .com-a-CollapsedText__container {
  overflow: visible !important;
  text-overflow: clip !important;
}

/*サムネイル下の高さ部分*/
.com-feature-area-LiveEventCardItem__details,
.com-feature-area-SlotCardItem__details,
.com-feature-area-EpisodeCardItem__details {
  height: auto !important;
}

/*サブタイトルの位置調整*/
.com-feature-area-LiveEventCardItem__start-at-wrapper,
.com-feature-area-SlotCardItem__start-at-wrapper,
.com-feature-area-EpisodeCardItem__title,
.com-feature-area-ViewingInProgressItem__newest-label {
  margin-top: 3em !important;
}

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

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

タイトルが改行されて、全部表示されます。省略されません。

「ABEMA」の動画タイトルを全部表示した画像

オンオフしたGIF画像を貼っておきます。サブタイトルがある場合、タイトルと被らないよう「サブタイトルの位置調整」の「margin-top」で調整しています。もし被る場合は、もう少し数字を大きくしてみてください。

「ABEMA」の動画タイトルを全部表示する前と後の比較画像

1つ注意点があって、動画タイトルによっては、無料・プレミアム作品といった表記と被る場合があります。「まぁ稀にだし、いっか」と放置しています。

サブタイトルと無料の表記が被っている画像

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

感想

以上、「ABEMA(アベマ)」で、動画タイトルを全部表示するCSSでした。

ABEMA関連の記事は他にも書いています。気になった方は、サイト内検索で調べてみてください。

Stylebot&Stylus(CSS)