【プライムビデオ】関連タイトルを複数行表示にするCSS

2022年6月9日Amazonサービス

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

この記事では、「Amazonプライムビデオ」の動画下に表示される関連タイトルのビデオを1行ではなく、複数行にするCSSについて書きます。

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

プライムビデオの関連タイトルを、1行表示から複数行表示に変更したイメージ画像

本記事で紹介するCSSを使えば、「Amazonプライムビデオ」の関連タイトルを、1行から複数行表示に変更できます。複数行にすることで、1ページ目に全ての関連タイトルが表示されて、一目でサムネイルを確認しやすくなります。

デフォルトだと、1行で表示されていて、次の関連タイトルを見ようと思ったら、右端にある右向き矢印をクリックする必要があります。1ページに表示されているタイトルは、大体4~5タイトルで毎回矢印をクリックしないといけないので、見にくいし、手間です。

プライムビデオの「関連タイトル」のスクリーンショット

CSSを使うことで、無理やり1ページ全てに収めることができます。矢印をクリックしなくても、複数行でずらっと全てを確認できます。より良いプライムビデオライフを過ごすためには、必須の内容となっています。

「プライムビデオ頻繁に見るけど、関連タイトルが見にくい!」という方、ぜひ参考にしてみてください。

インストール方法

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

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

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

Stylebot - Chrome ウェブストア

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

関連タイトルを複数行のタイル表示にするCSS

作品詳細ページだけで動作するスタイルシートを作成する

今回は、Amazon上ではなく、Amazonの中でもプライムビデオの作品詳細ページだけに適用します。インストールした拡張機能アイコンを右クリック→「オプション」をクリックします。

「Stylebot」のオプションを開く手順画像

スタイル→「新しいスタイルを追加」をクリックします。

Stylebotにワイルドカードを使ったURLを指定する手順画像1

2つのテキストボックスが表示されます。上部のテキストボックスに、CSSを適用したいURL、2つ目のテキストボックスにCSSを書き込みます。

Stylebotにワイルドカードを使ったURLを指定する手順画像2

今回は、Amazonプライムビデオの作品詳細ページだけに適用したいので、URLは「**www.amazon.co.jp/gp/video/**」になります。

**www.amazon.co.jp/gp/video/**

これで、Amazonショッピングサイトでも、プライムビデオのトップページでもなく、プライムビデオの作品詳細ページだけに適用されます。「**」が、任意の1文字以上という意味です。URLの一部に「www.amazon.co.jp/gp/video/」が含まれている場合に発動するという意味です。

「Stylus(スタイラス)」拡張機能を利用している場合

「Stylebot」では、ワイルドカードで指定しますが、「Stylus」拡張機能の場合、正規表現で指定します。もし、こちらを利用している場合、書き方が異なってくるので注意です。

「Stylus」のスクリーンショット

以下のようになります。Stylebotでは、「**」だったのに対して、「Stylus」では「.*」です。

.*www.amazon.co.jp/gp/video/.*

書き込むコード

以下のコードを書き込みます。書き込めたら、「保存」をクリックします。

/*プライムビデオの関連タイトルを複数行表示化*/
div[data-testid="dp-containers-wrapper"] section[data-testid="standard-carousel"] ul {
  display: flex !important;
  flex-wrap: wrap !important;
}

Amazonプライムビデオ」にアクセスします。拡張機能ボタンを押して、登録したサイトがオンになっていることを確認します。オンになっている間は、有効になっているということです。

プライムビデオの関連タイトルが、複数行表示になります。1ページ全てに関連タイトルが表示されます。

プライムビデオの「関連タイトル」を複数行にした画像

比較動画を貼っておきます。かなり見やすくなりました。動画は、2023年3月のデザイン変更前に撮影したものです。(撮影日:2022年9月)

マウスホバーすると、ポップアップが拡大する機能は、これまで通り利用できます。クリックで開きます。

プライムビデオの「関連タイトル」にマウスホバーした画像

作品によっては、関連タイトルの下に、「出演者・スタッフ」のコーナーがあります。ここには影響しないようにしています。実をいうと、ここも弄ってみたんですが、僕の技術ではうまくできなかったので放置しています。

プライムビデオの関連タイトルの下にある「出演者・スタッフ」ページ画像

一時的に無効化したい場合は、Stylebot→指定したサイトをオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

感想

以上、プライムビデオの関連タイトルを1行表示から、複数行表示に変更するCSSでした。

プライムビデオ最高です!

2022年6月9日Amazonサービス