
今回はSNS投稿ボタンのデザイン方法をご紹介します!
さてさて第1回記事、第2回記事、第3回記事、第4回記事にて、
楽天カート周辺のボタンにデザインを加える方法をご紹介して参りました。
その一連の記事のラストになります。よろしくお願いします。
こんにちはこんにちは、知ってる人はこんにちは、知らない人は初めまして。ぜぇれさんです。
ECサイトでのデザインを担当してます。よろしくお願いします。ぜぇれさんです。
記事がなかなか長くなりますので、5つの記事に分けて要素別にご紹介しておりまーす!
- 1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
- 2. 商品問い合わせボタンをディテールアップ(第2回記事)
- 3. お気に入り登録ボタン&お気に入り店舗登録ボタンのディテールアップ(第3回記事)
- 4. レビュー記入ボタン&レビューを読むボタンのディテールアップ(第4回記事)
- 5. 各種SNS投稿ボタンのディテールアップ
※一言
楽天GOLD(無料)と契約していると便利。
それではやってみましょう。
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を利用した楽天のハックはブラウザごとで大きく崩れる可能性があります。
楽天が細かなマイナーチェンジやバージョンアップを行ってきた場合も、同様にエラーが起こりそうな悪寒。
皆様ちょいちょい各ブラウザで確認することをおススメします!
- 1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
- 2. 商品問い合わせボタンをディテールアップ(第2回記事)
- 3. お気に入り登録ボタン&お気に入り店舗登録ボタンのディテールアップ(第3回記事)
- 4. レビュー記入ボタン&レビューを読むボタンのディテールアップ(第4回記事)
- 5. 各種SNS投稿ボタンのディテールアップ
楽天サイトでフルスクリーン商品ページをつくる!背景画像を使ったデザインの方法。
ショップ運営でお悩みの方へ。
ネット通販やウェブ制作、ECサポート事業を行っている(株)ビリオンプラン・ジャパンが運営しています。楽天やYahoo!ショッピングなど各モールへの出店サポートや、商品撮影からページ制作までの運用提案、海外ローカライズ作業も行っています。
ショップ運営のお悩み、ご相談ください。
ビリオンプラン・ジャパンは日本を拠点に、香港などの海外グループ会社も生かし各種サービスをご提供しています。まずはお気軽にご相談くださいませ。
または、お電話でも承ります。
※ただいま新規ウェブ制作の受付は停止しております
10:00 - 19:00(土日祝休み)
06-6271-7761
ABOUT ME
- 外部デザイナーTwitter:@zeelesan
- 兵庫在住WEBデザイナー。楽天/ヤフーなど、各モール特性を活かしたサイト構築が得意。ショップ・オブ・ザ・イヤー受賞店舗にて制作業務に従事、その後はECに特化した受託制作を手がけている。グランブルーファンタジーが大好き。 →記事一覧
Recent Posts
2016.04.18ECたったの1行!ヤフーでもお買物カゴを外部化!複数のカゴボタンを設置する方法。
2016.04.13EC楽天お買物カゴを外部化!複数のカゴボタンを設置する方法。
2016.02.04EC独自カートで差別化!Yahoo!ストアのカート周りをCSSでデザインする方法。
2016.01.14ECデフォルト表示をデザイン!Yahoo!ストアのヘッダーをCSSでスッキリさせる方法。
新着記事を配信しています
FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。