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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。

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

Sponsored Link

こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです

今回はデフォルトのままだと味気ない、楽天カート回りのデザイン方法をご紹介します!
ちなみにこんな感じのカート回りにスタイリングしてゆきます。

記事がなかなか長くなりますので、要素別に5つの記事に分けてご紹介してゆきますね。

※一言
楽天GOLD(無料)と契約していると便利

それではやってみましょう。

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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
まず有難いことにカート回りの<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つを利用してデザインを加えてゆきます。

以下の画像のようにデフォルトのものから変更をかけてゆきます。
楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。

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

ではでは、楽天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が色々と振られています
そのあたりをよーく見ていけば、細かなデザインを施すことが可能になっています。
一度まじまじと見つめてみると、店舗ごとの多様なデザインが実現できるはずです。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ!!

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

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

または、お電話でも承ります。
 10:00 - 19:00(土日祝休み)

06-6271-7761

ABOUT ME

ぜぇれさんデザイナーTwitter:@zeelesan
加古川在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事した後、ビリオンプラン立ち上げに参加。時計・雑貨のFLOAT運営担当。ご相談はこちらより。グランブルーファンタジーやりましょ!! →記事一覧
Sponsored Link

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です