お買い物かご画像の変更について

Question

お買い物かごが自動変更になってしまったため、以前使っていたｃｓｓでお買いものかごの画像を変更したいとおもっております。
以前使っていたｃｓｓ（共通説明文（大）に記載してます。）は、商品をお気に入りに追加するボタンとお気に入りショップへ登録をするボタンと買い物かごが全部一緒になっているものでした。

使っていたｃｓｓは下記になります。




/* お気に入り商品差し替えタグ */
#rakutenLimitedId_aroundCart #serviceTableSml td.favorite {
padding-top: 5px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px 10px 0px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm {
width: 250px !important;
height:80px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin:0px 0px 10px 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/1okiniiribana.gif") no-repeat !important;
}

/* お気に入りショップ差し替えタグ */
div.bookmarkArea {
width: 250px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px !important;
padding-left: 0px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin-right: 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/okiniirishopbana.gif") no-repeat !important;
}




.inventory font{
font-size:70% !important;
color:#999 !important;
}



input[value="買い物かごに入れる"]{

font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #d83526;
padding:9px 18px;
text-decoration:none;
        
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% );
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% );
       background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) );

background-color:#fe1a00;
color:#ffffff;
display:inline-block;
text-shadow:1px 1px 0px #b23e35;
  box-shadow:inset 1px 1px 0px 0px #f29c93;
}

iframe.reserve_caution{
height:850px;
width:598px;
border:1px solid #999999;
margin-top:20px;



---------------------------
お買いものかごの自動変更があった際に、お買いものかごのみが自動変更されたものになっており、お気に入り商品登録・お気に入りショップ登録は以前のままで不具合なく通常に使えています。


上記CSSの内容を変更してお買いものボタンを独自のものに変更することは可能でしょうか？
もし変更が可能であれば変更内容のCSSを教えてください。

Accepted Answer

ECマスターズの橋本です。

買い物かごに関しては、先日の楽天側のリリースにより、
全ショップ統一のかごデザインに変更になりました。

以前までは、PCは非常に目立たない状態でしたので、
買い物かごを探すことすら難しい状況でしたが、
今は全ショップ統一デザインとなっている関係で、
お客さんとしては、

　赤いボタン＝買い物かご

と認識するようになっております。

場合によっては、ショップ別にかごをカスタマイズするよりは、
統一デザインにした方が良い場合もありますので、
そういった点も考慮の上、カスタマイズを検討していただければと思います。

Answer

ECマスターズの田中です。

CSSの変更手順をご案内いたします。

１．
楽天の規則より強い規則を作るため、
input[value="買い物かごに入れる"]{
を
body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{
に変更する。

２．
全てのスタイルの末尾に !important を追記する。

３．
楽天の規則にて追加されたスタイルを無効にするため、
text-indent: 0 !important;
を追記する。


以上の変更を加えると、下記のような記述になります。

===== この下の行から =========================
body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{

font-size:16px !important;
font-family:Arial !important;
font-weight:normal !important;
-moz-border-radius:8px !important;
-webkit-border-radius:8px !important;
border-radius:8px !important;
border:1px solid #d83526 !important;
padding:9px 18px !important;
text-decoration:none !important;
        
background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ) !important;
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% ) !important;
       background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) ) !important;

background-color:#fe1a00 !important;
color:#ffffff !important;
display:inline-block !important;
text-shadow:1px 1px 0px #b23e35 !important;
  box-shadow:inset 1px 1px 0px 0px #f29c93 !important;
  
text-indent: 0 !important;

}
===== この上の行まで =========================

Answer

CSSを変更した場合、下記の記述であってますでしょうか？

---------------------------------------



/* お気に入り商品差し替えタグ */
#rakutenLimitedId_aroundCart #serviceTableSml td.favorite {
padding-top: 5px;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px 10px 0px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm {
width: 250px !important;
height:80px !important;
}
#rakutenLimitedId_aroundCart div.bookmarkArea div.bkm a.addBkm span.bkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin:0px 0px 10px 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/1okiniiribana.gif") no-repeat !important;
}

/* お気に入りショップ差し替えタグ */
div.bookmarkArea {
width: 250px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm {
width: 250px !important;
height:80px !important;
padding: 0px 0px !important;
padding-left: 0px !important;
}
#rakutenLimitedId_aroundCart div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
display: inline-block !important;
width: 250px !important;
height:80px !important;
margin-right: 0px !important;
background: url("http://image.rakuten.co.jp/huusuikazan/cabinet/kihon/okiniirishopbana.gif") no-repeat !important;
}




.inventory font{
font-size:70% !important;
color:#999 !important;
}





body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]{

background-image: url(【画像URL】) !important;
width: 【画像横幅】 !important;
height: 【画像縦幅】 !important;
}

font-size:16px !important;
font-family:Arial !important;
font-weight:normal !important;
-moz-border-radius:8px !important;
-webkit-border-radius:8px !important;
border-radius:8px !important;
border:1px solid #d83526 !important;
padding:9px 18px !important;
text-decoration:none !important;

background:-moz-linear-gradient( center top, #fe1a00 5%, #ce0100 100% ) !important;
background:-ms-linear-gradient( top, #fe1a00 5%, #ce0100 100% ) !important;
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #fe1a00), color-stop(100%, #ce0100) ) !important;

background-color:#fe1a00 !important;
color:#ffffff !important;
display:inline-block !important;
text-shadow:1px 1px 0px #b23e35 !important;
box-shadow:inset 1px 1px 0px 0px #f29c93 !important;

text-indent: 0 !important;

}




------------------------------------------
よろしくお願いいたします

Answer

ECマスターズの田中です。

「買い物かごに入れる」の文字を利用するのではなく、
完全に画像に入れ替える場合の記述でしょうか。

規則の終わりを示す } がスタイルの途中に入っております。
下のスタイルは不要ですので、 1つ目の } 以下のスタイル、及び } は削除してください。
また、マウスカーソルを当てた際、背景画像をずらすスタイルが入りますので、
背景画像の位置を固定するスタイルを追加してください。

下記のような規則になります。

===== この下の行から ================
body div#rakutenLimitedId_aroundCart input.rCartBtn, body div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"], body div#rakutenLimitedId_aroundCart input.rCartBtnHover, body div#rakutenLimitedId_aroundCart input.rCartBtnHover[type="submit"] {
	background: url(【画像URL】) no-repeat !important;
	background-position: 0 0 !important;
	width: 【画像横幅】 !important;
	height: 【画像縦幅】 !important;
}
===== この上の行まで ================

Answer

何回か買い物カゴを変更しようしましたが、エラーになったりしてうまくいかなかったので、
橋本さんに言われた通り、確かに

赤いボタン→お買いものかご

と認識されているように思いますので、現状のままにします。
いろいろありがとうございました。