デザイン管理 » その他カスタマイズ
Ｑ.トップページの「ログイン」「ログアウト」「検索」「送信」「登録」「解除」「レジに進む」ボタンを画像にしたい
ボタン画像の作成とスタイルシートの編集で設定可能です。
＞サンプルページ下記の手順で作業を行って下さい。STEP1 ボタン画像を作成する
画像編集ソフトにて、「ログイン」、「ログアウト」、「レジに進む」、「検索」、「送信」、「登録」、「解除」ボタンの画像を作成して下さい。
※レジに進む、ログインボタンのようにカート部分と共通のボタンについては、同じ画像を使用されても結構です。ご注意事項 ● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● ログイン、ログアウト、レジに進む、検索、送信、登録、解除の文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。
ボタン画像作成後、
管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。
●作成ボタン例※上記サンプルは、保存してご利用いただいても結構です。
＞その他サンプルボタン画像 STEP2 スタイルシートを編集する
画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。
「デザイン管理」＞「スタイルシート編集」（1）現在ご利用中のテンプレートが表示されますので、新規に名前を付けて下さい。
（2）下記の指定をコピーしスタイルシート内に貼り付けて下さい。
※貼り付け位置は、スタイルシート内の最下部にお願い致します。貼り付け後、下部の
各項目説明をご覧の上、指定を変更して下さい。
/* ボタン画像設定 */
/* 共通設定 */
.member .bot_b input,
.mobile .bot_b input,
.subnavi .bot_b input,
.melmaga_middle .bot_b input,
.shopc_go .bot_b input,
.shopc_in .changeinput,
.shopc_in .deleteinput {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}
/* ログイン */
.member .logininput {
width: 70px;
height: 25px;
background-image: url(image/login.gif);
}
/* ログアウト */
.member .logoutinput {
width: 80px;
height: 25px;
background-image: url(image/logout.gif);
} /* レジに進む */
.shopc_go .registerinput {
width: 90px;
height: 25px;
background-image: url(image/register.gif);
} /* 検索 */
.subnavi .searchinput {
width: 40px;
height: 23px;
background-image: url(image/search.gif);
} .subnavi .bot_b input {
display: inline;
} /* 送信 */
.mobile .sendinput {
width: 40px;
height: 25px;
background-image: url(image/send.gif);
} /* 登録 */
.melmaga_middle .entryinput {
width: 40px;
height: 25px;
background-image: url(image/entry.gif);
} /* 解除 */
.melmaga_middle .deleteinput {
width: 40px;
height: 25px;
background-image: url(image/delete.gif);
}
/* 変更：カートの中身 */
.shopc_in .changeinput {
width: 40px;
height: 25px;
background-image: url(image/change.gif);
margin-right: 10px;
float: left;
} /* 削除：カートの中身 */
.shopc_in .deleteinput {
width: 40px;
height: 25px;
background-image: url(image/delete_s.gif);
float: left;
} |
●各項目説明| 共通設定 |
inputタグに対する指定です。どちらのボタンについても共通の指定となります。
特に変更していただく必要はございません。
※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。 |
| ログインボタン |
ログインボタン用の指定となります。
※カート部分と画像は同様ですが、設定箇所が違いますのご注意下さい。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/login.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| ログアウトボタン |
ログアウトボタン用の指定となります。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/logout.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| レジに進むボタン |
レジに進むボタン用の指定となります。
※カート部分と画像は同様ですが、設定箇所が違いますのご注意下さい。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/register.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| 検索ボタン |
検索ボタン用の指定となります。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/search.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
※検索ボタン用
.subnavi .bot_b inputの指定は、検索ボタンをボックス横に配置するために必要となります。
| display: inline; | 特に変更いただく必要はありません。 |
|
| 送信ボタン |
送信ボタン用の指定となります。
※メルマガ欄のボタンを画像に設定し、携帯サイトURL欄をご利用の場合は、必ず「送信」ボタンについても画像設定を行って下さい。共通のクラス名を使用しておりますので、「送信」ボタンが正しく表示されません。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/send.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| 登録ボタン |
登録ボタン用の指定となります。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/entry.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| 解除ボタン |
解除ボタン用の指定となります。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/delete.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| 変更ボタン |
変更ボタン用の指定となります。 カートに商品を入れた際に左エリアに表示される部分です。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/change.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
| 削除ボタン |
削除ボタン用の指定となります。 カートに商品を入れた際に左エリアに表示される部分です。
| width | 作成された画像の横幅を記載して下さい。 ※単位px(ピクセル) | | height | 作成された画像の縦幅を記載して下さい。 ※単位px(ピクセル) | | background-image | 作成されたボタン画像を指定して下さい。 記載例） background-image: url(image/delete_s.gif);
※必ず、image/～の相対パスにて記載して下さい。 |
|
編集後、ページ最下部の
「登録処理を完了する」ボタンをクリックして下さい。
最終更新: 2008-01-23 11:49
作成者: おちゃのこ刑部
このレコードを印刷する
XML ファイルエクスポート
このエントリにコメントできません。
