Amazonの売り上げランキングの一覧表示で、気にくわないところがある。
( http://www.amazon.co.jp/gp/bestsellers/videogames/ )
上の画像のように、Amazonに商品の在庫が無くてもマーケットプレイスに「マーチャント(いわゆる、Amazonからの評価が高い出品者)」が出品していれば、Amazonが販売するのと同じように「カートに入れるボタン」が表示されてしまうところ。
ボタンの上に「販売元:●×▲~」と表示されるから、特に問題は無いが、どうにかしたい。
何でこんな風にしたんだ・・・とおもったら、記事を見つけた。
企業が専用ストアを作成できる「マーチャント@amazon.co.jp」
意図的に同じボタンにしているみたいだ。
こういう出品者は、定価より高い場合がほとんどだし、送料もかかる。配送も別々になったりもする。
とにかく、販売元がAmazonじゃない場合は、ボタンを違う表示にして、ぱっと見で分かるようにしたい。
そこで、ユーザースタイルシートでボタンの表示を少し弄ってみようと思う。
Amazonが販売しているのと、そうで無いのとの違いは、商品をカートに入れるボタンの前に「販売元:●×▲~」と表示される点。ソースをみてみよう。
<p class="merchantOfferMsg">
<span class="tiny">販売元: <a href="ほにゃらら">らぐ2ch商店</a></span></p>
<form action="なんたらかんたら" name="handleBuy" method="post" style="スタイル設定">
(略)
<input width="178" vspace="2" type="image" height="22" border="0"
name="submit.addToCart" value="addToCart" alt="ショッピングカートに入れる" src="ボタンの画像.gif"/>
</form>
販売元:●×▲~は <P class="merchantOfferMsg">タグに挟まれてる。
その後に <form>タグがあって、その中に「カートに入れるボタン」がある。
ボタンは<input value="addToCart">みたいだ。
このまま input[value="addToCart"]のスタイルを変えてしまうと、全部のボタンが変わってしまうので、直前に<p class="merchantOfferMsg">が有る<form>の子供(input)という感じで、もう一つ条件を加える。
CSSのセレクタは
p.merchantOfferMsg + FORM > input[value="addToCart"] で行けると思う。
+が隣接セレクタ >が子供セレクタ
参考サイト:セレクタ - CSS2リファレンス
まとめるとこんな感じで良いと思う。
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("www.amazon.co.jp") {
p.merchantOfferMsg + FORM > input[value="addToCart"] {
opacity:0.3 !important;
}
}
- ドメインがwww.amazon.co.jp
- セレクタは p.merchantOfferMsg + FORM > input[value="addToCart"]
- ボタンを半透明にしたいので、opacity(不透明度)を設定している。
上のCSSをuserContents.cssに書いて、Firefoxを再起動すれば、ユーザースタイルシートが有効になる。Firefoxの拡張のStylishを使うと楽に出来る。(おすすめ)
次の画像のようになる。

- Newer: ニコニコ動画(RC)の広告を消す。
- Older: 愛する妻の裏の顔|第五話
