【プライムビデオ】プレーヤーのタイトルを全部表示するCSS

2022年9月4日Stylebot&Stylus

Amazonプライムビデオのアイコン

この記事では、「Amazonプライムビデオ」で再生中の時に、表示されるタイトルを、「…」で省略せずに、全部表示するCSSについて書きます。

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

プライムビデオのサブタイトルを全部表示したイメージ画像

本記事で紹介するCSSを使えば、「Amazonプライムビデオ」の動画プレーヤー内に表示されるタイトル、およびサブタイトルを100%表示にできます。

2行に分かれて、全部表示されます。おまけで、1行で全部表示するコードも紹介します。全部表示することで、再生中に、どんなサブタイトルなのか一発で分かります。

プライムビデオでアニメやドラマを見ていると、メインタイトルの下に、サブタイトルが表示されますが、長いサブタイトルだと、最後のほうが「…」で省略されてしまいます。

サブタイトルとは、例えば、NARUTO(ナルト)「第20話 必殺!手裏剣ブーメラン炸裂!」といった感じの「第〇話 〇〇〇!」の部分に当たります。

僕は、今ワンピースをめちゃくちゃ見返しているのですが、「シーズン6、エピソード10 第〇〇〇話」でいっぱいになってしまい、肝心のサブタイトルがほぼ見えません。

ワンピースのサブタイトルが「…」記号で省略されている画像

これ、普通に不便ですよね。「しっかり見たいのに…!」ということで、CSSを使うことで全部表示してみます。いつでも元に戻せます。誰にも迷惑をかけません。CSSといっても、当記事で紹介しているコード(文字列)をコピペするだけです。

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

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

CSS

Amazonプライムビデオにアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

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

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

/*プライムビデオのタイトルを省略せずに全部表示*/
/*タイトル(例:映画のタイトル)*/
h1[class*="title-text"],
/*サブタイトル(例:アニメやドラマなどの第〇話)*/
h2[class*="subtitle-text"] {
  line-height: 1em;
  margin: auto;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

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

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

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

長文のサブタイトルがあるアニメやドラマを再生します。ちょーど良い作品が見つからないという方は、「ワンピース」で試してみてください。

無事に、タイトルが全部表示されます。2行に改行されて、「…」で省略されなくなります。中央揃えです。

プライムビデオのサブタイトルを省略せずに全部表示した画像
「2行にしたくない!1行にしてほしい!」という方へ

複数行に分けたくない場合は、追加で以下のコードを書き込んでください。

/*2行ではなく、1行にするコード*/
.f3xx7hl {
    max-width: none;
}

1行で表示されます。

サブタイトルを複数行ではなく、1行にした画像

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

注意点ですが、僕はCSS初心者です。動画プレーヤー上のタイトル・サブタイトルだけでなく、別の場所も変更されている可能性があります。その場合、お手数ですが、問い合わせより連絡いただければ幸いです。

感想

以上、プライムビデオの動画プレーヤー内にあるタイトル、およびサブタイトルを省略せずに全部表示するCSSでした。

僕、プライムビデオ大好きマンです。

Posted by ナポリタン寿司