掲示板ページの「投稿する」「リセット」「修正する」「検索する」「返信」「送信」ボタンを画像にしたい
ボタン画像の作成とスタイルシートの編集で設定可能です。
＞サンプルページ
下記の手順で作業を行って下さい。
画像編集ソフトにて、「投稿する」、「リセット」、「修正する」、「検索する」、「返信」、「送信」ボタンの画像を作成して下さい。
● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● 投稿する、リセット、修正する、検索する、返信、送信の文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。
ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。
●作成ボタン例
※上記サンプルは、保存してご利用いただいても結構です。
＞その他サンプルボタン画像
画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。
「デザイン管理」＞「スタイルシート編集」
（1）現在ご利用中のテンプレートが表示されますので、新規に名前を付けて下さい。
（2）下記の指定をコピーしスタイルシート内に貼り付けて下さい。
※貼り付け位置は、スタイルシート内の最下部にお願い致します。
貼り付け後、下部の各項目説明をご覧の上、指定を変更して下さい。
/* 共通設定 */
.bbs_table_s .postinput,
.bbs_table_s .resetinput,
.bbs_table_s .changeinput,
.bbs_table_s .searchinput,
.bbs_td_color3 .replyinput,
.point_box3 .sendinput {
display: block;
cursor: pointer;
text-indent: -9999px;
border: none;
background-color: transparent;
}
/* 投稿するボタン */
.bbs_table_s .postinput {
width: 70px;
height: 25px;
background-image: url(image/post.gif);
float: left;
margin-right: 10px;
}
/* リセットボタン */
.bbs_table_s .resetinput {
width: 70px;
height: 25px;
background-image: url(image/reset.gif);
float: left;
}
/* 修正ボタン */
.bbs_table_s .changeinput {
width: 70px;
height: 25px;
background-image: url(image/change_bs.gif);
float: left;
margin-right: 10px;
}
/* 検索するボタン */
.bbs_table_s .searchinput {
width: 70px;
height: 25px;
background-image: url(image/search_b.gif);
display: inline;
}
/* 返信するボタン */
.bbs_td_color3 .replyinput {
width: 40px;
height: 25px;
background-image: url(image/reply.gif);
}
/* 送信するボタン */
.point_box3 .sendinput {
width: 40px;
height: 25px;
background-image: url(image/send.gif);
display: inline;
}
| 共通設定 | ||||||||
| inputタグに対する指定です。どちらのボタンについても共通の指定となります。 特に変更していただく必要はございません。 ※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。 |
||||||||
| 投稿するボタン | ||||||||
投稿するボタン用の指定となります。
|
||||||||
| リセットボタン | ||||||||
リセットボタン用の指定となります。
|
||||||||
| 修正するボタン | ||||||||
修正するボタン用の指定となります。
|
||||||||
| 検索するボタン | ||||||||
検索するボタン用の指定となります。
|
||||||||
| 返信ボタン | ||||||||
返信ボタン用の指定となります。
|
||||||||
| 送信ボタン | ||||||||
送信ボタン用の指定となります。
|
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
・トップページ
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=461
・・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
https://www.ocnk.net/faq/index.php?action=faq&id=463