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

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

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

駆け足でまいりましたがこれで最後です！
カートの下部に設置されている各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>

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

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

そして以下の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;
}

これでこのような形に変更ができたかと思います。

最後に

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

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

ララバイ！！

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

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

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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