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

今回は、お気に入り商品＆お気に入り店舗登録ボタンのデザイン方法をご紹介します！
第1回記事、第2回記事にて楽天カート周辺ボタンにデザインを加える方法をご紹介しましたが、
その続きとなる記事になっております！

3. お気に入り商品＆お気に入り店舗ボタンのディテールアップ

続いてはブックマークボタンにデザインを加えてみましょう！サクッと！

<span class="bkmStar"></span>

対象となる要素はこれ！

<span class="shopBkmStar"></span>

とコレ！

こちらもボタンとなる画像を用意します。
お気に入り商品とお気に入り店舗

そして親要素のクラスやIDを絡めて以下のCSSを適用します。

/* お気に入り商品登録 */
div.bookmarkArea {
	width:500px;
}

#rakutenLimitedId_aroundCart #serviceTableSml {
	margin-top:-7px;
}

body div.bkm{
	width: 240px !important;
	height: 65px !important;
}

body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
	display:inline-block !important;
	width: 240px !important;
	height: 65px !important;
	background: url(../../img/base/btn_favitem.png) no-repeat !important;
}

/* お気に入り店舗登録 */
body #rakutenLimitedId_aroundCart div.shopBkm {
	padding:7px 0 7px 10px !important;
	width: 240px !important;
	height: 65px !important;
}

body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
	display:inline-block !important;
	width: 240px !important;
	height: 65px !important;
	background: url(../../img/base/btn_favshop.png) no-repeat !important;
}

これでこのような形に変更ができました。

最後に

これでカート周辺のデザインTIPSも3回目です。
残り2回も駆け足でサクッと進めてまいります！
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ！！

ECサイトを華やかに！楽天で使えるjQueryプラグイン5選。

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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