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

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

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

さてさて。第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;
}

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

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

最後に

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

ララバイ！！

1. 買い物カゴに入れるボタンをディテールアップ(第1回記事)
2. 商品問い合わせボタンをディテールアップ
3. お気に入り登録ボタン＆お気に入り店舗登録ボタンのディテールアップ(第3回記事)
4. レビュー記入ボタン＆レビューを読むボタンのディテールアップ(第4回記事)
5. 各種SNS投稿ボタンのディテールアップ(第5回記事)

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

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

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

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

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

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

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

06-6271-7761

ABOUT ME

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