商品詳細ページの「カートに入れる」「お問い合わせ」「変更する」「お気に入り追加」ボタンを画像にしたい
ボタン画像の作成とスタイルシートの編集で設定可能です。
＞サンプルページ
下記の手順で作業を行って下さい。
STEP1 ボタン画像を作成する
画像編集ソフトにて、「カートに入れる」、「お問い合わせ」、「変更する」、「お気に入り追加」ボタンの画像を作成して下さい。
ご注意事項
● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● カートに入れる、お問い合わせ、変更するの文言についても、ボタン内に含めて下さい。文言はご自由に設定して下さい。
ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。
●作成ボタン例
※上記サンプルは、保存してご利用いただいても結構です。
＞その他サンプルボタン画像
STEP2 スタイルシートを編集する
画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。
「デザイン管理」＞「スタイルシート編集」
（1）現在ご利用中のテンプレートが表示されますので、新規に名前を付けて下さい。
（2）下記の指定をコピーしスタイルシート内に貼り付けて下さい。
※貼り付け位置は、スタイルシート内の最下部にお願い致します。
貼り付け後、下部の各項目説明をご覧の上、指定を変更して下さい。
/* 詳細ボタン画像設定 */
/* 共通設定 */
.detail_item_text .bot_b input {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}
/* カートに入れるボタン */
.detail_item_text .bot_b .cartaddinput {
width: 140px;
height: 40px;
background-image: url(image/add_cart.gif);
float: left;
margin-right: 10px;
}
/* お問い合わせボタン */
.detail_item_text .bot_b .inquiryinput {
width: 120px;
height: 40px;
background-image: url(image/inquiry.gif);
float: left;
}
/* 変更するボタン */
.detail_item_text .bot_b .editinput {
width: 120px;
height: 40px;
background-image: url(image/change_d.gif);
float: left;
margin-right: 10px;
text-indent: -9999px!important;
}
/* お気に入りに追加ボタン */
.detail_item_text .bot_b .favoriteinput {
width: 120px;
height: 40px;
background-image: url(image/favorite.gif);
float: left;
margin-left: 10px;
text-indent: -9999px!important;
}
/* 区切り線非表示の場合 */
.detail_item_text .sec_linel,
.detail_item_text .sec_line2 {
display: none;
}
※↓以下は非表示にしない場合に使用
/* 区切り線表示の場合 */
.detail_item_text .sec_linel,
.detail_item_text .sec_line2 {
display: block;
float: left;
}
/* 共通設定 */
.detail_item_text .bot_b input {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}
/* カートに入れるボタン */
.detail_item_text .bot_b .cartaddinput {
width: 140px;
height: 40px;
background-image: url(image/add_cart.gif);
float: left;
margin-right: 10px;
}
/* お問い合わせボタン */
.detail_item_text .bot_b .inquiryinput {
width: 120px;
height: 40px;
background-image: url(image/inquiry.gif);
float: left;
}
/* 変更するボタン */
.detail_item_text .bot_b .editinput {
width: 120px;
height: 40px;
background-image: url(image/change_d.gif);
float: left;
margin-right: 10px;
text-indent: -9999px!important;
}
/* お気に入りに追加ボタン */
.detail_item_text .bot_b .favoriteinput {
width: 120px;
height: 40px;
background-image: url(image/favorite.gif);
float: left;
margin-left: 10px;
text-indent: -9999px!important;
}
/* 区切り線非表示の場合 */
.detail_item_text .sec_linel,
.detail_item_text .sec_line2 {
display: none;
}
※↓以下は非表示にしない場合に使用
/* 区切り線表示の場合 */
.detail_item_text .sec_linel,
.detail_item_text .sec_line2 {
display: block;
float: left;
}
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
※他のページのボタンについて
・トップページ
https://www.ocnk.net/faq/index.php?action=faq&id=462
・商品一覧ページ
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
・トップページ
https://www.ocnk.net/faq/index.php?action=faq&id=462
・商品一覧ページ
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