[1/5]お買い物カゴを綺麗に！楽天カート周りのCSSデザイン【カゴボタン編】

楽天のデフォルトデザインも、最近では徐々に改善されてきているようです。
しかしまだまだ店舗側でデザインを改善すべきところはたくさんあります！
大切なカート回りもその一つかと思います。

1. 買い物カゴに入れるボタンをディテールアップ

まず有難いことにカート回りの<div>や<input>には、クラスやIDが振られているため、
そのあたりをフックにスタイルを適用することができます。

<div id="rakutenLimitedId_aroundCart" class="standard">

<form method="post" data-timesale-id="10000324" action="https://basket.step.rakuten.co.jp/rms/mall/bs/cartadd/set?l2-id=Item_cart_A">

<span class="unit">個数 </span>

<input value="1" type="text" size="4" name="units" id="units" class="rItemUnits">
<input value="買い物かごに入れる" type="submit" id="" data-timesale-id="" class="rCartBtn">
<input value="ES01_003_001" type="hidden" name="__event">
<input value="311213" type="hidden" name="shop_bid">
<input value="10000324" type="hidden" name="item_id">
<input value="1" type="hidden" name="inventory_flag">

</form>
</div>

というわけで楽天お買物かごのソースはこんな感じになっています。

<div id="rakutenLimitedId_aroundCart" class="standard">
<span class="unit">個数 </span>
<input value="1" type="text" size="4" name="units" id="units" class="rItemUnits">
<input value="買い物かごに入れる" type="submit" id="" data-timesale-id="" class="rCartBtn">

この中から上記の4つを利用してデザインを加えてゆきます。

以下の画像のようにデフォルトのものから変更をかけてゆきます。

デザインに伴ってお買い物かごに使用する画像も用意します。
サンプル画像

ではでは、楽天GOLDご契約の場合は外部CSSに、そうでない店舗の場合は、
ヘッダーフッターレフトナビのデザイン設定に直接、CSSコードを記入してください。

#rakutenLimitedId_aroundCart span.unit{
 font-size:18px; /*店舗ごとに任意*/
 font-weight:bold; /*店舗ごとに任意*/
 height:30px; /*店舗ごとに任意*/
}

#rakutenLimitedId_aroundCart input#units {
 border:solid 5px #ccc; /*店舗ごとに任意*/
 width: 50px !important; /*店舗ごとに任意*/
 height: 50px !important; /*店舗ごとに任意*/
 cursor:auto;
 text-indent:0px; /*店舗ごとに任意*/
 overflow:hidden;
}

/*2015.07.10追記、楽天に仕様変更がありました*/
body div#pagebody #rakutenLimitedId_aroundCart input.rCartBtn,
body div#pagebody #rakutenLimitedId_aroundCart input#units + input {
 width: 378px !important; /*店舗ごとに任意*/
 height: 70px !important; /*店舗ごとに任意*/
 background: url(***/***/btn_cart.png) no-repeat !important; /*店舗ごとに任意*/
 overflow:hidden !important;
 border-width: 0px !important;
 cursor: pointer !important;
 text-indent:150% !important; /*店舗ごとに任意*/
 white-space:nowrap !important;
 margin:5px 0 !important; /*店舗ごとに任意*/
}

ボタンに使用する画像や各サイズなどについては、
店舗によって様々だと思いますので、任意でご変更ください！
これでお買物かごについては終了です。

最後に

いかがでしたでしょうか。
楽天で使用されているカートシステムには、クラスやIDが色々と振られています。
そのあたりをよーく見ていけば、細かなデザインを施すことが可能になっています。
一度まじまじと見つめてみると、店舗ごとの多様なデザインが実現できるはずです。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ！！

1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
2. 商品問い合わせボタンをディテールアップ(第2回記事)
3. お気に入り登録ボタン＆お気に入り店舗登録ボタンのディテールアップ(第3回記事)
4. レビュー記入ボタン＆レビューを読むボタンのディテールアップ(第4回記事)
5. 各種SNS投稿ボタンのディテールアップ(第5回記事)

楽天商品ページでフォトギャラリーを実装！jQueryを使ったデザインの方法。

ショップ運営でお悩みの方へ。

ネット通販やウェブ制作、ECサポート事業を行っている（株）ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。

ショップ運営のお悩み、ご相談ください。

ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。

CONTACT
48時間以内に返信します

または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00（土日祝休み）

06-6271-7761

ABOUT ME

ぜぇれさん外部デザイナーTwitter:@zeelesan: 兵庫在住WEBデザイナー。楽天／ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧