デザイン管理 » その他カスタマイズ

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

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

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

STEP1　ボタン画像を作成する

画像編集ソフトにて、「レジに進む」、「ログイン」、「次へ」、「戻る」、「法人で登録する場合はこちら」、「個人で登録する場合はこちら」、「複数のお届け先に送る」「確認画面へ」、「登録する」、「変更する」、「送信する」、「削除する」、「反映する」、「購入する」、「変更」、「削除」、「詳細」、「トップへ戻る」、「マイページトップへ戻る」、「購入履歴一覧へ戻る」、「一覧へ戻る」「画面を閉じる」ボタンの画像を作成して下さい。
※2008年3月18日より、お届け先欄の追加部分文言を「複数のお届け先に送る」に変更致しました。サンプルボタンについては、ボタンを追加しております。

ご注意事項

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

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

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

●作成ボタン例
　　　　　
　　
　　　　　
　　　　　　
　　　　

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

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_box .bot_b .membercoinput,
.td_color1 .bot_b .membercoinput {
width: 170px;
height: 25px;
background-image: url(image/memberco.gif);
float: left;
}

/* 個人で登録する場合はこちら */
.point_box .bot_b .memberinput,
.td_color1 .bot_b .memberinput {
width: 170px;
height: 25px;
background-image: url(image/member.gif);
float: left;
}

/* 複数のお届け先に送る */
.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 .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;
}

/* 法人個人マイページ用 */
.point_box .bot_b .memberinput {
margin-right: 10px;
}

/* 法人個人その他フォーム上部用 */
.td_color1 .bot_b .membercoinput,
.td_color1 .bot_b .memberinput {
float: none;
}

/* ログインカートステップ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;
}



●各項目説明

共通設定
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を指定しています。

法人で登録する場合はこちらボタン
法人で登録する場合はこちらボタン用の指定となります。
※利用箇所
・カートステップ1、お客様(会員)登録変更、お届け先登録変更

width

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

height

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

background-image

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

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

個人で登録する場合はこちらボタン
個人で登録する場合はこちらボタン用の指定となります。
※利用箇所
・カートステップ1、お客様(会員)登録変更、お届け先登録変更

width

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

height

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

background-image

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

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

複数のお届け先に送るボタン
複数のお届け先に送るボタン用の指定となります。
※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/～の相対パスにて記載して下さい。

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

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

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

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

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

float: left;

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

特殊設定
共通設定と同様、変更いただく必要はありません。スタイルシートを上書きするために最下部で設定しています。

編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。

※他のページのボタンについて
・トップページ
http://www.ocnk.net/faq/281597_462_ja.html
・商品詳細ページ
http://www.ocnk.net/faq/281597_458_ja.html
・商品一覧ページ
http://www.ocnk.net/faq/281597_461_ja.html
・掲示板
http://www.ocnk.net/faq/281597_464_ja.html
最終更新: 2008-03-18 17:54
作成者: おちゃのこ刑部

このレコードを印刷する このレコードを印刷する
XML ファイルエクスポート XML ファイルエクスポート

このエントリを評価してください:

評価点数: 2 - 5 (2 個の投票 )

完全に役に立たない 1 2 3 4 5 最も価値がある


このエントリにコメントできません。