Home > PC/soft | ネット > 販売元がAmazonじゃない『ショッピングカートに入れるボタン』の表示を弄る

販売元がAmazonじゃない『ショッピングカートに入れるボタン』の表示を弄る

Amazonの売り上げランキングの一覧表示で、気にくわないところがある。
　（ http://www.amazon.co.jp/gp/bestsellers/videogames/ ）
070601_001

上の画像のように、Amazonに商品の在庫が無くてもマーケットプレイスに「マーチャント（いわゆる、Amazonからの評価が高い出品者）」が出品していれば、Amazonが販売するのと同じように「カートに入れるボタン」が表示されてしまうところ。

ボタンの上に「販売元：●×▲～」と表示されるから、特に問題は無いが、どうにかしたい。

何でこんな風にしたんだ・・・とおもったら、記事を見つけた。
　企業が専用ストアを作成できる「マーチャント@amazon.co.jp」

意図的に同じボタンにしているみたいだ。
こういう出品者は、定価より高い場合がほとんどだし、送料もかかる。配送も別々になったりもする。

とにかく、販売元がAmazonじゃない場合は、ボタンを違う表示にして、ぱっと見で分かるようにしたい。

そこで、ユーザースタイルシートでボタンの表示を少し弄ってみようと思う。

Amazonが販売しているのと、そうで無いのとの違いは、商品をカートに入れるボタンの前に「販売元：●×▲～」と表示される点。ソースをみてみよう。

<p class="merchantOfferMsg">

<span class="tiny">販売元: <a href="ほにゃらら">らぐ２ｃｈ商店</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;
	}
}