商品一覧(関連商品)ページの「カートに入れる」「詳細を見る」「お問い合わせ」ボタンを画像にしたい
ボタン画像の作成とスタイルシートの編集で設定可能です。
>サンプルページ
下記の手順で作業を行って下さい。
STEP1 ボタン画像を作成する
画像編集ソフトにて、「カートに入れる」、「詳細を見る」、「お問い合わせ」ボタンの画像を作成して下さい。
ご注意事項
● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● カートに入れる、詳細を見る、お問い合わせの文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。
ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。
●作成ボタン例
![](https://cafe0707.ocnk.net/data/cafe0707/image/add_carts.gif)
![](https://cafe0707.ocnk.net/data/cafe0707/image/detail.gif)
![](https://cafe0707.ocnk.net/data/cafe0707/image/inquirys.gif)
![](https://cafe0707.ocnk.net/data/cafe0707/image/add_carts_other.gif)
※上記サンプルは、保存してご利用いただいても結構です。
>その他サンプルボタン画像
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;
}
/* 共通設定 */
.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;
}
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
※他のページのボタンについて
・トップページ
https://www.ocnk.net/faq/index.php?action=faq&id=462
・商品詳細ページ
https://www.ocnk.net/faq/index.php?action=faq&id=458
・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
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=458
・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
https://www.ocnk.net/faq/index.php?action=faq&id=463
・掲示板
https://www.ocnk.net/faq/index.php?action=faq&id=464