【プライムビデオ】関連タイトルを複数行表示にする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」版もあります。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
https://www.naporitansushi.com/stylebot/関連タイトルを複数行のタイル表示にする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でした。
プライムビデオ最高です！