掲示板ページの「投稿する」「リセット」「修正する」「検索する」「返信」「送信」ボタンを画像にしたい

2008-10-28 12:06

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

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

STEP1 ボタン画像を作成する

画像編集ソフトにて、「投稿する」、「リセット」、「修正する」、「検索する」、「返信」、「送信」ボタンの画像を作成して下さい。

ご注意事項

● 画像の横幅、縦幅については、ページ内の表示箇所に合わせてご自由に設定して下さい。

● 投稿する、リセット、修正する、検索する、返信、送信の文言についても、ボタン内に含めて下さい。
文言はご自由に設定して下さい。

ボタン画像作成後、管理画面→画像専用管理画面→コンテンツフォルダ内にアップロードして下さい。

●作成ボタン例

     

※上記サンプルは、保存してご利用いただいても結構です。
>その他サンプルボタン画像

STEP2 スタイルシートを編集する


画像のアップロード後、スタイルシートの編集を行います。
管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(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タグに対する指定です。どちらのボタンについても共通の指定となります。
特に変更していただく必要はございません。
※ただし、ここで設定された場合は、必ず画像ボタン用の設定を行って下さい。ボタンが非表示となります。
投稿するボタン
投稿するボタン用の指定となります。
width

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

height

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

background-image

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

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

margin-right: 10px;

投稿するボタンとリセットボタンとの間を空けるための指定です。

リセットボタン
リセットボタン用の指定となります。

width

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

height

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

background-image

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

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

修正するボタン
修正するボタン用の指定となります。

width

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

height

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

background-image

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

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

検索するボタン
検索するボタン用の指定となります。

width

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

height

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

background-image

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

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

返信ボタン
返信ボタン用の指定となります。

width

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

height

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

background-image

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

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

送信ボタン
送信ボタン用の指定となります。

width

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

height

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

background-image

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

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


編集後、ページ最下部の「登録処理を完了する」ボタンをクリックして下さい。

※他のページのボタンについて
・トップページ
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