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

Ｑ.商品詳細ページの「カートに入れる」「お問い合わせ」「変更する」ボタンを画像にしたい

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

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

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 .sec_linel {
display: none;
}

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

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


●各項目説明

共通設定
inputタグに対する指定です。どちらのボタンについても共通の指定となります。
特に変更していただく必要はございません。
カートに入れるボタン
カートに入れるボタン用の指定となります。
width

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

height

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

background-image

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

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

margin-right: 10px;

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

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

width

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

height

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

background-image

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

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

変更するボタン
変更するボタン用の指定となります。

width

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

height

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

background-image

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

記載例）　background-image: url(image/change_d.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=461&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
最終更新: 2011-12-06 18:35
作成者: おちゃのこ刑部

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

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

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

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


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