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

Ｑ.商品一覧(関連商品)ページの「カートに入れる」「詳細を見る」「お問い合わせ」ボタンを画像にしたい

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

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

STEP1　ボタン画像を作成する

画像編集ソフトにて、「カートに入れる」、「詳細を見る」、「お問い合わせ」ボタンの画像を作成して下さい。
ご注意事項

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

● カートに入れる、詳細を見る、お問い合わせの文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。

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

●作成ボタン例
　　　

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

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

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

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

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

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

貼り付け後、下部の各項目説明をご覧の上、指定を変更して下さい。

/* ボタン画像設定 */

/* 共通設定 */
.list_item_table .bot_b .cartaddinput,
.list_item_table .bot_b .detailinput,
.list_item_table .bot_b .inquiryinput,
.other_item .bot_b .text-11 {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}

/* カートに入れるボタン */
.list_item_table .bot_b .cartaddinput {
width: 130px;
height: 25px;
background-image: url(image/add_carts.gif);
float: left;
margin-right: 10px;
}

/* 詳細を見るボタン */
.list_item_table .bot_b .detailinput {
width: 110px;
height: 25px;
background-image: url(image/detail.gif);
float: left;
margin-right: 10px;
}

/* お問い合わせボタン */
.list_item_table .bot_b .inquiryinput {
width: 110px;
height: 25px;
background-image: url(image/inquirys.gif);
float: left;
}

/* 関連商品カートに入れる */
.other_item .bot_b .text-11 {
width: 100px;
height: 25px;
background-image: url(image/add_carts_other.gif);
}

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

※↓以下は非表示にしない場合に使用

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


●各項目説明

共通設定
inputタグに対する指定です。どちらのボタンについても共通の指定となります。
特に変更していただく必要はございません。
※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。
カートに入れるボタン
カートに入れるボタン用の指定となります。
width

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

height

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

background-image

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

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

margin-right: 10px;

区切り線を非表示にした場合に、カートに入れるボタンと詳細を見るボタンとの間を空けるための指定です。区切り線を非表示にされていない場合は、必要ありませんので削除して下さい。
初期設定では、10pxを指定しています。

詳細を見るボタン
詳細を見るボタン用の指定となります。

width

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

height

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

background-image

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

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

margin-right: 10px;

区切り線を非表示にした場合に、詳細を見るボタンとお問い合わせボタンとの間を空けるための指定です。区切り線を非表示にされていない場合は、必要ありませんので削除して下さい。
初期設定では、10pxを指定しています。

お問い合わせボタン
お問い合わせボタン用の指定となります。

width

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

height

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

background-image

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

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

関連商品カートに入れるボタン
関連商品カートに入れるボタン用の指定となります。

width

作成された画像の横幅を記載して下さい。　※単位px(ピクセル)　
※関連商品用の「カートに入れる」ボタンは、枠がございますので、横幅を100px以内で設定して下さい。
※画像は、100px以内で別途作成をお願い致します。

height

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

background-image

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

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

区切り線
カートに入れるボタンと詳細を見るボタンとお問い合わせボタンの間に表示されている区切り線「｜」の設定です。

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

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

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

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

float: left;

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


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

※他のページのボタンについて
・トップページ
http://www.ocnk.net/faq//faq/index.php?action=artikel&cat=281597&id=462&artlang=ja
・商品詳細ページ
http://www.ocnk.net/faq//faq/index.php?action=artikel&cat=281597&id=458&artlang=ja
・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
http://www.ocnk.net/faq//faq/index.php?action=artikel&cat=281597&id=463&artlang=ja
・掲示板
http://www.ocnk.net/faq//faq/index.php?action=artikel&cat=281597&id=464&artlang=ja
最終更新: 2008-10-28 11:50
作成者: おちゃのこ刑部

このレコードを印刷する {writePrintMsg}
{writeXMLMsgTag} {writeXMLMsg}

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

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

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


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