トップページの「ログイン」「ログアウト」「検索」「送信」「登録」「解除」「レジに進む」ボタンを画像にしたい

2008-10-28 11:36

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

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

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/~の相対パスにて記載して下さい。


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

※他のページのボタンについて
・商品詳細ページ
https://www.ocnk.net/faq/index.php?action=artikel&id=458
・商品一覧ページ
https://www.ocnk.net/faq/index.php?action=artikel&id=461

・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
https://www.ocnk.net/faq/index.php?action=artikel&id=463
・掲示板
https://www.ocnk.net/faq/index.php?action=artikel&id=464