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

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

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

Sponsored Link

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

記事がなかなか長くなりますので、5つの記事に分けて要素別にご紹介しておりまーす!

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

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

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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
続いてはブックマークボタンにデザインを加えてみましょう!サクッと!

<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;
}

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

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
反映後のイメージは、弊社の運営する楽天サイトで実装済みのサンプルからご確認いただけます。

最後に

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

ララバイ!!

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

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

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

2 Comments(Trackback)

K輔

参考に買い物かごを作っているのですが、おきにアイテムボタンとお気にショップボタンが横並びにならず、折れてしまいます。画像等の幅は合わせているのですが、どう考えればいいでしょうか。

Reply
ぜぇれさん

K輔さんこんにちは。
ページを拝見していないので正確にはお答えできませんが、
コンテンツ部分の幅が足りていないのだと思います。

ページ幅を増やすか、
お気に入りアイテムボタン、お気に入りショップボタンのサイズを小さくして試してみてください!

Reply

コメントを残す

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