デザイン管理 » その他カスタマイズ
Ｑ.掲示板ページの「投稿する」「リセット」「修正する」「検索する」「返信」「送信」ボタンを画像にしたい
＞サンプルページ
下記の手順で作業を行って下さい。
画像編集ソフトにて、「投稿する」、「リセット」、「修正する」、「検索する」、「返信」、「送信」ボタンの画像を作成して下さい。
● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。
● 投稿する、リセット、修正する、検索する、返信、送信の文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。
●作成ボタン例
※上記サンプルは、保存してご利用いただいても結構です。
＞その他サンプルボタン画像
画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。
「デザイン管理」＞「スタイルシート編集」
（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タグに対する指定です。どちらのボタンについても共通の指定となります。 特に変更していただく必要はございません。 ※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。 | ||||||||
| 投稿するボタン | ||||||||
投稿するボタン用の指定となります。
| ||||||||
| リセットボタン | ||||||||
リセットボタン用の指定となります。
| ||||||||
| 修正するボタン | ||||||||
修正するボタン用の指定となります。
| ||||||||
| 検索するボタン | ||||||||
検索するボタン用の指定となります。
| ||||||||
| 返信ボタン | ||||||||
返信ボタン用の指定となります。
| ||||||||
| 送信ボタン | ||||||||
送信ボタン用の指定となります。
|
編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。
・トップページ
http://www.ocnk.net/faq/281597_462_ja.html
・商品詳細ページ
http://www.ocnk.net/faq/281597_458_ja.html
・商品一覧ページ
http://www.ocnk.net/faq/281597_461_ja.html
・・カート内、会員登録、マイページ、お問い合わせ、パスワードを忘れた方ページ
http://www.ocnk.net/faq/281597_463_ja.html
作成者: おちゃのこ刑部
このエントリにコメントできません。