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

2021年12月2日Amazonサービス

Amazonのアイコン

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

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

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

CSSを使うことで、「Amazon」のヘッダー(検索ボックスの左右)にある郵便番号とユーザー名と、注文履歴内のお届け先の名前を非表示にできます。

本記事で紹介するコードを書き込むだけで、元々なかったかのようなデザインにできます。いつでもオンオフできます。

Amazonのサイトで、スクリーンショットを撮影して、SNSやブログなどで投稿する方におすすめです。インフルエンサー、ブロガー、ゲーム配信者などです。郵便番号、名前=個人情報が非表示になるので、いちいちモザイクをかけなくて済みます。

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

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

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

頻繁にスクショして、ネット上に公開する方にとっては、邪魔だと思います。配信者の方だと、うっかりブラウザを開いてしまい、個人情報がばれてしまう可能性もあるので、本記事の方法で非表示にするといいかなと思います。

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

合わせて読みたい

Stylebotと呼ばれるウェブサイトにCSSを適用できるChrome拡張機能を利用します。Amazonの個人情報だけでなく、他のウェブサイトのデザインを変更できる便利な拡張機能です。Firefoxアドオンもあります。

インストール方法

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

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

Firefox・Edgeをご利用の場合

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

「Chromeに追加」でインストールできます。

Stylebot - Chrome ウェブストア

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

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

普通に非表示にするCSS

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

Stylebotのスクリーンショット

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

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

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

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

下記画像のようになれば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つ目に紹介したコードは、商品ページの配送先住所(〇〇にお届け)の部分は削除しません。

Amazon | REALFORCE リアルフォース 東プレ R3 キーボード 静音 ハイブリッドモデル
REALFORCE リアルフォース 東プレ R3 キーボード

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

/*商品ページの住所(配送先)非表示*/
#contextualIngressPtLabel {
    display: none !important;
}
商品ページの住所をCSSで非表示にしてみた画像

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

Amazonの注文確認画面

感想

以上、「Amazonショッピングサイト」の個人情報を非表示にするCSSでした。

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

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

Posted by ナポリタン寿司