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

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

【Stylebot】Amazonの郵便番号とユーザー名を非表示にするCSS

2021年12月2日Amazon

Amazonのアイコン画像

この記事では、PCウェブサイト版「Amazon」のヘッダーにある郵便番号とユーザー名、注文履歴にあるお届け先の名前を非表示にするCSSについて書きます。

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

Amazonの検索ボックス左にある郵便番号を非表示にしてみた画像

通常PCブラウザで「Amazon」にログインしていると、ヘッダーの検索ボックス横に、個人情報(お届け先の郵便番号、アカウント名)が表示されます。

Amazonの検索ボックス左右に表示される本名、郵便番号、ユーザー名の画像
※郵便番号は、プライバシーのため黒塗りにしています。

CSSを使うことで非表示にできます。元々なかったかのようなデザインにできます。いつでもオンオフできます。

「Amazon」のスクリーンショットを撮影して、SNSやブログなどで投稿する方におすすめです。インフルエンサー、ブロガー、ゲーム配信者などです。いちいちモザイクをかけなくて済みます。

モザイクを毎回してもいいのですが、人間なので、どうしてもモザイクをかけ忘れる時があると思います。CSSで根本から非表示にすることで、モザイクかけ忘れのリスクを回避できます。

同じような機能のChrome拡張機能「Amazonの個人情報を隠します」というのもあります。「CSSちょっとよく分かんない!」という方は、専用の拡張機能の方が手間も少なくておすすめです。

インストール方法

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

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

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

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

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

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

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

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

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

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

Amazon上の個人情報を削除するCSS

普通に非表示にするCSS

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

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

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

/*住所(郵便番号)非表示*/
#nav-global-location-slot {
  display: none !important;
}

/*ユーザー名非表示*/
.nav-line-1-container span {
  display: none !important;
}

/*注文履歴ページのお届け先の名前非表示*/
span.a-declarative[data-a-popover*="受取人の住所"] {
  display: none;
}
注意事項

本記事のCSSは、僕が適当に作成したコードです。皆さんの環境によっては使えなかったり、サイト側の仕様変更でいつの間にか使えなくなる可能性もあります。

もし書き込んでも反映されない場合、問い合わせより教えていただければ幸いです。初心者の僕ができる範囲で、修正したいと思います。

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

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

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

適用すると、ヘッダーにある以下の項目が非表示になります。

  • 郵便番号
  • 名前
  • ユーザー名

「アカウント&リスト」の項目は削除しないので、アカウントサービスやリストメニューにはアクセスできます。郵便番号の部分は、完全に削除しました。

Amazonのヘッダーに表示されている個人情報を削除した画像

注文履歴ページのお届け先の名前も削除します。

注文履歴内にあるお届け先の名前を削除する前と後の比較画像

アカウントサービスや、購入時の配送先を指定する画面では、いつも通り住所を確認できます。

アカウントサービス(お客様の住所)のスクリーンショット

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

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

ホバー時に表示させるCSS

1つ目に紹介したコードは、普通に非表示にします。「普段は非表示にして、マウスを乗せた時だけ、表示してほしい!」という方は、上記コードではなく、下記コードを使ってみてください。

/*---------------------------------
住所(郵便番号)非表示
-----------------------------------*/
/*通常*/
#nav-global-location-slot {
  opacity: 0;
  transition-duration: .3s;
}

/*ホバー時*/
#nav-global-location-slot:hover {
  opacity: 1;
}
/*---------------------------------
住所(郵便番号)非表示終了
-----------------------------------*/

/*---------------------------------
ユーザー名非表示
-----------------------------------*/
/*通常*/
.nav-line-1-container span {
  opacity: 0;
  transition-duration: .3s;
}

/*ホバー時*/
.nav-line-1-container span:hover {
  opacity: 1;
}
/*---------------------------------
ユーザー名非表示終了
-----------------------------------*/

/*注文履歴ページのお届け先の名前*/
span.a-declarative[data-a-popover*="受取人の住所"] {
  display: none;
}

マウスを乗せると、表示されます。GIF画像を貼っておきます。

ホバー時にAmazonの個人情報を表示してみたGIF画像

商品ページの住所を非表示にするCSS

1つ目と2つ目に紹介したコードは、商品ページの配送先住所(〇〇にお届け)の部分は削除しません。

PCウェブサイト版「Amazon」で「REALFORCE R3」ページを開いた画像
REALFORCE リアルフォース 東プレ R3 キーボード

ここも非表示にしたい方は、以下のコードを追加で書き込んでください。1つ目、あるいは2つ目のCSSと併用可能です。

/*商品ページの住所(配送先)非表示*/
#contextualIngressPtLabel {
    display: none !important;
}
PCウェブサイト版「Amazon」の商品ページの住所をCSSで非表示にしてみた画像

最終的の購入ページでは、表示されるようになっています。ここだけは最後の確認なので、非表示にしないほうがいいです。

PCウェブサイト版「Amazon」の注文確認画面のスクリーンショット

プライムビデオの右上にある「視聴者」を消すCSS

プライムビデオの右上にある「視聴者」を非表示にする記事も書きました。気になった方は、下記記事を参考にしてみてください。

感想

以上、PCウェブサイト版「Amazon」のヘッダーにある郵便番号とユーザー名、注文履歴にあるお届け先の名前を非表示にするCSSでした。

「うっかりモザイクをかけ忘れるミス」を防げます。

ただし、ある日突然Amazon側がサイトデザインを変更することもありえるので、スクショする時は非表示になっているか念のため確認するようにしましょう。もし、本記事のCSSが機能しなくなった場合は、コメント欄・問い合わせなどからご連絡ください。

2021年12月2日Amazon