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

2021年12月8日2022年11月4日Amazonサービス

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

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

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

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

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

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

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

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

注意点

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

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

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

1. 前提
2. CSS
3. 感想

前提

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

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

【Stylebot】サイトにCSSを適用できる拡張機能の使い方

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot」について書き ...

https://www.naporitansushi.com/stylebot/

Firefoxをお使いの方

Stylebotは、Chrome拡張機能のみの提供で、Firefoxアドオンは公開されていません。Chrome、Vivaldi、EdgeなどのChromiumベースのブラウザのみ利用できます。

Firefoxをご利用の方は、代わりに「Stylus」というアドオンを使ってみてください。同じようにウェブサイトにCSSを適用できます。Stylebotと比べて、レイアウトや設定画面は異なりますが、CSSを書き込んで適用するという点では一緒です。

下記記事は、VivaldiブラウザのウェブパネルにCSSを適用するといった内容ですが、Stylus（Chrome拡張機能版）を使っています。画像などは一緒なので参考にしてみてください。

【Vivaldi】ウェブパネルにCSSを適用する方法。拡張機能Stylusの使い方

この記事では、ウェブサイトだけでなく、Vivaldi のウェブパネルにもCSSを適用できるChrome拡張機能「S ...

https://www.naporitansushi.com/webpanel-css/

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);
}

正方形ブロックと同じデザインになります。