Amazon ページ右端のカート内商品リストを非表示にする方法

1. はじめに

いつの頃からか、Amazon の商品ページを開くと、右端に「カート内の商品」がリスト表示されるようになりました（ある程度大きなウィンドウの場合のみ）。

少し調べた範囲では、公式にここを非表示にする方法はないようです。

本記事では、Chrome の拡張機能である「Stylus」を使ってこの部分を非常時にする手順について説明します。

2. 手順

(1) Chrome の拡張機能である「Stylus」をインストールします。

(2) Amazon の商品ページを開きます。

(3) ツールバー上の Stylus アイコンをクリックします。

小さなポップアップウィンドウが表示されるので、その中にある「amazon.co.jp」の部分をクリックします。

(4) amazon.co.jp に対するスタイルを編集する画面が開きます。

(5) 以下のスタイルを入力します。

#nav-flyout-ewc {
    content-visibility: hidden
}

(6) 画面左側でこのスタイルの名前をセットし、[保存] ボタンを押します。

ここで、[管理画面に戻る] をクリックすると、以下の画面のように登録しているスタイルが一覧表示されます。

(7) Stylus のウィンドウを閉じます。

以上で設定は終わりです。

Amazon の商品ページを開くと、右端のカート内一覧の部分が非表示になっているはずです。

その商品ページで、再度 Stylus のアイコンをクリックすると、先程登録したスタイルの名前の先頭にチェックボックスが表示されます。チェックを外すと即座にスタイルが適用されなくなります。

3. おわりに

Amazon のページに限らず、Webページ上のスタイルを自分用に変更するには、Stylus がとても便利です。

同じ要領で、特定のウェブページ上で特定の JavaScript コードを実行したい場合は、Tampermonkey という拡張機能で実現可能です。以下の記事で触れていますので、よろしければ御覧ください。