【Stylebot】Amazonのサイト上部にある郵便番号とユーザー名を非表示にするCSS

2021年12月2日Stylebot&Stylus

Stylebot のアイコン

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

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

Amazon のスクリーンショット

CSS を使うことで、Amazon のヘッダーにある郵便番号とユーザー名を非表示にできます。Amazon の画面をスクリーンショットする際に、いちいち個人情報にモザイクをかける手間が省けます。

Amazon 上でスクリーンショットを撮影する人におすすめです。うっかりモザイクをかけ忘れて、SNS に個人情報が流出するのを防げます。

通常だと、以下画像のようにAmazon にログインしているとヘッダーに個人情報(お届け先の郵便番号、アカウント名)が表示されるようになっています。

本来は、どのアカウントでログインしているか判別するための表示なんですが、スクショを頻繁にする方にとっては、毎回モザイクをしないといけないので不便です。

以前、同じような機能のChrome拡張機能「Amazonの個人情報を隠します」を紹介したのですが、この度自分でやってみようと思ってCSS で実践してみました。

参考:【Amazonの個人情報を隠します】個人情報を非表示にするChrome拡張機能。ブロガーにおすすめ! | ナポリタン寿司のPC日記

Stylebot と呼ばれるウェブサイトにCSS を適用するChrome拡張機能1つあればできます。Amazon の個人情報隠すためだけに、専用のChrome拡張機能を入れるのはめんどくさい!って方、ぜひ試してみてください。

Stylebot はAmazon の個人情報だけでなく、他のウェブサイトのデザインを変更できる便利な拡張機能です。

前提

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

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

CSS

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

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

/*住所(郵便番号)非表示*/
a.nav-a.nav-a-2.a-popover-trigger.a-declarative.nav-progressive-attribute {
  display: none;
}

以下画像のようになればOKです。自動でヘッダーにある郵便番号、名前、ユーザー名が非表示になります。

ヘッダーの個人情報を非表示にする

なお、アカウントサービスや購入時の配送先を指定する画面では通常通り住所は表示されます。ヘッダー(画面上部)の検索欄の左右にある個人情報のみが消えるようになっています。

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

【余談】商品ページの住所も非表示

余談です。

上記で紹介したCSS は、あくまでヘッダーの個人情報を非表示にするCSS です。商品ページの配送先住所(〇〇にお届け)の部分は表示されます。ここもCSS で非表示にしてみたいと思います。

REALFORCE R3
REALFORCE リアルフォース 東プレ R3 キーボード

非表示にするCSS は以下になります。

/*商品ページの住所(配送先)非表示*/
span#contextualIngressPtLabel {
    display: none;
}

非表示になります。

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

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

注文確認画面

まとめ

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

配送先は1つしかないという方でなおかつスクショをするって方向けですね。うっかりミスを防げます。

ただし、ある日突然Amazon 側がサイトデザインを変更することも可能性としてあるので、スクショする時は非表示になっているか確認するようにしましょう。

Posted by ナポリタン寿司