予約ボタンの大きさを変更する方法

Question

いつもありがとうございます。他の方の質問を見ていると本当に勉強になります。

さて、当店にて予約販売用の商品を用意しようと思っているのですが、
予約カゴ　を大きくするCSSはありますでしょうか。

また、商品ページ内に予約ボタンのバナーを張って、予約カゴと同じように
動作するようにすることは出来ますでしょうか。

ご回答頂けると幸いです。

Answer

ECマスターズの田中です。

＞予約カゴ　を大きくするCSSはありますでしょうか。

＞商品ページ内に予約ボタンのバナーを張って、予約カゴと同じように
動作するようにすることは出来ますでしょうか。

いずれも、実際の商品ページを確認させていただく必要がございますので、
Udonさんにて、予約カゴで販売予定の商品ページを
ご用意いただけますでしょうか。
（サーチ非表示にご設定いただければ、
　お客様に見られないようにすることができます）

Answer

ご返信ありがとうございます。

http://item.rakuten.co.jp/mugendo/soumen500-2/

上記の商品となります。

お手数ですがお願い申し上げます。

Answer

ECマスターズの田中です。

商品ページを確認したところ、
売り切れの状態となっており、
カゴのボタンを確認することが出来ませんでした。

お手数ですが、
いただいた商品ページを複製していただく形で結構ですので、
予約可能な商品ページをご用意いただき、
商品管理番号またはURLをお知らせいただけますでしょうか。

フォーラムにてお知らせいただき辛い場合は、
リクエストフォームにてお知らせください。
また、お客様から注文が入らないよう、
サーチ非表示にご設定いただきますようお願いします。

Answer

ありがとうございます。

サーチ非表示にて在庫を購入できる数量設定。
予約商品に変更致しました。

以上で宜しいでしょうか。
お手数おかけしてすいません。

Answer

ECマスターズの田中です。

ご変更いただきありがとうございました。
確認することができましたので、
いただいたご質問にそれぞれ回答いたします。
（解決しましたら、商品 soumen500-2 を
　売り切れの状態に戻していただきますようお願いします）


＞予約カゴ　を大きくするCSSはありますでしょうか。

#rakutenLimitedId_aroundCart #units + input[type=submit]
に対して、スタイルシートの規則を作ることで
予約カゴを変更することができます。

たとえば、予約カゴを画像に差し替える場合は
下記タグを、
ヘッダー・フッター・レフトナビ もしくは 共通説明文（大）に
挿入してください。

= この下の行から ====================

/* 予約かご　画像に変更 */
#rakutenLimitedId_aroundCart input[type="submit"][value="予約する"] {
background: url(画像URL) no-repeat left top !important;
width: 画像の横幅px !important;
height: 画像の高さpx !important;
text-indent: 110% !important;
white-space: nowrap !important;
overflow: hidden !important;
display: -moz-inline-box !important;
display: inline-block !important;
/display: inline !important;
/margin-right: 3px !important;
border: 0px !important;
/zoom: 1 !important;
}

= この上の行まで ====================
※画像URL・画像の横幅（高さ）は、実際のURL・半角数字に置き換えてください。


＞商品ページ内に予約ボタンのバナーを張って、予約カゴと同じように
＞動作するようにすることは出来ますでしょうか。

予約ボタン設置用のHTMLを楽天GOLD内にご用意いただき、
説明文の中にタグで設置してください。

予約ボタンは、下記のHTMLソースで作成することができます。

===== この下の行から ================








===== この上の行まで ================
※ショップＩＤは、ショップ内検索時にURLに含まれる6桁の数字を入力してください。
※商品のＲＡＣ番号の下８桁は、商品個別編集画面もしくはitem.csvよりご確認ください。
※商品の在庫タイプは、
　「在庫設定しない」なら0、「通常在庫設定」なら1、「項目選択肢別在庫」なら2を
　入力してください。
※在庫タイプが「項目選択肢別在庫」の場合、
　項目選択肢別在庫を選択するためのラジオボタン用のHTMLタグを
　実際の商品ページからコピーしてタグ内に挿入し、
　「radio」を「hidden」に置き換えてください。
　例）
※「name="units"」の左にある「type="hidden"」を「type="number"」に置き換えると、
　個数の入力欄を表示させることができます。
※「type="submit"」を「type="image"」にご変更いただくことで、
　送信ボタンを画像に設定することができます。
　タグの設定方法は、下記URLをご参照ください。
　http://www.htmq.com/html5/input_type_image.shtml

Answer

夜遅くの回答ありがとうございます。

すぐにテストしてみます。！！！！

またご質問させて頂くことになりそうなので、解決にするまで
今しばらくお時間を頂けると幸いです。

Answer

いつもお世話になっております。

http://item.rakuten.co.jp/mugendo/udon360gsoumen200g/

上記URLの商品で予約ボタン画像変更して設置していようとしていますが、
上手く反映されません。


/* 予約かご　画像に変更 */
#rakutenLimitedId_aroundCart input[type="submit"][value="予約する"] {
background: url(画像URL) no-repeat left top !important;
width: 画像の横幅px !important;
height: 画像の高さpx !important;
text-indent: 110% !important;
white-space: nowrap !important;
overflow: hidden !important;
display: -moz-inline-box !important;
display: inline-block !important;
/display: inline !important;
/margin-right: 3px !important;
border: 0px !important;
/zoom: 1 !important;
}


ヘッダー・フッター・レフトナビ 　に設置しました。
何か、表示されない問題点、設置方法に間違いがございますでしょうか？
ご回答頂けると幸いです。

Answer

ECマスターズの田中です。

いただいた商品ページを確認したところ、
販売期間が2017年07月20日10時00分、
つまり明日１０時から販売開始する設定となっており、
「予約する」ボタン自体がページに存在しておりません。

スタイルシートは正しく設定されているようですので、
実際に販売開始してからご確認いただけますでしょうか。

あるいは、ページを複製して
サーチ非表示、および販売期間を現在購入できるように調整していただき、
実際に「予約する」ボタンが表示される状態にしてご確認ください。

Answer

販売開始設定を本日に変更して表示されるかテストしてみます。
早々のご回答ありがとうございます。