トップページの「ログイン」「ログアウト」「検索」「送信」「登録」「解除」「レジに進む」ボタンを画像にしたい
ボタン画像の作成とスタイルシートの編集で設定可能です。
>サンプルページ
下記の手順で作業を行って下さい。
画像編集ソフトにて、「ログイン」、「ログアウト」、「レジに進む」、「検索」、「送信」、「登録」、「解除」ボタンの画像を作成して下さい。
※レジに進む、ログインボタンのようにカート部分と共通のボタンについては、同じ画像を使用されても結構です。
● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● ログイン、ログアウト、レジに進む、検索、送信、登録、解除の文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。
ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。
●作成ボタン例
※上記サンプルは、保存してご利用いただいても結構です。
>その他サンプルボタン画像
画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(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タグに対する指定です。どちらのボタンについても共通の指定となります。 特に変更していただく必要はございません。 ※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。 |
||||||||
ログインボタン | ||||||||
ログインボタン用の指定となります。 ※カート部分と画像は同様ですが、設定箇所が違いますのご注意下さい。
|
||||||||
ログアウトボタン | ||||||||
ログアウトボタン用の指定となります。
|
||||||||
レジに進むボタン | ||||||||
レジに進むボタン用の指定となります。 ※カート部分と画像は同様ですが、設定箇所が違いますのご注意下さい。
|
||||||||
検索ボタン | ||||||||
検索ボタン用の指定となります。
.subnavi .bot_b inputの指定は、検索ボタンをボックス横に配置するために必要となります。
|
||||||||
送信ボタン | ||||||||
送信ボタン用の指定となります。 ※メルマガ欄のボタンを画像に設定し、携帯サイトURL欄をご利用の場合は、必ず「送信」ボタンについても画像設定を行って下さい。共通のクラス名を使用しておりますので、「送信」ボタンが正しく表示されません。
|
||||||||
登録ボタン | ||||||||
登録ボタン用の指定となります。
|
||||||||
解除ボタン | ||||||||
解除ボタン用の指定となります。
|
||||||||
変更ボタン | ||||||||
変更ボタン用の指定となります。 カートに商品を入れた際に左エリアに表示される部分です。
|
||||||||
削除ボタン | ||||||||
削除ボタン用の指定となります。 カートに商品を入れた際に左エリアに表示される部分です。
|
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
・商品詳細ページ
https://www.ocnk.net/faq/index.php?action=faq&id=458
・商品一覧ページ
https://www.ocnk.net/faq/index.php?action=faq&id=461
・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
https://www.ocnk.net/faq/index.php?action=faq&id=463
・掲示板
https://www.ocnk.net/faq/index.php?action=faq&id=464