【プライムビデオ】トップページの動画を複数行表示にするCSS

2022年9月5日Stylebot&Stylus

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

この記事では、「Amazonプライムビデオ」のトップページに表示されている動画を、1行や2行ではなく、全部表示するCSSについて書きます。

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

【プライムビデオ】トップページの動画を複数行表示にするCSS

本記事で紹介するCSSを使えば、「Amazonプライムビデオ」のトップページに表示されている1行、2行の動画を、複数行にして全部表示できます。

いちいち左右の矢印を押して、スクロールしなくても、1ページに全部表示されます。

デフォルトだと、1行、せいぜい2行で表示されます。次のおすすめ動画を見るには、右側にある矢印を押さないといけません。めんどくさいですよね。コンテンツが右に伸びているイメージです。

プライムビデオのトップページ画像

CSSを使うことで、無理やり折り返して、1ページ全てに収めることができます。

ただし、1ページに全部表示されるということは、スクロール量が増えるので、人によっては不便かもしれません。いつでも元に戻せるので、一度試してみるといいかなと思います。

おまけで、サムネイルサイズと左上のPrimeボタンを小さくするCSSも紹介します。このCSSを併用すると、多少は見やすくなるかもしれません。

「プライムビデオ頻繁に見るけど、ホームのおすすめ動画が見にくい!折り返してくれ!」という方、ぜひ参考にしてみてください。

Stylebotは、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。

【余談】「関連タイトル」も複数行にできるよ!

以前、動画詳細ページの下に表示されている「関連タイトル」の動画を、複数行にする記事も書きました。

今思えば、なんで先にトップページをやらなかったんだと疑問です。こちらもおすすめなので、ぜひ試してみてください。正直、個人的には本記事よりも好きです。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

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

Stylebot - Chrome ウェブストア

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

CSS

Amazonプライムビデオ」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。

/*プライムビデオのトップページの動画を複数行表示*/
.jxBPRE ul {
  display: flex;
  flex-wrap: wrap;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

再度拡張機能ボタンを押して、登録したサイト(例:www.amazon.co.jp)がオンになっていることを確認します。オンになっている間は有効になっているということです。

これで、右に伸びていたコンテンツが、画面の端で自動的に折り返されます。改行されて、1ページに全部表示されます。

プライムビデオのトップページを折り返して、1ページにすべて表示した画像

比較動画を貼っておきます。見やすいと感じるかどうかは、人それぞれです…。さらに見やすくしたい方は、次の見出しに進んでみてください。

一時的に無効化したい場合は、Stylebot→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は、書き込んだコードを削除します。

サムネイルを小さくするCSS

本記事のCSSは、サムネイルサイズをそのままで、無造作に折り返すだけです。

そこで、ナポリタン寿司は考えてみました。「サムネイルサイズを小さくすればいいじゃん!」ってね!以下のCSSを使ってみてください。

/*プライムビデオのサムネイルを小さくする*/
.jxBPRE>ul>li {
  width: 180px !important;
}

/*プライムビデオの左上にある「Prime」ボタンを小さくする*/
img[alt="プライム会員特典"] {
  height: 10px;
}

通常のサムネイルよりも小さくなります。好みに応じて、「width: 180px」の数値を調整してください。数値を大きくすれば、画像サイズも大きくなります。多少は見やすくなるのかな…?

ただし、上記CSSは、トップページだけでなく、関連タイトルのサムネイルにも反映されます。

プライムビデオのサムネイルサイズを小さくした画像

感想

以上、プライムビデオのトップページに表示されている動画を、折り返して全部表示するCSSでした。

プライムビデオ関連の記事は、他にも書いているので、参考にしてみてください。

Posted by ナポリタン寿司