楽天の買い物かごボタンをカスタマイズする

楽天の仕様変更により、

買い物かごボタンと資料請求ボタンが

こちらで設定したオリジナルのボタンが表示されなくなってしまった件。

気がついたら、デフォルトに戻っていました。
（2015年11月現在）

今回は、新たにオリジナルボタンを設置する方も必見
楽天の買い物かごボタンと資料請求ボタンをカスタマイズする方法を教えます！
（私は以前のモノを修正）

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

今までの　買い物かごボタン　指定

/* 買い物かご
+++++++++++++++++++++++++++++++++ ▽ */

#rakutenLimitedId_aroundCart input[value="買い物かごに入れる"] {
    width: 300px;
    height: 80px;
    overflow: hidden;
    margin: 5px 0 0 0;
    border: 0;
    text-indent: -9999px;
    white-space: nowrap;
    cursor: pointer;
    background: url("オリジナルボタンの画像URL") no-repeat 0 0;
}
#rakutenLimitedId_aroundCart input[type='submit']:hover {
    background: url("オリジナルボタンの画像URL") no-repeat 0 -80px;
}

ボタンの画像はこんな感じ（転用禁止）

上記のCSSでは効かなくなっています。

こちらがデフォルトデザイン

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

こちらは資料請求のボタンカスタマイズ

/* 資料請求のボタン
+++++++++++++++++++++++++++++++++ ▽ */

#rakutenLimitedId_aroundCart table font input[value="資料請求"] {
    background: transparent url("オリジナルボタンの画像URL") no-repeat scroll 0% 0%;
    border: medium none;
    width: 300px;
    height: 80px;
    overflow: hidden;
    text-indent: 200%;
    display: block;
    margin: 0px 0px 50px 0px;
    cursor: pointer;
}
	
#rakutenLimitedId_aroundCart table font input[type='submit'][value="資料請求"]:hover {
    background: url("オリジナルボタンの画像URL") no-repeat 0 -80px;
}

ボタンの画像はこんな感じ（転用禁止）

同じく上記のCSSでは効かなくなっています。

デフォルトデザインはこちら

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

買い物かごボタン　の中身を見てみましょ～(´・ω・｀)

■楽天デフォルトHTMLソース

<input style="cursor: auto !important;" value="買い物かごに入れる" id="normal_basket_10000883" data-timesale-id="" class="rCartBtn" type="submit">

■楽天デフォルトCSS

div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"] {
    background-image: url("http://image.rakuten.co.jp/com/img/rms/storefront/pc/page/btn01_212x68.png") !important;
    background-position: 0px 0px !important;
    background-color: transparent !important;
    width: 212px !important;
    height: 34px !important;
    border-style: none !important;
    color: transparent !important;
    text-indent: 200% !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding: 0px !important;
    margin: 10px 0px 0px !important;
    border-radius: 3px !important;
    font-size: 100% !important;
    box-shadow: none !important;
    float: initial !important;
    filter: none !important;
    background-size: 100% auto !important;
    line-height: 1 !important;
    transition: initial !important;
    vertical-align: initial !important;
}

一見、うわ～～～～っと思うような指定ですが。。。。

なんだかよく似た感じで、画像指定してあるみたいですね。

以前、こんなんだったけ・・・・忘れましたが＾＾；

むちゃくちゃ　 !important　されてますｗｗｗｗｗｗｗｗｗｗ

!important　仕返すしかないです・・・

買い物かごボタン　修正した指定です

div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"] {
    width: 300px !important;
    height: 80px !important;
    cursor: pointer !important;
    background: url("オリジナルボタンの画像URL") no-repeat 0 0 !important;
}
div#rakutenLimitedId_aroundCart input.rCartBtn, div#rakutenLimitedId_aroundCart input.rCartBtn[type="submit"]:hover {
    background: url("オリジナルボタンの画像URL") no-repeat 0 -80px !important;
}

要らなさそうな指定は抜きました。スッキリ～
楽天のデフォルトCSSとかぶっている指定がありましたので。

個数指定の枠が狭苦しくなってしまったので、こちらも調節します。

■個数指定の枠　指定

/* 個数入力欄の大きさ */
#rakutenLimitedId_aroundCart table input#units {
    background: #FFF none repeat scroll 0% 0%;
    border: 1px solid #BBB;
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
　　margin-top:40px  !important;
　　text-align:center;
}

50×50は大きすぎる方は、調節してくださいm(__)m

カスタマイズできたボタンはこんな感じ

●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

ではでは　資料請求ボタン　の中身を見てみましょ～(´・ω・｀)

■楽天デフォルトHTMLソース

<button type="submit" class="rPamphBtn">資料請求</button>

■楽天デフォルトCSS

#rakutenLimitedId_aroundCart button.rPamphBtn {
    background: #F6F6F6 url("http://image.rakuten.co.jp/com/img/rms/storefront/pc/page/btn_query.gif") no-repeat scroll 8px center !important;
}


#rakutenLimitedId_aroundCart .rAskBtn, #rakutenLimitedId_aroundCart .rPamphBtn, #rakutenLimitedId_aroundCart .seeReview {
    min-width: 212px !important;
    min-height: 28px !important;
    border: 1px solid #CDCDCD !important;
    border-radius: 3px !important;
    padding-left: 28px !important;
    text-align: left !important;
    word-break: break-all !important;
    margin: 10px 0px 0px !important;
    font-size: 13px !important;
}
#rakutenLimitedId_aroundCart * {
    font-family: " ",sans-serif !important;
}

以前より、指定が簡単になったような気がします！

そして、新しく訂正した　資料請求ボタンの指定

#rakutenLimitedId_aroundCart button.rPamphBtn {
    background: transparent url("オリジナルボタンの画像URL") no-repeat scroll 0% 0% !important;
    border: medium none !important;
    width: 300px;
    height: 80px;
    overflow: hidden;
    text-indent: 200%;
    display: block;
    margin: 0px 0px 50px 0px !important;
    cursor: pointer;
	text-indent: -9999px;

}
#rakutenLimitedId_aroundCart button.rPamphBtn:hover  {
	background: url("オリジナルボタンの画像URL") no-repeat 0 -80px !important;
}

カスタマイズできたボタンはこんな感じ

これでボタンが設置された事を確認して下さい♪

もしかしたら、余分な指定があるかもしれません。

私は、マウスカーソルが上にきたときに
画像を切替える指定をしていますが、指定しなくても楽天がデフォルトで
白がけ（赤いボタンなら、ピンクっぽくなる）してくれるので、指定しなくてもどちらでも良いと思います。

いかがでしたでしょうか？

お役に立てると嬉しいです＾＾