【プライムビデオ】プレーヤーのタイトルを全部表示する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ウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/動画のタイトルを全部表示する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行に改行されて、「…」で省略されなくなります。中央揃えです。
複数行に分けたくない場合は、追加で以下のコードを書き込んでください。
/*2行ではなく、1行にするコード*/
.f3xx7hl {
max-width: none;
}1行で表示されます。
一時的に無効化したい場合は、Stylebot→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
注意点ですが、僕はCSS初心者です。動画プレーヤー上のタイトル・サブタイトルだけでなく、別の場所も変更されている可能性があります。その場合、お手数ですが、問い合わせより連絡いただければ幸いです。
感想
以上、プライムビデオの動画プレーヤー内にあるタイトル、およびサブタイトルを省略せずに全部表示するCSSでした。
プライムビデオ大好きマンです。