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

2023年2月16日Amazon

この記事では、PCウェブサイト版「Amazon」のいたるところを、角丸フローティングデザインにするCSSを書きます。

ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボット）」や「Stylus（スタイラス）」を利用します。

通常、Amazonショッピングサイトのトップページのタイルは、カクカクになっています。2022年くらいから、徐々に一部角丸になり始めましたが、2023年2月時点では、トップページのタイルが、いまだに四角です。

CSSを利用することで、好きなように角丸タイルにできます。さらに、影を付けて浮いている風も可能です。マウスを乗せた時にアニメーションをつけて、沈むようにしたり、浮かせたりできます。

CSSなので、自身の環境上で、他人には影響しません。いつでもオンオフできます。CSSが理解できる方であれば、影の大きさ、アニメーション具合などを、自由に調整できます。

本記事は、Chrome拡張機能・Firefoxアドオンを利用できるPCブラウザ限定です。スマホのアプリ版ではできません。

実際に、CSSを適用した後の動画を貼っておきます。2022年3月3日に撮影した動画なので、少々現在のデザインとは異なります。

注意点

本記事を書いたナポリタン寿司は、CSS初心者です。上級者からすると、汚いコードのはずです。ご了承ください。

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

1. インストール方法
2. Amazonサイト上を角丸にするCSS
3. 感想

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

Stylebot - Chrome ウェブストア

ウェブの外観を瞬時に変更

https://chrome.google.com/webstore/detail/stylebot/oiaejidbm...

「Chromeに追加」をクリックしてインストールします。

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

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

この記事では、ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能「Stylebot（スタイルボッ ...

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

Amazonサイト上を角丸にするCSS

「Amazon」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。

/*---------------------------------------
トップページ（https://www.amazon.co.jp）
-----------------------------------------*/
/*各タイルの角丸・影・アニメーション具合*/
.gw-card-layout :is(.a-cardui, .desktop-row>div) {
  border-radius: 10px !important;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 4px !important;
  transition: 0.3s !important;
}

/*各タイルホバー時*/
.gw-card-layout :is(.a-cardui, .desktop-row>div):hover {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 6px !important;
  transform: translateY(-1px) !important;
}

/*---------------------------------------
商品ページ（https://www.amazon.co.jp/〇〇〇）
-----------------------------------------*/
/*商品詳細ページの種類（サイズ・色切り替え）ボタン*/
#twister .swatches li {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/*商品の情報欄にある表*/
table:is([id$="Table"], [role="presentation"]) {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/*商品の情報欄にある表の無駄な枠線除去*/
.a-section-expander-inner,
#prodDetails .secHeader {
  border: none !important;
}

/*画像付きのレビュー*/
div[data-hook="review-image-tile-gallery"] span img {
  border-radius: 10px !important;
  box-shadow: rgba(213, 217, 217, 0.5) 0px 2px 5px 0px !important;
  transition: 0.3s !important;
}

/*画像付きのレビューホバー時*/
div[data-hook="review-image-tile-gallery"] span img:hover {
  box-shadow: rgba(131, 136, 136, 0.5) 0px 3px 8px 0px !important;
  transform: translateY(-1px) !important;
}

/*レビューの「気になるトピックのレビューを読もう」ボタン*/
.cr-lighthouse-term {
  border-radius: 7px !important;
  border-bottom: none !important;
  box-shadow: rgba(213, 217, 217, 0.5) 0px 2px 5px 0px !important;
}

/*レビューの「気になるトピックのレビューを読もう」ボタンホバー時*/
.cr-lighthouse-term:hover {
  background-color: #ccd0d3;
}

書き込めたら、右上の「×」でスタイルシートを閉じます。

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

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

各タイルの角丸具合

トップページの各ブロックに影、角丸処理、ホバー時のアニメーションを付与しています。マウスを乗せると、少しだけ浮かび上がります。

横長のブロックにも対応しています。

「border-radius」が角丸具合です。数字を大きくすれば、それだけ角丸になります。

「box-shadow」が影具合です。「ナポリタン寿司が紹介した影が気に食わない！だけど、カスタマイズ方法が分からない！」という場合は、こちらのサイトが参考になると思います。沢山のサンプル影が用意されています。クリックでコピーできるので、僕が作成したコードの「box-shadow」と差し替えます。

「transition」がアニメーション時間です。上記CSSでは、「transition: 0.3s !important;」にしています。マウスを乗せた時、0.3秒かけてホバー時のCSSに切り替えるようにしています。