楽天市場PCページのボタン（商品についての問合わせ）と項目選択肢のデザイン変更方法について

Question

デザインレシピに「お気に入り商品に追加」と「お気に入りショップに追加」のデザイン変更方法が載っていたのですが
「商品についての問合わせ」ボタン
の変更方法につきましても、変更方法があればおしえて頂きたいです。

また、項目選択肢のデザイン設定についてもおしえて頂きたいです。

添付画像は私が参考に見ました他社様の項目選択肢デザインです。（他社様のデザインなので特定できないようにモザイク加工しました）
選択しやすいと思いましたので、真似たいと思いました。

宜しくお願い致します。###HR######IMG095a0461cfb514d000cf1f372654ac0b3.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

お問い合わせボタンの設定がうまくいったとのことで
ご報告ありがとうございます。
無事設定できたようで、良かったです。

また、URLのご連絡ありがとうございました。

下記の~を追加していただきますと
同様のレイアウトを再現いただくことができます。

=======

#rakutenLimitedId_aroundCart span.choice {
    background: url(【背景画像のURL】) no-repeat;
    display: block;
    font-weight: bold;
    line-height: 1.2em;
    padding: 8px 0 5px 34px;
}
#rakutenLimitedId_aroundCart select {
    border: 1px solid #989898;
    width: 388px;
    height: 28px;
}

=======

背景画像などは、ご自身でご用意頂く必要がございますので
変更が必要な箇所は、下記にてご確認くださいませ。

●#rakutenLimitedId_aroundCart span.choice 
background: url(【背景画像のURL】) no-repeat;
 → 背景画像を指定してください。
font-weight: bold;
 → 文字を太くしない場合は、削除してください。
padding: 8px 0 5px 34px;
 → 余白：上 右 下 左 の指定となります。デザインに合わせて調整してください。

●#rakutenLimitedId_aroundCart select
border: 1px solid #989898;
 → #989898 で枠線の色をデザインに合わせて修正してください。
width: 388px;
 → 横幅を指定して下さい。
height: 28px;
 → 高さを指定してください。

Answer

ECマスターズの塚本です。

いただきましたご質問ですが技術的な内容のため
確認しまして担当より週明けに回答させていただきます。

お時間いたただきますが今しばらくおまちくださいませ。

Answer

ECマスターズの伊藤です。

> 「商品についての問合わせ」ボタン
> の変更方法につきましても、変更方法があればおしえて頂きたいです。

拝見したところ、下記のCSSをご登録頂いているようでしたので
すでにご対応済みでしょうか。
＝＝＝＝＝＝＝＝＝＝
body #rakutenLimitedId_aroundCart button.rAskBtn {
width: 420px !important;
height: 75px !important;
background: url(【ボタン画像のURL】) no-repeat !important;
overflow:hidden !important;
border-width: 0px !important;
cursor: pointer !important;
display:block !important;
background-color:#898989 !important;
text-indent:-9999px !important;
}
＝＝＝＝＝＝＝＝＝＝

もし、修正方法がご不明などございましたら、
返信よりご相談ください。


> また、項目選択肢のデザイン設定についてもおしえて頂きたいです。

恐れ入りますが、参考にされたページのURLを頂戴できますでしょうか。
URLを公開されることに問題がございましたら

club@ec-masters.net

あてに、メールにてご連絡をお願いいたいたします。

お手数おかけいたしますが、よろしくお願いいたします。

Answer

伊藤様

URLは先ほどメールさせて頂きました。
宜しくお願い致します。

> 「商品についての問合わせ」ボタン
につきましては、先ほど下記の通り設定してみました。

＝＝＝＝＝＝＝＝＝＝

/* お問い合わせボタン */
body #rakutenLimitedId_aroundCart button.rAskBtn {
width: 420px !important;
height: 75px !important;
background: url(【ボタン画像のURL】) no-repeat !important;
overflow:hidden !important;
border-width: 0px !important;
cursor: pointer !important;
display:block !important;
background-color:#898989 !important;
text-indent:-9999px !important;
}

＝＝＝＝＝＝＝＝＝＝

うまくいきました。

Answer

伊藤様

設置できました。
ありがとうございました。