【プライムビデオ】トップページの動画を複数行表示にするCSS
この記事では、「Amazonプライムビデオ
」のトップページに表示されている動画を、1行や2行ではなく、全部表示するCSSについて書きます。
ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」を使います。
本記事で紹介するCSSを使えば、「Amazonプライムビデオ」のトップページに表示されている1行、2行の動画を、複数行にして全部表示できます。
いちいち左右の矢印を押して、スクロールしなくても、1ページに全部表示されます。
デフォルトだと、1行、せいぜい2行で表示されます。次のおすすめ動画を見るには、右側にある矢印を押さないといけません。コンテンツが右に伸びているイメージです。
CSSを使うことで、無理やり折り返して、1ページ全てに収めることができます。
ただし、1ページに全部表示されるということは、スクロール量が増えるので、人によっては不便かもしれません。いつでも元に戻せるので、一度試してみるといいかなと思います。
おまけで、サムネイルサイズと左上の「Primeボタン」を小さくするCSSも紹介します。このCSSを併用すると、多少は見やすくなるかもしれません。
「プライムビデオ頻繁に見るけど、ホームのおすすめ動画が見にくい！折り返してくれ！」という方、参考にしてみてください。
「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。
以前、動画詳細ページの下に表示されている「関連タイトル」の動画を、複数行にする記事も書きました。
今思えば、なんで先にトップページをやらなかったんだと疑問です。こちらもおすすめなので、ぜひ試してみてください。正直、個人的には本記事よりも好きです。
https://www.naporitansushi.com/prime-video-related-titles/インストール方法
ウェブサイトに、自分で作成したCSSを適用できるChrome拡張機能「Stylebot」を利用します。
Chromeウェブストアからインストールできます。
https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...Chrome拡張機能だけでなく、Microsoft EdgeとFirefox版もあります。
「Chromeに追加」でインストールできます。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
トップページの動画を複数行表示にする手順
「Amazonプライムビデオ」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。
/*プライムビデオのトップページの動画を複数行表示*/
.jxBPRE ul {
display: flex !important;
flex-wrap: wrap !important;
}下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.amazon.co.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、右に伸びていたコンテンツが、画面の端で自動的に折り返されます。改行されて、1ページに全部表示されます。
比較動画を貼っておきます。見やすいと感じるかどうかは、人それぞれです…。さらに見やすくしたい方は、次の見出しに進んでみてください。
一時的に無効化したい場合は、Stylebot→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。
サムネイルを小さくするCSS
本記事のCSSは、サムネイルサイズをそのままで、無造作に折り返すだけです。
そこで、ナポリタン寿司は考えてみました。「サムネイルサイズを小さくすればいいじゃん！」ってね！以下のCSSを使ってみてください。
/*プライムビデオのサムネイルを小さくする*/
.jxBPRE>ul>li {
width: 180px !important;
}
/*プライムビデオの左上にある「Prime」ボタンを小さくする*/
img[alt="プライム会員特典"] {
height: 10px !important;
}通常のサムネイルよりも小さくなります。好みに応じて、「width: 180px」の数値を調整してください。数値を大きくすれば、画像サイズも大きくなります。多少は見やすくなるのかな…？
ただし、上記CSSは、トップページだけでなく、関連タイトルのサムネイルにも反映されます。
感想
以上、プライムビデオのトップページに表示されている動画を、折り返して全部表示するCSSでした。
プライムビデオ関連の記事は、他にも書いているので、参考にしてみてください。