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

この記事では、「Amazonプライムビデオ」の動画下に表示される関連タイトルのビデオを1行ではなく、複数行にするCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot(スタイルボット)」を利用します。
本記事で紹介するCSSを使えば、「Amazonプライムビデオ」の関連タイトルを、1行から複数行表示に変更できます。複数行にすることで、1ページ目に全ての関連タイトルが表示されて、一目でサムネイルを確認しやすくなります。
デフォルトだと、1行で表示されていて、次の関連タイトルを見ようと思ったら、右端にある右向き矢印をクリックする必要があります。1ページに表示されているタイトルは、大体4~5タイトルで毎回矢印をクリックしないといけないので、見にくいし、手間です。

CSSを使うことで、無理やり1ページ全てに収めることができます。矢印をクリックしなくても、複数行でずらっと全てを確認できます。より良いプライムビデオライフを過ごすためには、必須の内容となっています。
「プライムビデオ頻繁に見るけど、関連タイトルが見にくい!」という方、ぜひ参考にしてみてください。
インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
「Chromeに追加」でインストールできます。

右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
関連タイトルを複数行のタイル表示にするCSS
作品詳細ページだけで動作するスタイルシートを作成する
今回は、Amazon上ではなく、Amazonの中でもプライムビデオの作品詳細ページだけに適用します。インストールした拡張機能アイコンを右クリック→「オプション」をクリックします。

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

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

今回は、Amazonプライムビデオの作品詳細ページだけに適用したいので、URLは「**www.amazon.co.jp/gp/video/**
」になります。
**www.amazon.co.jp/gp/video/**
これで、Amazonショッピングサイトでも、プライムビデオのトップページでもなく、プライムビデオの作品詳細ページだけに適用されます。「**
」が、任意の1文字以上という意味です。URLの一部に「www.amazon.co.jp/gp/video/
」が含まれている場合に発動するという意味です。
「Stylebot」では、ワイルドカードで指定しますが、「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でした。
プライムビデオ最高です!