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

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

今回は商品問い合わせボタンのデザイン方法をご紹介します!
前回の第1回記事では楽天お買い物かごボタンに、
デザインを加える方法をご紹介しました。
その続きに当たる内容になってます。

Sponsored Link

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

記事がなかなか長くなりますので、5つの記事に分けて要素別にご紹介してゆきますね。

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

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

2. 商品問い合わせボタンをディテールアップ

楽天お買い物カゴを綺麗に!カート回りのCSSデザイン。
さてさて。第1回記事でかごに入れるボタンにデザインを加えただけでも、
十分に印象は変わってきましたね。

ここから先は「デザイン担当がどこまでこだわるか。」みたいな内容になってきますが…。
どうせなら気持ちいいほうがいいよね!あまり細々と書くこともないと思いますので、
サクサクと進めてまいります!うひ!

<input value="商品についての問合わせ" type="submit" class="rAskBtn">

というわけでこちらがデザインを加える対象となる部分です。
クラスも振られているので楽勝ですね!
第1回記事と同様にボタンに使用する画像を用意します。
サンプル画像

からのー!!

/* お問い合わせボタン */
#rakutenLimitedId_aroundCart font input {
width: 490px;
height: 45px;
background: url(../../img/base/btn_inquiry.png) no-repeat;
overflow:hidden;
border-width: 0px;
cursor: pointer;
display:block;
background-color:#898989;
text-indent:150%;
}

/*opera対応*/
body #rakutenLimitedId_aroundCart button.rAskBtn {
width: 490px !important;
height: 45px !important;
background: url(../../img/base/btn_inquiry.png) no-repeat !important;
overflow:hidden !important;
border-width: 0px !important;
cursor: pointer !important;
display:block !important;
background-color:#898989 !important;
text-indent:-9999px !important;
}

セレクタの指定方法はこれ以外にもいろいろあると思います。
想定どおり動いてるからいいものの、この指定の仕方…。
楽天が何らかのリニューアルをかけてきた場合エラー吐きそう…

というわけでデフォルトの状態からこのような形に変更ができました。

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

最後に

いかがでしたでしょうか。
拙い文章ではありますが、皆さんのサイトのクオリティアップの手助けになれれば幸いです。

ララバイ!!

楽天商品ページでフォトギャラリーを実装!jQueryを使ったデザインの方法。

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

BILLIONPLAN JAPAN Co, Ltd

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

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

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

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

06-6271-7761

ABOUT ME

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

新着記事を配信しています

FacebookやGoogle+で新着記事を配信しています。よろしければ「いいね!」や「フォロー」をお願いします。

follow us in feedly