【Stylebot】Amazonを角丸フローティングデザインにするCSS

Amazonのいたるところのデザインを、角丸のフローティングデザインにするCSSです。コンテンツの四隅を、カクカクデザインから角丸にして、影を表示させています。
マウスを乗せた時にアニメーションをつけています。ふわっと浮かび上がるデザインにしました。
CSSなので、オンオフもワンクリックでできます。中身が理解できる方であれば、影の大きさはアニメーションなどは自由にカスタマイズできます。
僕は、2021年11月5日に、Windows11にアップグレードしました。Windows11では角丸、影、透明感によるフローティングデザインが採用されています。
そこで、Amazonも同じようなデザインにしてみようと思い、本記事を書きました。
実際にCSSを適用した後のAmazonの動画を貼っておきます。
本記事を書いたナポリタン寿司は、CSS初心者です。
上級者からすると、汚いコードのはずです。ご了承ください。
また、CSSはある日突然、適用されなくなる場合があります。サイト運営者側(ここだとAmazon側)がコードの一部を変えてしまうことが原因です。その場合、お手数ですがコメント欄か、お問い合わせからご連絡くださればなと思います。
前提
この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。
まだインストールしていない方は、以下の記事を参考にしてみてください。
Stylebotは、Chrome拡張機能のみの提供で、Firefoxアドオンは公開されていません。Chrome、Vivaldi、EdgeなどのChromiumベースのブラウザのみ利用できます。
Firefoxをご利用の方は、代わりに「Stylus」というアドオンを使ってみてください。同じようにウェブサイトにCSSを適用できます。Stylebotと比べて、レイアウトや設定画面は異なりますが、CSSを書き込んで適用するという点では一緒です。
下記記事は、VivaldiブラウザのウェブパネルにCSSを適用するといった内容ですが、Stylus(Chrome拡張機能版)を使っています。画像などは一緒なので参考にしてみてください。
CSS
書き込むコードは、以下になっています。
/*--------------------------------------
Amazonのデザインを角丸フローティング化
----------------------------------------*/
/*全体設定*/
:root {
--kadomaru10: 10px;
--kadomaru7: 7px;
--kage: rgba(0, 0, 0, 0.24) 0px 3px 8px;
--kagehover: rgba(0, 0, 0, 0.4) 0px 10px 10px;
--anime: 0.3s;
}
/*---------------------------------------
トップページ(https://www.amazon.co.jp)
-----------------------------------------*/
/*背景画像*/
div#gw-desktop-herotator {
display: none;
}
/*各ブロック*/
.gw-card-layout .a-cardui {
border-radius: var(--kadomaru10);
box-shadow: var(--kage);
transition: var(--anime);
}
/*各ブロック:ホバー時*/
.gw-card-layout .a-cardui:hover {
box-shadow: var(--kagehover);
transform: translateY(-5px);
}
/*長方形のブロック*/
.gw-card-layout .desktop-row>div {
border-radius: var(--kadomaru10);
box-shadow: var(--kage);
}
/*---------------------------------------
トップページ終了
-----------------------------------------*/
/*---------------------------------------
商品ページ(https://www.amazon.co.jp/〇〇〇)
-----------------------------------------*/
/*商品詳細ページの種類(サイズ・色切り替え)ボタン*/
#twister .swatches li {
border-radius: var(--kadomaru7);
overflow: hidden;
}
/*各ページの表*/
table[id$="Table"],
table[role="presentation"] {
border-radius: var(--kadomaru10);
overflow: hidden;
}
/*商品の情報>詳細情報の表の上の線削除*/
.a-section-expander-inner,
#prodDetails .secHeader {
border: none !important;
}
/*画像付きのレビュー*/
div[data-hook="review-image-tile-gallery"] span img {
border-radius: var(--kadomaru10);
box-shadow: var(--kage);
transition: var(--anime);
}
/*画像付きのレビュー:ホバー時*/
div[data-hook="review-image-tile-gallery"] span img:hover {
box-shadow: var(--kagehover);
transform: translateY(-5px);
}
/*レビューの「気になるトピックのレビューを読もう」ボタン*/
.cr-lighthouse-term {
border-radius: var(--kadomaru7);
border-bottom: none;
}
/*--------------------------------------
商品ページ終了
----------------------------------------*/
/*--------------------------------------
Amazonのデザインを角丸フローティング化終了
----------------------------------------*/
そのままコピペします。下記画像は、Stylusでの編集画面です。

Amazonのサイトが、角丸フローティングデザインになります。
以下、それぞれの項目の解説です。
背景画像
トップページの背景画像を非表示にします。僕は不要だと感じたので消してみました。

消したくない場合は、以下の行を丸ごと書かないようにしましょう。
/*背景画像の非表示化*/
div#gw-desktop-herotator {
display: none;
}
各ブロック
トップページの各ブロックに影、角丸化、ホバー時のアニメーションを付与します。マウスを乗せると、ふわっと浮かび上がります。

長方形のブロック
正方形のブロックではなく、長方形の細長いブロックに対するコードです。こちらは、角丸だけにしてアニメーション、影はつけないようにしています。

正方形ブロックと同じようにアニメーション、影を付けたい場合は、「長方形のブロック」CSSの代わりに、下記コードを使ってみてください。
/*長方形のブロック*/
.gw-card-layout .desktop-row>div {
border-radius: var(--kadomaru10);
box-shadow: var(--kage);
transition: var(--anime);
}
/*長方形のブロック:ホバー時*/
.gw-card-layout .desktop-row>div:hover {
box-shadow: var(--kagehover);
transform: translateY(-5px);
}
正方形ブロックと同じデザインになります。
商品詳細ページの種類(サイズ・色切り替え)ボタン
商品詳細ページの各商品切り替えボタンの角丸化コードです。通常は四角になっています。このボタンは、サイズ、色、種類などで商品を切り替えできる場合に表示されます。

各ページの表
商品詳細ページにある表の角丸化コードです。

商品の情報にある詳細情報、登録情報などの表がそれぞれ角丸になります。

画像付きのレビュー
商品ページのレビューにある「画像付きのレビュー」を角丸、影、アニメーションを付与するコードです。

気になるトピックのレビューを読もうボタン
レビューの「気になるトピックのレビューを読もう」ボタンを角丸にするコードです。

感想
以上、Amazonの色々な部分を、角丸+影付きのフローティングデザインにするCSSについてでした。
Windows11にしてからというもの、フローティングデザインが大好きになりました。透き通った透明感、角丸の可愛いらしいデザイン最高です。
余談ですが、同じ方法でプライムビデオのデザインもフローティングにできます。アニメーションや余白にこだわると、スタイリッシュなデザインが完成するかもしれません。気になる方は、下記画像がリンクになっているので、クリックしてみてください。
