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

この記事では、「Amazonプライムビデオ」で再生中の時に、表示されるタイトルを、「…」で省略せずに、全部表示するCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を使います。
本記事で紹介するCSSを使えば、「Amazonプライムビデオ」の動画プレーヤー内に表示されるタイトル、およびサブタイトルを100%表示にできます。
2行に分かれて、全部表示されます。おまけで、1行で全部表示するコードも紹介します。全部表示することで、再生中に、どんなサブタイトルなのか一発で分かります。
プライムビデオでアニメやドラマを見ていると、メインタイトルの下に、サブタイトルが表示されますが、長いサブタイトルだと、最後のほうが「…」で省略されてしまいます。
サブタイトルとは、例えば、NARUTO(ナルト)「第20話 必殺!手裏剣ブーメラン炸裂!」といった感じの「第〇話 〇〇〇!」の部分に当たります。
僕は、今ワンピースをめちゃくちゃ見返しているのですが、「シーズン6、エピソード10 第〇〇〇話」でいっぱいになってしまい、肝心のサブタイトルがほぼ見えません。

これ、普通に不便ですよね。「しっかり見たいのに…!」ということで、CSSを使うことで全部表示してみます。いつでも元に戻せます。誰にも迷惑をかけません。CSSといっても、当記事で紹介しているコード(文字列)をコピペするだけです。
Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
他にも、YouTubeやTwitchの動画タイトルを全部表示する記事を書いています。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
動画のタイトルを全部表示するCSS
「Amazonプライムビデオ」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。
/*プラムビデオのタイトルを省略せずに全部表示*/
/*タイトル(例:映画のタイトル)*/
h1[class*="title-text"],
/*サブタイトル(例:アニメやドラマなどの第〇話)*/
h2[class*="subtitle-text"] {
line-height: 1em;
overflow: visible;
white-space: normal;
}
下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

再度拡張機能ボタンを押して、登録したサイト(例:www.amazon.co.jp)がオンになっていることを確認します。オンになっている間は有効になっているということです。
長文のサブタイトルがあるアニメやドラマを再生します。ちょーど良い作品が見つからないという方は、「ワンピース」で試してみてください。
無事に、タイトルが全部表示されます。2行に改行されて、「…」で省略されなくなります。中央揃えです。

一時的に無効化したい場合は、Stylebot→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
注意点ですが、僕はCSS初心者です。動画プレーヤー上のタイトル・サブタイトルだけでなく、別の場所も変更されている可能性があります。その場合、お手数ですが、問い合わせより連絡いただければ幸いです。
感想
以上、プライムビデオの動画プレーヤー内にあるタイトル、およびサブタイトルを省略せずに全部表示するCSSでした。
プライムビデオ大好きマンです。