【Amazon】ヘッダーのポイント数などを非表示にするCSS
Amazonショッピングサイトでは、検索ボックス下に各ジャンルのボタンがあります。Amazonポイント、カスタマーサービス、タイムセール、Prime Reading、Amazonファッションなどなどです。
これらの項目を、それぞれ個別に消してみます。
「スクショした時に、Amazonポイント数が映ってしまうのが心配！」という方や、「自分が頻繁に利用するジャンルだけを表示して、他は消したい！」という方、参考にしてみてください。
ただし、あんまり検証していません。もし、想定外のことが起こった場合は、問い合わせより連絡いただければなと思います。
本記事は、Chrome拡張機能・Firefoxアドオンが利用できるPCブラウザ向けです。スマホのアプリ版ではできません。
余談ですが、以前、ヘッダー項目を複数行にして、全部表示する記事も書きました。デフォルトでは一行表示ですが、実は沢山の項目（ジャンル）が隠れています。
https://www.naporitansushi.com/amazon-header-not-hidden/インストール方法
Chromeウェブストアからインストールできます。Chrome拡張機能だけでなく、「Microsoft Edge」と「Firefox」版もあります。
https://chromewebstore.google.com/detail/stylebot/oiaejidbmk...「Chromeに追加」をクリックしてインストールします。
右上に拡張機能ボタンが追加されればOKです。詳しく使い方を知りたい方は、以下の記事を参考にしてみてください。
Amazonヘッダー項目を個別に非表示にするCSS
「Amazon
」にアクセスします。インストールした「Stylebot」拡張機能アイコンをクリック→「Stylebotを開く」をクリックします。
右側に白紙のサイドバーが表示されます。もし初めて「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ポイント」だけ消したい場合は、以下画像のように、その部分だけを書き込みます。書き込めたら右上の「×」でスタイルシートを閉じます。
再度拡張機能ボタンを押して、登録したサイト（例：www.amazon.co.jp）がオンになっていることを確認します。オンになっている間は有効になっているということです。
これで、検索ボックス下にあるタブメニューから、「Amazonポイント」が隠れます。
一時的に無効化したい場合は、「Stylebot」拡張機能アイコンを左クリック→「www.amazon.co.jp」をオフにします。完全に使わなくなった場合は書き込んだコードを削除します。
CSSを圧縮する方法
上記コードを個別に書いていたら長くて大変です。CSSを圧縮することで短くできます。下記サイトにアクセスします。
https://rakko.tools/tools/33/自分が消したい項目を、テキストエリアにコピペします。「圧縮」をクリックします。
下部に圧縮後のCSSが表示されます。「コピー」でクリップボードにコピーできます。改行、コメントアウトが削除されてスッキリします。
コピーしたコードを、Stylebotに貼り付けます。
Amazonナビゲーションバー項目をまとめて非表示にするCSS
そもそもヘッダー（ナビゲーションバー）自体が不要な場合は、以下のCSSを書きます。
/*ヘッダー（ナビゲーションバー）非表示*/
#navbar>div#nav-main {
display: none !important;
}
ヘッダーが丸々削除されます。正確には、ヘッダーではなく、ナビゲーションバーという項目です。
Amazonポイント数だけ消して、ホバー時に表示
以下のCSSを利用します。
/*【ヘッダー】 ポイント数だけ非表示・ホバー時に表示*/
header#navbar-main a#nav-discobar-jppoints-link>:is(span,b):not(:hover) {
opacity: 0;
}
これで、「Amazonポイント」というテキストは非表示にしません。数字だけ非表示にして、マウスを乗せた時は表示します。
感想
以上、「Amazon」のヘッダー（ナビゲーションバー）項目を個別・まとめて非表示にするCSSでした。
本記事は、恐らく日本語以外の言語にしていると利用できません。日本語（JP）のみです。