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

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

今回はSNS投稿ボタンのデザイン方法をご紹介します!
さてさて第1回記事第2回記事第3回記事第4回記事にて、
楽天カート周辺のボタンにデザインを加える方法をご紹介して参りました。
その一連の記事のラストになります。よろしくお願いします。

Sponsored Link

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

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

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

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

5. 各種SNS投稿ボタンのディテールアップ

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
駆け足でまいりましたがこれで最後です!
カートの下部に設置されている各SNSボタンにデザインを加えましょう!

<ul><li class="iconMulti">
<div class="susumeruShareButton"><span>シェアする</span></div>
<div class="susumeruShareCount"><span>0</span></div></li>
<li class="iconRakutenblog"><div class="susumeruServiceButton"><span></span></div></li>
<li class="iconTwitter"><div class="susumeruServiceButton"><span></span></div></li>
<li class="iconFacebook_feed"><div class="susumeruServiceButton"><span></span></div></li>
<li class="iconMixi_check"><div class="susumeruServiceButton"><span></span></div></li>
<li class="iconOthers"><div class="susumeruServiceButton"><span></span></div></li>
</ul>

対象となる要素はこちら!

いつもどおりボタン画像を用意します。
見出し楽天TwitterFacebookMixiそのほか画像

そして以下のCSSを適用します。

/* メディアシェアエリア */
#serviceTableSml div.susumeruWidget {
 width:100%;
 clear: both;
}

#serviceTableSml div.susumeruWidget div.susumeruParts li.iconMulti {
 margin-right: 10px !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts div.susumeruShareButton {
    height: 60px !important;
    width: 140px !important;
    background: url(../../img/base/share_btn_01.gif) no-repeat !important;
    cursor: pointer !important;
 background-color:#74cacf !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts div.susumeruShareCount {
 display: none !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li {
 float: left !important;
 overflow: hidden !important;
 margin-right: 10px !important;
 margin-top: 10px !important;
 zoom: 1 !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li.iconRakutenblog div.susumeruServiceButton {
    height: 60px !important;
    width: 60px !important;
    background: url(../../img/base/share_btn_02.gif) no-repeat !important;
    cursor: pointer !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li.iconTwitter div.susumeruServiceButton {
    height: 60px !important;
    width: 60px !important;
    background: url(../../img/base/share_btn_03.gif) no-repeat !important;
    cursor: pointer !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li.iconFacebook_feed div.susumeruServiceButton {
    height: 60px !important;
    width: 60px !important;
    background: url(../../img/base/share_btn_04.gif) no-repeat !important;
    cursor: pointer !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li.iconMixi_check div.susumeruServiceButton {
    height: 60px !important;
    width: 60px !important;
    background: url(../../img/base/share_btn_05.gif) no-repeat !important;
    cursor: pointer !important;
}

#serviceTableSml div.susumeruWidget div.susumeruParts ul li.iconOthers div.susumeruServiceButton {
    height: 60px !important;
    width: 60px !important;
    background: url(../../img/base/share_btn_06.gif) no-repeat !important;
    cursor: pointer !important;
}

これでこのような形に変更ができたかと思います。
楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。

反映後のイメージは、弊社の運営する楽天サイトで実装済みのサンプルからご確認いただけます。

最後に

いかがでしたでしょうか。
以上で楽天カート周辺のデザインTIPSは一旦終了となります。
一旦というと「ほかにもあるの?」って話になってくると思うんですがあるんです

それはまた別の機会にまとめさせていただければと思います!
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです

ララバイ!!

※一言。
記事書いていて気づいたんですが、楽天ってブラウザごとにソースコードが違うことに気づきました。
こういったCSSを利用した楽天のハックはブラウザごとで大きく崩れる可能性があります。
楽天が細かなマイナーチェンジやバージョンアップを行ってきた場合も、同様にエラーが起こりそうな悪寒。
皆様ちょいちょい各ブラウザで確認することをおススメします!

楽天サイトでフルスクリーン商品ページをつくる!背景画像を使ったデザインの方法。

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

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

コメントを残す

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