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

2021年12月2日Stylebot&Stylus

Stylebotのアイコン

この記事では、Amazonヘッダーにある郵便番号とユーザー名を非表示にするCSSについて書きます。

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

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

CSSを使うことで、Amazonのヘッダー(検索ボックスの左右)にある郵便番号とユーザー名を非表示にできます。

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

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

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

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

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

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

Stylebotと呼ばれるウェブサイトにCSSを適用できるChrome拡張機能を利用します。Amazonの個人情報だけでなく、他のウェブサイトのデザインを変更できる便利な拡張機能です。(Firefoxユーザーのために、代替案も用意しています。)

以前、同じような機能のChrome拡張機能「Amazonの個人情報を隠します」を紹介しましたが、郵便番号のみの非表示で、右側のユーザー名は非表示にしてくれませんでした。そこで、CSSを使って自分で実装してみることにしました。

「CSSちょっとよく分かんない!」、「郵便番号と本名だけ非表示になってくれればOK」という方は、上記記事のChrome拡張機能の方が手間も少なくておすすめです。

合わせて読みたい

前提

この記事は、既にStylebotをインストールして、なおかつ簡単な使い方を知っている前提です。ウェブサイトに自分で作成したCSSを適用できるChrome拡張機能です。

まだインストールしていない方は、以下の記事を参考にしてみてください。

Firefoxをお使いの方

Stylebotは、Chrome拡張機能のみの提供で、Firefoxアドオンは公開されていません。Chrome、Vivaldi、EdgeなどのChromiumベースのブラウザのみ利用できます。

Firefoxをご利用の方は、代わりに「Stylus」というアドオンを使ってみてください。同じようにウェブサイトにCSSを適用できます。Stylebotと比べて、レイアウトや設定画面は異なりますが、CSSを書き込んで適用するという点では一緒です。

下記記事は、VivaldiブラウザのウェブパネルにCSSを適用するといった内容ですが、Stylus(Chrome拡張機能版)を使っています。画像などは一緒なので参考にしてみてください。

CSS

書き込むコードは、以下になっています。

/*---------------------------------
住所(郵便番号)非表示
-----------------------------------*/
/*通常*/
#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;
}
/*---------------------------------
ユーザー名非表示終了
-----------------------------------*/

適用すると、ヘッダーにある郵便番号、名前、ユーザー名が非表示になります。

Amazonのヘッダーの個人情報(郵便番号、本名、ユーザー名)が非表示になる

マウスを乗せると、表示されます。

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

ヘッダー(画面上部)の左右にある個人情報(郵便番号、本名、ユーザー名)のみが消えるようになっています。

アカウントサービス お客様のご住所

ホバー時も非表示にするCSS

上記CSSは、マウスを乗せると表示するようにしています。

「マウスを乗せた時も表示したくない!」って方は、上記のCSSは使わずに、代わりに下記のCSSを使ってみてください。

/*住所(郵便番号)非表示*/
#nav-global-location-slot {
    opacity: 0;
}

/*ユーザー名非表示*/
.nav-line-1-container span {
    opacity: 0;
}

これで、マウスを乗せても表示されなくなります。

上記CSSは、要素を透明にする(opacity)という意味です。つまり、要素自体はそこに存在しているので、スペースが空きます。

「スペースはいらない!埋めたい!」って方は、以下のCSSを使ってみましょう。上記CSSと併用するわけではなく、どちらかだけを利用してください。

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

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

これで完全に郵便番号が消えて、スペースも埋まります。

「display: none」にするとスペースが詰められる

ユーザー名下にある「アカウント&リスト」の文字は、消さないほうがいいかなぁと思います。消すと、マウスオーバーで表示するアカウントメニューが出てこなくなります。

どうしてもやりたい場合は、”消す”のではなく、”透明化”ですかねぇ。

/*「アカウント&リスト」含むユーザー名の非表示*/
#nav-link-accountList {
    opacity: 0;
}

いちお、完全に抹消するコードも紹介しときます。

/*「アカウント&リスト」含むユーザー名を完全に非表示*/
#nav-link-accountList {
  display: none !important;
}

完全にアカウントサービスが表示されなくなります。おすすめはしません。

アカウントサービスを完全に非表示にするCSS

商品ページの住所も非表示

上記で紹介したCSSは、あくまでヘッダーの個人情報を非表示にするCSSです。

商品ページの配送先住所(〇〇にお届け)の部分は表示されます。ここもCSSで非表示にしてみたいと思います。

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

CSSは、以下です。検索ボックス横の個人情報を非表示にするCSSと一緒に併用できます。

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

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

注文確認画面は、正常に住所が表示される

元に戻す・一時的にオフ

Amazonを開いて、Stylebotアイコンのクリック→「www.amazon.co.jp」をオフにします。これで一時的にCSSがオフになります。再び使いたくなったらオンにします。

Stylebot 「www.amazon.co.jp」をオフにする

Stylusの場合も一緒です。サイトを開いて、Stylusアイコンのクリック→「www.amazon.co.jp」のチェックを外します。

Stylus 「www.amazon.co.jp」をオフにする

感想

以上、Amazon上の個人情報を非表示にするCSSについてでした。

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

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

Posted by ナポリタン寿司