【Amazon】配送料(送料)の文字を大きく目立たせるCSS

2022年10月22日Amazonサービス

Amazonのアイコン

この記事では、「Amazon」で、配送料(送料)の文字を大きくして、背景に色を付けるCSSについて書きます。

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

【Amazon】配送料(送料)の文字を大きく目立たせるCSS

本記事で紹介するCSSを使えば、Amazonの配送料(送料)を目立たせることができます。具体的には、フォントサイズを大きくして、背景に色を付けます。

こうすることで、悪質な「ぼったくり送料」を、購入前に気づきやすくします。最近流行っているようです。

デフォルトの配送料の表記ってちょっと小さいですよね。うっかり見逃してしまうレベルです。CSSを使うことで、自由にサイズを変更できます。

Amazonのスクリーンショット1

配送料(送料)の表記だけ装飾します。Prime対象で「無料配送」な場合は、装飾しません。背景に色を付けるだけでも区別しやすくなると思います。

購入一歩直前のレジ画面の配送料も大きくします。こちらは、無料かどうかに関わらず装飾します。

「送料が小さすぎて見えない!ぼったくり送料にひっかかりたくない!」という方、参考にしてみてください。

まぁ、いくら大きくしたところで、結局はご自身の注意力が重要です。目立つように装飾しても、騙されて買っちゃったら意味ないですもんね。気を付けましょう。

「Stylebot」は、Chrome拡張機能だけでなく、Firefox、Microsoft Edgeアドオンも用意されています。本記事はPCユーザー向けです。スマホユーザーさんは使えません。

僕はCSS初心者です。本記事のコードに不備がある可能性があります。本記事の方法を試してみて、別のところの表示がおかしくなったなどありましたら、問い合わせより教えていただければ幸いです。

インストール方法

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

Chromeウェブストアからインストールできます。

Firefox・Edgeをご利用の場合

Chrome拡張機能だけでなく、Microsoft EdgeFirefox版もあります。

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

Stylebot - Chrome ウェブストア

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

Amazonの配送料(送料)を装飾して目立たせる手順

Amazon」にアクセスします。右上の拡張機能アイコン→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。こちらにコードを書き込んでいきます。書き込むコードは、以下になっています。コピペでOKです。

/*配送料(送料)がかかるやつを目立たせる*/
.a-spacing-base>span[data-csa-c-delivery-price^="料 ¥"][data-csa-c-delivery-type="配送"] {
  font-size: 25px;
  background-color: #351cff;
  display: block;
  color: #fff4f4;
  padding: 10px;
  border-radius: 10px;
}

.a-spacing-base>span[data-csa-c-delivery-price^="料 ¥"][data-csa-c-delivery-type="配送"]>span {
  display: block;
}

.a-spacing-base>span[data-csa-c-delivery-price^="料 ¥"][data-csa-c-delivery-type="配送"]>a,
.a-spacing-base>span[data-csa-c-delivery-price^="料 ¥"][data-csa-c-delivery-type="配送"]>span {
  font-size: initial;
}

下記画像のようになればOKです。右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

試しに、「キョーリン おおきなカメのエサ 特大粒 お徳用 1キログラム」で確認してみます。僕が飼っている亀さんのエサで、定期的に購入しています。

普通は、1ページ目にPrime対象(送料無料)の商品が出るんですが、本製品は出ません。「すべての出品を見る」をクリックして、出品者を表示します。

Amazonのスクリーンショット2
メモ

商品によっては、「すべての出品を見る」ボタンがない場合があります。その代わりに、「リストに追加」の下に「新品&中古品(〇)件の出品」というボタンがあると思います。こちらをクリックしましょう。

Amazonのスクリーンショット3

この製品を販売している出品者が一覧表示されます。はい、注目です!配送料がかかる場合、その部分が大きくなります。さらに、背景に色が付きます。

Amazonの配送料の表記を大きく、背景に色を付けて、見やすくした画像1

文字サイズは、「font-size」の数字で調整できます。上記CSSは25pxにしています。もっと大きくしたい場合は、数字を大きくします。

背景色を変更したい場合は、「background-color」を調整します。HTMLカラーコードで指定します。こちらのサイトなどが参考になると思います。

例えば、「background-color: #FF0000;」にすると、赤色の背景になります。背景色に応じて、文字色も変更するといいかなと思います。「color」が文字色です。同じように、HTMLカラーコードで指定します。

Amazonの配送料の表記を大きく、背景に色を付けて、見やすくした画像2

配送料がかかる部分だけ装飾します。Primeの無料配送の商品は、今まで通りの表記です。これだけでも、結構見分けがつくと思います。

Amazonの配送料の表記を大きく、背景に色を付けて、見やすくした画像3

出品者一覧ページだけでなく、商品ページでも反映されます。大きく表示されるので、ぼったくり送料かどうか一目で分かります。

Amazonの配送料の表記を大きく、背景に色を付けて、見やすくした画像4

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

なお、購入直前のレジページの配送料もカスタマイズしたい方は、追加で以下のCSSを利用します。ただ、僕自身あんまり検証していないので、どこか表示に不具合があるかもです。

/*レジ(購入確認画面)の配送料*/
table#subtotals-marketplace-table>tbody>tr:nth-of-type(2) {
  background-color: #351cff;
  color: #fff4f4;
}

/*レジ(購入確認画面)の配送料のフォントサイズ*/
table#subtotals-marketplace-table>tbody>tr:nth-of-type(2)>td:nth-of-type(2) {
  font-size: 20px;
}
レジページの配送料・手数料を装飾した画像

以下のような構成になっています。

background-color配送料・手数料項目の背景色
color配送料・手数料項目の文字色
font-sizeフォントサイズ

1つ注意点ですが、配送料が無料か有料か関係なく、装飾されます。無料の時だけ何も装飾しないということができませんでした。

感想

以上、Amazonの配送料を大きく目立たせるようにするCSSでした。

最後に、下記画像見てみてください。こんなんひどいよ…。「PFU キーボード HHKB Professional HYBRID 英語配列」です。

Amazonの配送料の表記を大きく、背景に色を付けて、見やすくした画像5

通常、新品で3万ちょっとの製品ですが、上記画像の出品者は、あえて本体価格を1万5千円で安くしています。そして、これでもかというくらい送料を高く設定しています。新品価格よりも高い値段です。

これが本記事の装飾なしだったら、下記画像のようになります。新品価格のほうに目がいっちゃって、配送料を見逃しやすいです。

プログラミングつよつよさんだと、一定の配送料を検知したら、購入前に警告画面を表示するみたいな高度なシステムを作れるかもしれません。

僕の場合は無理です。あくまで、自分が気づきやすいように装飾するくらいです。実際にぼったくり送料に気づいて、購入を踏みとどまるかどうかは、ユーザーさん次第です。

Posted by ナポリタン寿司