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

2021年12月8日Stylebot&Stylus

Stylebotのアイコン

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

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

Amazonのサイトを、CSSを使って角丸フローティングデザインにした画面

Amazonのいたるところのデザインを、角丸のフローティングデザインにするCSSです。コンテンツの四隅を、カクカクデザインから角丸にして、影を表示させています。

マウスを乗せた時にアニメーションをつけています。ふわっと浮かび上がるデザインにしました。

CSSなので、オンオフもワンクリックでできます。中身が理解できる方であれば、影の大きさはアニメーションなどは自由にカスタマイズできます。

僕は、2021年11月5日に、Windows11にアップグレードしました。Windows11では角丸、影、透明感によるフローティングデザインが採用されています。

そこで、Amazonも同じようなデザインにしてみようと思い、本記事を書きました。

実際にCSSを適用した後のAmazonの動画を貼っておきます。

注意点

本記事を書いたナポリタン寿司は、CSS初心者です。

上級者からすると、汚いコードのはずです。ご了承ください。

また、CSSはある日突然、適用されなくなる場合があります。サイト運営者側(ここだとAmazon側)がコードの一部を変えてしまうことが原因です。その場合、お手数ですがコメント欄か、お問い合わせからご連絡くださればなと思います。

前提

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

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

Firefoxをお使いの方

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での編集画面です。

StylusにAmazonのCSSを書き込む

Amazonのサイトが、角丸フローティングデザインになります。

以下、それぞれの項目の解説です。

背景画像

トップページの背景画像を非表示にします。僕は不要だと感じたので消してみました。

Amazonトップページの背景画像 エンターテイメントをワイドスクリーンでfire HD10

消したくない場合は、以下の行を丸ごと書かないようにしましょう。

/*背景画像の非表示化*/
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にしてからというもの、フローティングデザインが大好きになりました。透き通った透明感、角丸の可愛いらしいデザイン最高です。

余談ですが、同じ方法でプライムビデオのデザインもフローティングにできます。アニメーションや余白にこだわると、スタイリッシュなデザインが完成するかもしれません。気になる方は、下記画像がリンクになっているので、クリックしてみてください。

CSSを使うことで、プライムビデオのデザインも角丸フローティングにできる

Posted by ナポリタン寿司