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

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

【Amazon】ヘッダーのポイント数などを非表示にするCSS

Amazon

Amazonのアイコン

この記事では、「Amazon」のナビゲーションバー(ポイント数、ホーム&キッチンなど)を個別に非表示にするCSSについて書きます。

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

【Amazon】ヘッダーのポイント数などを非表示にするCSS

Amazonショッピングサイトでは、検索ボックス下に各ジャンルのボタンがあります。Amazonポイント、カスタマーサービス、タイムセール、Prime Reading、Amazonファッションなどなどです。

Amazonショッピングサイトのナビゲーションバー画像

これらの項目を、それぞれ個別に消してみます。

「スクショした時に、Amazonポイント数が映ってしまうのが心配!」という方や、「自分が頻繁に利用するジャンルだけを表示して、他は消したい!」という方、参考にしてみてください。

ただし、あんまり検証していません。もし、想定外のことが起こった場合は、問い合わせより連絡いただければなと思います。

本記事は、Chrome拡張機能・Firefoxアドオンが利用できるPCブラウザ向けです。スマホのアプリ版ではできません。

余談ですが、以前、ヘッダー項目を複数行にして、全部表示する記事も書きました。デフォルトでは一行表示ですが、実は沢山の項目(ジャンル)が隠れています。

インストール方法

Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。

「Chromeに追加」をクリックしてインストールします。

「Stylebot」のインストール手順画像

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

Amazonヘッダー項目を個別に非表示にするCSS

Amazon」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。

Stylebotのスクリーンショット1

右側に白紙のサイドバーが表示されます。もし初めて「Stylebot」を起動した場合は、「ベーシック」という画面が表示されます。下部にある「コード」をクリックすると、白紙のスタイルシート画面を開けます。以下のコードを書き込みます。全てを書き込む必要はありません。自分が消したい項目だけ書き込みます。結構長いです。

/*【ヘッダー】 ポイント非表示*/
header#navbar-main a#nav-discobar-jppoints-link {
  display: none !important;
}

/*【ヘッダー】 カスタマーサービス*/
header#navbar-main a[href^="/%E3%83%98%E3%83%AB%E3%83%97/b/"] {
  display: none !important;
}

/*【ヘッダー】 Prime Video*/
header#navbar-main a[href^="/Amazon-Video/b/"] {
  display: none !important;
}

/*【ヘッダー】 Amazon Basics*/
header#navbar-main a[href^="/amazon_basic?ref_"] {
  display: none !important;
}

/*【ヘッダー】 タイムセール*/
header#navbar-main a[href^="/gp/goldbox?"] {
  display: none !important;
}

/*【ヘッダー】 再購入*/
header#navbar-main a[href^="/gp/buyagain?"] {
  display: none !important;
}

/*【ヘッダー】 Amazonビジネス*/
header#navbar-main #nav-ab-cat-acquisition {
  display: none !important;
}

/*【ヘッダー】 ミュージック*/
header#navbar-main a[href^="/music/unlimited"] {
  display: none !important;
}

/*【ヘッダー】 ギフトカード*/
header#navbar-main a[href^="/gp/gc?ref_=nav_cs_gc"] {
  display: none !important;
}

/*【ヘッダー】 プライム*/
header#navbar-main a[href^="/prime?ref_=nav_cs_primelink_member"] {
  display: none !important;
}

/*【ヘッダー】 Prime Reading*/
header#navbar-main a[href="/kindle-dbs/hz/bookshelf/prime/?ref_=nav_cs_prime_reading"] {
  display: none !important;
}

/*【ヘッダー】 Amazonで売る*/
header#navbar-main a[href="/b/?_encoding=UTF8&ld=AZJPSOASL&node=2490612051&ref_=nav_cs_sell"] {
  display: none !important;
}

/*【ヘッダー】 Amazonファッション*/
header#navbar-main a[href^="/%E3%83%95%E3%82%A1%E3%83%83%E3%82%B7%E3%83%A7%E3%83%B3/b"] {
  display: none !important;
}

/*【ヘッダー】 在庫処分セール*/
header#navbar-main a[href$="nav_cs_outlet"] {
  display: none !important;
}

/*【ヘッダー】 ドラッグストア*/
header#navbar-main a[href^="/%E3%83%89%E3%83%A9%E3%83%83%E3%82%B0"] {
  display: none !important;
}

/*【ヘッダー】 ホーム&キッチン*/
header#navbar-main a[href^="/%E3%83%9B%E3%83%BC%E3%83%A0-"] {
  display: none !important;
}

/*【ヘッダー】 食品&飲料*/
header#navbar-main a[href^="/%E9%A3%9F%E5%93%81-%E9"] {
  display: none !important;
}

/*【ヘッダー】 ビューティー&パーソナルケア*/
header#navbar-main a[href^="/%E3%82%B3%E3%82%B9%E3%83%A1-%E5"] {
  display: none !important;
}

/*【ヘッダー】 DIY・工具*/
header#navbar-main a[href^="/DIY%E3%83%BB%E5%B7%A5%E5%85%B7"] {
  display: none !important;
}

/*【ヘッダー】 おもちゃ&ホビー*/
header#navbar-main a[href^="/%E3%81%8A%E3%82%82%E3%81%A1%E3%82%83"] {
  display: none !important;
}

/*【ヘッダー】 Kindle本*/
header#navbar-main a[href^="/Kindle-%E3%82%AD%E3%83%B3%E3%83"] {
  display: none !important;
}

/*【ヘッダー】 新着商品*/
header#navbar-main a[href^="/ranking?type=new-releases"] {
  display: none !important;
}

/*【ヘッダー】 ギフトランキング*/
header#navbar-main a[href^="/gcx/-/gfhz/"] {
  display: none !important;
}

/*【ヘッダー】 車&バイク*/
header#navbar-main a[href^="/%E8%BB%8A%E7%94%A8%E5%93%81-%E3"] {
  display: none !important;
}

/*【ヘッダー】 本*/
header#navbar-main a[href^="/%E6%9C%AC-%E6%9B%B8%E7%B1%8D-%E9"] {
  display: none !important;
}

/*【ヘッダー】 クーポン*/
header#navbar-main a[href$="&ref_=nav_cs_coupons"] {
  display: none !important;
}

/*【ヘッダー】 ランキング*/
header#navbar-main a[href^="/ranking?type=top-sellers"] {
  display: none !important;
}

/*【ヘッダー】 パソコン・周辺機器*/
header#navbar-main a[href^="/PC%E5%91%A8%E8%BE%BA%E6%A9%9F%E5%99%A8-%E3"] {
  display: none !important;
}

/*【ヘッダー】 マイストア*/
header#navbar-main a[href^="/gp/yourstore/home?ref_=nav_cs_ys"] {
  display: none !important;
}

/*【ヘッダー】 ペットフード・ペット用品*/
header#navbar-main a[href^="/%E3%83%9A%E3%83%83%E3%83%88%E3%83%95%E3%83%BC%E3%83%89-%E3"] {
  display: none !important;
}

/*【ヘッダー】 スポーツ&アウトドア*/
header#navbar-main a[href^="/%E3%82%B9%E3%83%9D%E3%83%BC%E3%83%84-%E3"] {
  display: none !important;
}

/*【ヘッダー】 閲覧履歴*/
header#navbar-main a#nav-recently-viewed {
  display: none !important;
}

/*【ヘッダー】 Audible*/
header#navbar-main a[href^="/Audible-%E3%82%AA%E3%83"] {
  display: none !important;
}

/*【ヘッダー】 定期おトク便*/
header#navbar-main a[href^="/auto-deliveries/landing"] {
  display: none !important;
}

/*【ヘッダー】 ベビー&マタニティ*/
header#navbar-main a[href^="/%E3%83%99%E3%83%93%E3%83%BC%E7%94%A8%E5%93%81"] {
  display: none !important;
}

例えば、「Amazonポイント」だけ消したい場合は、以下画像のように、その部分だけを書き込みます。書き込めたら、右上の「×」でスタイルシートを閉じます。

Stylebotのスクリーンショット2

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

これで、検索ボックス下にあるタブメニューから、「Amazonポイント」が隠れます。

AmazonショッピングサイトにあるナビゲーションバーのAmazonポイントを非表示にした画像

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

CSSを圧縮する方法

上記コードを個別に書いていたら長くて大変です。CSSを圧縮することで短くできます。下記サイトにアクセスします。

自分が消したい項目を、テキストエリアにコピペします。「圧縮」をクリックします。

「JavaScript / Css 圧縮・軽量化」サイトで圧縮する手順画像1

下部に圧縮後のCSSが表示されます。「コピー」でクリップボードにコピーできます。改行、コメントアウトが削除されてスッキリします。

「JavaScript / Css 圧縮・軽量化」サイトで圧縮する手順画像2

コピーしたコードを、Stylebotに貼り付けます。

「JavaScript / Css 圧縮・軽量化」サイトで圧縮したコードをStylebotに貼り付けた画像

Amazonナビゲーションバー項目をまとめて非表示にするCSS

そもそもヘッダー(ナビゲーションバー)自体が不要な場合は、以下のCSSを書きます。

/*ヘッダー(ナビゲーションバー)非表示*/
#navbar>div#nav-main {
  display: none !important;
}
Stylebotのスクリーンショット3

ヘッダーが丸々削除されます。正確には、ヘッダーではなく、ナビゲーションバーという項目です。

Amazonショッピングサイトにあるナビゲーションバーを丸々非表示にした画像

Amazonポイント数だけ消して、ホバー時に表示

以下のCSSを利用します。

/*【ヘッダー】 ポイント数だけ非表示・ホバー時に表示*/
header#navbar-main a#nav-discobar-jppoints-link>:is(span,b):not(:hover) {
  opacity: 0;
}
Stylebotのスクリーンショット4

これで、「Amazonポイント」というテキストは非表示にしません。数字だけ非表示にして、マウスを乗せた時は表示します。

Amazonショッピングサイトにあるナビゲーションバー内のポイント数をマウスホバーで表示・非表示しているGIF画像

感想

以上、「Amazon」のヘッダー(ナビゲーションバー)項目を個別・まとめて非表示にするCSSでした。

本記事は、恐らく日本語以外の言語にしていると利用できません。日本語(JP)のみです。

Amazon