【Stylebot】プライムビデオのいたるところを角丸フローティングにするCSS

2021年12月9日Stylebot&Stylus

Stylebot のアイコン

この記事では、プライムビデオのいたるところを角丸フローティングにするするCSS について書きます。

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

CSSで角丸フローティングデザインにしたプライムビデオ

プライムビデオ のいたるところのデザインを角丸のフローティングにするCSS です。動画コンテンツの四隅をカクカクデザインから角丸にしています。

マウスを乗せた時に表示される背景を白にして文字を黒にしています。

先日、Amazon をフローティングデザインにしたので、ついでにプライムビデオもやってみようと思って試してみました。

参考:【Stylebot】Amazonのいたるところを角丸フローティングデザインにするCSS | ナポリタン寿司のPC日記

※僕はCSS 初心者であり、デザイン力も皆無です。

前提

この記事は、既にStylebot をインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSS を適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

CSS

書き込むコードは以下になっています。

/*
----------------------------
プライムビデオのカスタマイズ
----------------------------
*/


/*背景色*/

._1VXtvE {
  background-color: white;
  overflow: hidden;
}


/*コンテンツ間の余白*/

html:not([dir=rtl]) .-e5Lt1, html:not([dir=rtl]) ._8m5caQ {
  padding-right: 20px;
}


/*サムネイル*/

.IfKCtH.tst-title-card.St0JJM._1DknaC {
  border-radius: 20px;
}


/*サムネイル:ホバー時*/

div._2Q3FRZ._38SAO3.tst-hover-container._1pYuE7._1aBOAx {
  overflow: hidden;
  border-radius: 20px;
  border: none;
}


/*-----文字色系-----*/


/*「最近追加されたTV番組」などの文字色*/

h2.hC3fkr.tst-carousel-header {
  color: black;
}


/*説明文の文字色*/

._2V3WOM p._3PcawJ {
  color: black;
}

._1ia8UV ._38SAO3 ._2Z_R2D {
  font-size: 13px;
  color: black;
}

._1ia8UV ._38SAO3 .mgrx3- {
  color: black
}


/*-----文字色系終了-----*/


/*説明文の背景色*/

._1ia8UV ._38SAO3 .lAtJLC {
  background: linear-gradient(rgba(27, 37, 48, 0), white 48px);
  color: black;
}


/*「ウォッチリストに追加する」のアイコン背景色*/

div._147Rtv {
  background: #abced8;
  border-radius: 10px;
}


/*「この映画を非表示」を白*/

svg._2Z_ZKn {
  color: white;
}

以下画像のようになればOKです。

プライムビデオの動画サムネイルを角丸にするCSS

プライムビデオの動画サムネイルの四隅が角丸になります。

動画サムネイルが角丸になる

マウスを乗せた時の背景も変更しました。背景を白に統一、文字色を黒にしました。

マウスホバー時

あくまでプライムビデオのトップページのみの変更なので、動画詳細ページなどは通常通りのデザインです。

ジョジョの奇妙な冒険 黄金の風
ジョジョの奇妙な冒険 黄金の風

【余談】ホバー時の背景はそのままにする

マウスを乗せた時に説明文が表示されるのですが、その背景はデフォルトのままにしたい場合は以下のCSS を使いましょう。上記で紹介した一部のCSS を削除することで可能です。好みですね。

ホバー時の背景はデフォルトのままにする
/*
----------------------------
プライムビデオのカスタマイズ
----------------------------
*/


/*背景色*/

._1VXtvE {
  background-color: white;
  overflow: hidden;
}


/*コンテンツ間の余白*/

html:not([dir=rtl]) .-e5Lt1, html:not([dir=rtl]) ._8m5caQ {
  padding-right: 20px;
}


/*サムネイル*/

.IfKCtH.tst-title-card.St0JJM._1DknaC {
  border-radius: 20px;
}


/*サムネイル:ホバー時*/

div._2Q3FRZ._38SAO3.tst-hover-container._1pYuE7._1aBOAx {
  overflow: hidden;
  border-radius: 20px;
  border: none;
}


/*「最近追加されたTV番組」などの文字色*/

h2.hC3fkr.tst-carousel-header {
  color: black;
}

まとめ

以上、プライムビデオのいたるところを角丸フローティングにするCSS についてでした。

本当は影を付けたかったんですが、どうにもうまくいきませんでした。僕の実力だと、ここまでのようです。

Posted by ナポリタン寿司