広告を利用しています

当サイトは広告を掲載しています。消費者庁が2023年10月1日から施行した景品表示法の規制対象(通称:ステマ規制)にならないよう配慮して記事を作成しています(記事はこちら、消す方法はこちら

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

2022年10月22日Amazon

Amazonのアイコン

この記事では、PCウェブサイト版「Amazon」で、配送料(送料)の文字を大きくして背景に色を付けるCSSを書きます。

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

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

本記事で紹介するCSSを使えば、PCウェブサイト版「Amazon」内にある配送料(送料)のフォントサイズを大きくして背景に色を付けられます。こうすることで悪質な「ぼったくり送料」に気づきやすくなります。

「それってやっていいの?」って思うんですが、「Amazon」の場合商品の本体価格を下げてパッと見は安くしている業者がいます。しかし、実際は配送料を通常だと考えられない高額に釣り上げて結局こっちが大損する…みたいなパターンがあります。

Amazonが悪いというか、そういうことをする一部出荷元・販売元が悪いです。こすい技です。実際引っかかったことはないんですが、実際にやっている出荷元・販売元は沢山見たことがあります。

デフォルトだと配送料の表記がちょっと小さいです。うっかり見逃してしまうレベルです。「プライム会員だからどーせ配送料タダ」って思ってしっかり確認しない人要注意です。Amazon以外の出荷元・販売元だとプライム会員でもかかる時があります。

PC版「Amazon」で複数の出品がある商品の配送料部分の画像

CSSを使うことで上記画像にある「配送料(送料)」の表記を目立つように装飾できます。

Prime対象で「無料配送」な場合は装飾しません。背景に色を付けるだけでも区別しやすくなると思います。購入一歩直前のレジ画面の配送料も大きくします。こちらは無料かどうかに関わらず装飾します。

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

まぁいくら大きくしたところで結局は自身の注意力が重要です。目立つように装飾しても騙されて買っちゃったら意味ないですもんね。気を付けましょう。本記事はPCユーザー向けです。スマホユーザーさんは使えません。

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

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。本記事では「Stylebot」を紹介しますが、「Stylus」などでもOKです。僕はメインでは「Stylus」を使っています。

「Chromeに追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Stylebot」拡張機能をインストールする手順画像2

拡張機能のオーバーフローメニューに追加されたらOKです。

「Stylebot」拡張機能をインストールする手順画像3

頻繁に開く場合は、拡張機能のオーバーフローメニューを開いて、「Stylebot」の隣にあるピン留めアイコンをクリックします。ツールバーに直接配置されます。

「Stylebot」拡張機能を直接ツールバーに配置する手順画像

詳しい使い方を知りたい方は、以下の記事を参考にしてみてください。

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

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

「Stylebot」拡張機能のスクリーンショット1

出品者・商品詳細ページの送料カスタマイズ

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。コピペで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="配送"]>:is(a,span) {
  font-size: initial;
}

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

「Stylebot」拡張機能のスクリーンショット2

それぞれのプロパティは、以下のようになっています。文字サイズを大きくしたい場合は、「font-size」の数値を大きくします。

font-size文字サイズ
background-color背景色
display: block;必要なコード
color文字色
padding余白具合
border-radius角丸具合

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

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

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

PC版「Amazon」ですべての出品を確認する手順画像
メモ

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

PC版「Amazon」で「すべての出品を見る」ボタンがない時の対処法画像

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

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

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

背景色を変更したい場合は「background-color」を調整します。HTMLカラーコードで指定します。

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

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

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

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

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

PC版「Amazon」の配送料の表記をCSSで大きく、背景に色を付けて見やすくした画像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;
}
PC版「Amazon」のレジページの配送料・手数料を装飾した画像

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

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

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

検索結果ページのカスタマイズ

本記事を書いた後に気づきましたが、検索結果ページの配送料には装飾していませんでした。こちらも装飾したい場合以下のコードを追加で利用します。

/*検索結果の配送料がかかる商品を目立たせる*/
span[aria-label^="配送料 ¥"]>span {
  font-size: 20px;
  background-color: #351cff;
  display: block;
  color: #ffffff !important;
  padding: 10px;
  border-radius: 10px;
}
「Stylus」のスクリーンショット
画像は、「Stylus」のスクリーンショット

検索結果ページの配送料も装飾されます。ぼったくり送料の商品を検索結果の時点で回避できます。

PC版「Amazon」の検索結果ページに表示される配送料をCSSで装飾した画像

検索結果と言えば検索結果の不要な項目をごっそり削除するCSS記事も書いています。

感想

以上、PCウェブサイト版「Amazon」の配送料を大きく目立たせるCSSでした。

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

PC版「Amazon」の検索結果ページに表示される配送料をCSSで装飾した画像5

通常新品で3万ちょっとの製品ですが、上記画像の出品者はあえて本体価格を1万5千円と安く設定しています。しかしよく見ると配送料が4万以上に設定されていて、新品価格よりも高い金額が請求されるようになっています。

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

PC版「Amazon」の検索結果ページに表示される配送料をCSSで装飾する前の画像

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

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

2022年10月22日Amazon

Posted by ナポリタン寿司