カート、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ内の各ボタンを画像にしたい

2012-10-01 14:38

ボタン画像の作成とスタイルシートの編集で設定可能です。
>サンプルページ

下記の手順で作業を行って下さい。

STEP1 ボタン画像を作成する
カート改良に伴うボタン追加について
「会員登録して購入」、「会員登録せずに購入」、「送り主登録/変更」、「お届け先登録/変更」、「新規登録はこちら」のボタンは、2012年10月1日 午後2時以降に追加されたボタンです。
サンプルボタン画像にも追加しておりますので、事前に設定される場合はご利用ください。
※ただし、現状ではボタンはページ上にございませんので、確認することはできません。
▼スタイルシートの指定についてはこちら


画像編集ソフトにて、「レジに進む」、「ログイン」、「次へ」、「戻る」、「会員登録して購入」、「会員登録せずに購入」、「送り主登録/変更」、「お届け先登録/変更」、「新規登録はこちら」、「複数のお届け先に送る」「確認画面へ」、「登録する」、「変更する」、「送信する」、「削除する」、「反映する」、「購入する」、「変更」、「削除」、「詳細」、「トップへ戻る」、「マイページトップへ戻る」、「購入履歴一覧へ戻る」、「一覧へ戻る」「画面を閉じる」「はい」「いいえ」ボタンの画像を作成して下さい。

ご注意事項

● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。

● レジに進む、ログイン、次へ、戻る、会員登録して購入、会員登録せずに購入、送り主登録/変更、お届け先登録/変更、新規登録はこちら、複数のお届け先に送る、確認画面へ、登録する、変更する、送信する、削除する、反映する、購入する、変更、削除、詳細、トップへ戻る、マイページトップへ戻る、購入履歴一覧へ戻る、一覧へ戻る、画面を閉じる、はい、いいえの文言についても、ボタン内に含めて下さい。
※文言については、上記をご利用下さい。説明文にボタン名が入る箇所がありますので、文言に差異が生じる場合があります。

ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。

●作成ボタン例

                           


※上記サンプルは、保存してご利用いただいても結構です。
>その他サンプルボタン画像

STEP2 スタイルシートを編集する

画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(1)現在ご利用中のテンプレートが表示されますので、新規に名前を付けて下さい。

(2)下記の指定をコピーしスタイルシート内に貼り付けて下さい。
※貼り付け位置は、スタイルシート内の最下部にお願い致します。

貼り付け後、下部の各項目説明をご覧の上、指定を変更して下さい。
※レジに進む、ログインボタンについては、トップページと同じ画像ですが、ここでは別途設定しています。

/* ボタン画像設定 */

/* 共通設定 */
.link_bot_box .bot_b input,
.point_box .bot_b input,
.point_box3 .bot_b input,
.td_color1 .bot_b input,
.td_color2 .bot_b .changeinput,
.td_color2 .bot_b .deleteinput,
.td_color2 .bot_b .detailinput,
.td_color2 .changeinput,
.td_color2 .deleteinput,
.td_color3 .bot_b .reflectinput {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}

/* ボタン表示幅設定区切り線非表示 */
.link_bot_box .bot_b {
width: 130px;
margin-left: auto;
margin-right: auto;
}

※↓下記は非表示にしない場合に使用
/* ボタン表示幅設定区切り線表示 */
.link_bot_box .bot_b {
width: 145px;
margin-left: auto;
margin-right: auto;
}

/* レジに進む */
.link_bot_box .bot_b .registerinput {
width: 90px;
height: 25px;
background-image: url(image/register.gif);
}

/* ログイン */
.point_box .bot_b .logininput {
width: 70px;
height: 25px;
background-image: url(image/login.gif);
}

/* 次へ */
.link_bot_box .bot_b .nextinput {
width: 50px;
height: 25px;
background-image: url(image/next.gif);
float: left;
}

/* 戻る */
.link_bot_box .bot_b .backinput {
width: 50px;
height: 25px;
background-image: url(image/back.gif);
float: left;
margin-right: 10px;
}


/* 複数のお届け先に送る */
.point_box3 .bot_b .senderinput,
.point_box3 .bot_b .shippinginput {
width: 160px;
height: 25px;
background-image: url(image/sender_n.gif);
}

/* 確認画面へ */
.link_bot_box .bot_b .checkinput {
width: 80px;
height: 25px;
background-image: url(image/check.gif);
}

/* 登録する */
.link_bot_box .bot_b .entryinput {
width: 70px;
height: 25px;
background-image: url(image/entry_b.gif);
float: left;
}

/* 変更する */
.link_bot_box .bot_b .changeinput {
width: 70px;
height: 25px;
background-image: url(image/change_b.gif);
float: left;
}

/* 送信する */
.link_bot_box .bot_b .sendinput {
width: 70px;
height: 25px;
background-image: url(image/send_b.gif);
float: left;
}

/* 削除する */
.point_box3 .bot_b .deleteinput,
.link_bot_box .bot_b .deleteinput {
width: 70px;
height: 25px;
background-image: url(image/delete_b.gif);
}

/* 反映する */
.td_color3 .bot_b .reflectinput {
width: 70px;
height: 25px;
background-image: url(image/reflect.gif);
}

/* 購入する */
.link_bot_box .bot_b .buyinput {
width: 70px;
height: 25px;
background-image: url(image/buy.gif);
float: left;
}

/* 決済する */
.link_bot_box .bot_b .paymentinput {
width: 70px;
height: 25px;
background-image: url(image/payment.gif);
float: left;
}

/* 変更 */
.td_color2 .bot_b .changeinput {
width: 40px;
height: 25px;
background-image: url(image/change.gif);
float: left;
margin-right: 10px;
}

/* 削除 */
.td_color2 .bot_b .deleteinput {
width: 40px;
height: 25px;
background-image: url(image/delete_s.gif);
float: left;
}

/* 変更:テーブル内 */
.td_color2 .changeinput {
width: 40px;
height: 25px;
background-image: url(image/change.gif);
display: inline;
}

/* 削除:テーブル内 */
.td_color2 .deleteinput {
width: 40px;
height: 25px;
background-image: url(image/delete_s.gif);
}

/* 詳細 */
.td_color2 .bot_b .detailinput {
width: 50px;
height: 25px;
background-image: url(image/detail_s.gif);
}

/* トップへ戻る */
.link_bot_box .bot_b .backtopinput {
width: 90px;
height: 25px;
background-image: url(image/backtop.gif);
}

/* マイページトップへ戻る */
.link_bot_box .bot_b .backmypageinput {
width: 150px;
height: 25px;
background-image: url(image/backmypage.gif);
}

/* 購入履歴一覧へ戻る */
.link_bot_box .bot_b .backlistinput {
width: 130px;
height: 25px;
background-image: url(image/backlist.gif);
}

/*一覧へ戻る */
.link_bot_box .bot_b .backshippinglistinput {
width: 90px;
height: 25px;
background-image: url(image/backshippinglist.gif);
}

/* 画面を閉じる */
.link_bot_box .bot_b .wincloseinput {
width: 90px;
height: 25px;
background-image: url(image/winclose.gif);
}

/* はい */
.link_bot_box .deleteyinput {
width: 50px;
height: 25px;
background-image: url(image/deletey.gif);
float: left;
margin-right: 10px;
}

/* いいえ */
.link_bot_box .deleteninput {
width: 50px;
height: 25px;
background-image: url(image/deleten.gif);
float: left;
}


/* 区切り線非表示の場合 */
.link_bot_box .sec_linel {
display: none;
}

/* 区切り線表示の場合 */
.link_bot_box .sec_linel {
display: block;
float: left;
}

/* 特殊設定 */

/* ボタン配置ボックス */
.link_bot_box {
width: 250px;
margin-left: auto;
margin-right: auto;
}

/* 最下部ボタン1つ配置用 */
#inputimage input {
float: none;
margin-left: auto;
margin-right: auto;
}

 

/* ログインカートステップ2用 */
.point_box .bot_b .logininput {
display: inline;
}

/* お届け先を追加中央寄せ用 */
.point_box3 .bot_b .shippinginput {
margin-left: auto;
margin-right: auto;
}

/* 削除するカートステップ2用 */
.point_box3 .bot_b .deleteinput {
display: inline;
}


※下記指定は、2012年10月1日に追加予定のボタン分の指定となります。
「会員登録して購入」、「会員登録せずに購入」、
「送り主登録/変更」、「お届け先登録/変更」、「新規登録はこちら」

/* 共通設定 */
.point_box .bot_b .default_bot_b input {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}

※ご注意事項 
ステップ2の送り主、お届け先登録/変更ボタンを画像ボタンとして利用しない場合は、上記の指定ではなく下記をご利用ください。
#shoppingcart_page_step1にのみ適用される指定となります。

/* 共通設定 */
#shoppingcart_page_step1 .point_box .bot_b .default_bot_b input {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}


/* カートステップ1 ボタン中央配置 */
.cart_member_box .default_bot_b input {
float: none;
margin-left: auto;
margin-right: auto;
}

/* 会員登録して購入 */
.point_box .bot_b .default_bot_b .memberregisterinput {
width: 110px;
height: 25px;
background-image: url(image/remember.gif);
}

/* 会員登録せずに購入 */
.point_box .bot_b .default_bot_b .nonmemberregisterinput {
width: 120px;
height: 25px;
background-image: url(image/vimember.gif);
}

/* 送り主登録/変更 */
.point_box .bot_b .default_bot_b .sendereditinput {
display: inline;
width: 110px;
height: 25px;
background-image: url(image/sender.gif);
}

/* お届け先登録/変更 */
.point_box .bot_b .default_bot_b .shippingeditinput {
display: inline;
width: 120px;
height: 25px;
background-image: url(image/recipient.gif);
}

/* 新規登録はこちら */
.point_box .bot_b .shippingregisterinput {
display: block;
text-indent: -9999px;
width: 110px;
height: 25px;
background-image: url(image/regist_re.gif);
}



●各項目説明

共通設定
inputタグに対する指定です。どちらのボタンについても共通の指定となります。
特に変更していただく必要はございません。
※設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。
ボタン表示幅設定
カート内や登録フォームで、最下部にボタン表示ボックスが配置されているページ用の設定です。
※ご用意いただくボタンサイズによって設定横幅が異なりますので、必ず設定して下さい。

width

上記スタイルシート記載例の .link_bot_box .bot_b 内でwidth: 130px;を指定している箇所は、作成ボタン画像の横幅により調整が必要です。

カート内や登録フォームの最下部に、2つボタンが並ぶパターンは、下記パターンとなります。

●戻るボタン 登録するボタン ●戻るボタン 変更するボタン
●戻るボタン 購入するボタン ●戻るボタン 送信するボタン
●戻るボタン 次へボタン
各ボタン画像の横幅が複数存在する場合は、最も横幅の大きいボタン画像の横幅で設定して下さい。
【!】ポイント次へボタン以外は同サイズでの作成を推奨いたします。

例) 戻るボタンが50px、その他各ボタンの最大サイズが70pxの場合
50px+70pxで120pxとなります。さらに戻るボタンの横には10pxの余白がありますので、130pxとなります。

.link_bot_box .bot_b {
width: 130px;
margin-left: auto;
margin-right: auto;
}

※左右ボタンの間の区切り線を非表示にされていない場合は、上記の値にさらに15pxを足して記載して下さい。

.link_bot_box .bot_b {
width: 145px;
margin-left: auto;
margin-right: auto;
}

●他のボタンサイズ用の調整
「次へ」ボタンの場合、文字数が少ないため、「購入する」ボタンよりも横幅が小さくなります。
次へボタンが50px、その他ボタン画像が70pxで.link_bot_box .bot_b 内の横幅を130pxにて設定した場合
下記のように、該当ボタンの指定内にmargin-left: 20px;の1行を追加記載して下さい。
【!】ルール最大ボタン横幅から該当ボタン横幅を引いた値をmargin-leftとして指定して下さい。

.link_bot_box .bot_b .nextinput {
width: 50px;
height: 25px;
background-image: url(image/next.gif);
float: left;
margin-left: 20px;
}

レジに進むボタン
レジに進む用の指定となります。
※トップページ部分と画像は同様ですが、設定箇所が違いますのご注意下さい。

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/register.gif);
必ず、image/~の相対パスにて記載して下さい。

ログインボタン
ログインボタン用の指定となります。
※トップページ部分と画像は同様ですが、設定箇所が違いますのご注意下さい。

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/login.gif);
必ず、image/~の相対パスにて記載して下さい。

次へボタン
次へボタン用の指定となります。
※利用箇所
・カートステップ1、カートステップ2、カートステップ3

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/next.gif);
必ず、image/~の相対パスにて記載して下さい。

戻るボタン
戻るボタン用の指定となります。
※利用箇所
・カートステップ2、カートステップ3、お客様(会員)登録変更、お届け先登録変更、お問い合わせ

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/back.gif);
必ず、image/~の相対パスにて記載して下さい。

margin-right: 10px;

区切り線を非表示にした場合に、各ボタン(次へ、購入する等)との間を空けるための指定です。区切り線を非表示にされていない場合は、必要ありませんので削除して下さい。
初期設定では、10pxを指定しています。

複数のお届け先に送るボタン
複数のお届け先に送るボタン用の指定となります。
※2008年3月18日より、お届け先欄の追加部分文言を「複数のお届け先に送る」に変更致しました。サンプルボタンについては、ボタンを追加しております。
サンプルボタン

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/sender_n.gif);
必ず、image/~の相対パスにて記載して下さい。

確認画面へボタン
確認画面へボタン用の指定となります。
※利用箇所
・お客様(会員)登録変更、お届け先登録変更、お問い合わせ

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/check.gif);
必ず、image/~の相対パスにて記載して下さい。

登録するボタン
登録するボタン用の指定となります。
※利用箇所
・お客様(会員)登録、お届け先登録

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/entry_b.gif);
必ず、image/~の相対パスにて記載して下さい。

変更するボタン
変更するボタン用の指定となります。
※利用箇所
・お客様(会員)情報変更、お届け先情報変更

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/change_b.gif);
必ず、image/~の相対パスにて記載して下さい。

送信するボタン
送信するボタン用の指定となります。
※利用箇所
・お問い合わせ、パスワードを忘れた方

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/send_b.gif);
必ず、image/~の相対パスにて記載して下さい。

削除するボタン
削除するボタン用の指定となります。
※利用箇所
・お客様(会員)情報削除、お届け先情報削除

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/delete_b.gif);
必ず、image/~の相対パスにて記載して下さい。

反映するボタン
反映するボタン用の指定となります。
※利用箇所
・カートステップ4※ポイント部分

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/reflect.gif);
必ず、image/~の相対パスにて記載して下さい。

購入するボタン
購入するボタン用の指定となります。
※利用箇所
・カートステップ4

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/buy.gif);
必ず、image/~の相対パスにて記載して下さい。

決済するボタン
決済するボタン用の指定となります。

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/payment.gif);
必ず、image/~の相対パスにて記載して下さい。

変更ボタン
変更ボタン用の指定となります。
※利用箇所
・お届け先一覧

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/change.gif);
必ず、image/~の相対パスにて記載して下さい。

margin-right: 10px;

区切り線を非表示にした場合に、各ボタン(次へ、購入する等)との間を空けるための指定です。区切り線を非表示にされていない場合は、必要ありませんので削除して下さい。
初期設定では、10pxを指定しています。

削除ボタン
削除ボタン用の指定となります。
※利用箇所
・お届け先一覧

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/delete_s.gif);
必ず、image/~の相対パスにて記載して下さい。

詳細ボタン
詳細ボタン用の指定となります。
※利用箇所
・購入履歴

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/detail_s.gif);
必ず、image/~の相対パスにて記載して下さい。

トップへ戻るボタン
トップへ戻るボタン用の指定となります。
※利用箇所
・カートステップ5

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/backtop.gif);
必ず、image/~の相対パスにて記載して下さい。

マイページトップへ戻るボタン
マイページトップへ戻るボタン用の指定となります。
※利用箇所
・お客様(会員)情報変更完了

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/backmypage.gif);
必ず、image/~の相対パスにて記載して下さい。

購入履歴一覧へ戻るボタン
購入履歴一覧へ戻るボタン用の指定となります。
※利用箇所
・購入履歴詳細

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/backlist.gif);
必ず、image/~の相対パスにて記載して下さい。

一覧へ戻るボタン
一覧へ戻るボタン用の指定となります。
※利用箇所
・お届け先登録完了、お届け先変更完了(※カート内から遷移)

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/backshippinglist.gif);
必ず、image/~の相対パスにて記載して下さい。

画面を閉じるボタン
画面を閉じるボタン用の指定となります。
※利用箇所
・お届け先登録完了、お届け先変更完了

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/winclose.gif);
必ず、image/~の相対パスにて記載して下さい。

はいボタン
はいボタン用の指定となります。
※利用箇所
・メルマガ配信解除

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/deletey.gif);
必ず、image/~の相対パスにて記載して下さい。

いいえボタン
はいボタン用の指定となります。
※利用箇所
・メルマガ配信解除

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/deleten.gif);
必ず、image/~の相対パスにて記載して下さい。

区切り線
各ボタンの間に表示されている区切り線「|」の設定です。

※非表示にする場合
display: none;

display: none;を指定することで、非表示にすることができます。

※非表示にされない場合
display: block;

display: block;を指定することで、ブロック要素にしています。

float: left;

float: left;を指定することで、横に並べて表示しています。

特殊設定
共通設定と同様、変更いただく必要はありません。スタイルシートを上書きするために最下部で設定しています。
会員登録して購入ボタン
会員登録して購入ボタン用の指定となります。
※利用箇所
・カート内STEP1

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/remember.gif);
必ず、image/~の相対パスにて記載して下さい。

会員登録せずに購入ボタン
会員登録せずに購入ボタン用の指定となります。
※利用箇所
・カート内STEP1

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/vimember.gif);
必ず、image/~の相対パスにて記載して下さい。

送り主登録/変更ボタン
送り主登録/変更ボタン用の指定となります。
※利用箇所
・カート内STEP2

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/sender.gif);
必ず、image/~の相対パスにて記載して下さい。

お届け先登録/変更ボタン
お届け先登録/変更ボタン用の指定となります。
※利用箇所
・カート内STEP2

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/recipient.gif);
必ず、image/~の相対パスにて記載して下さい。

新規登録はこちらボタン
新規登録はこちらボタン用の指定となります。
※利用箇所
・カート内STEP2

width

作成された画像の横幅を記載して下さい。 ※単位px(ピクセル)

height

作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル)

background-image

作成されたボタン画像を指定して下さい。

記載例) background-image: url(image/regist_re.gif);
必ず、image/~の相対パスにて記載して下さい。