このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。
皆さん、こんにちは。
おちゃのこネットの刑部です。
今回のデザイン道場は、各情報入力箇所の入力エリアやセレクトボックス、ラジオボタン、チェックボックス等の背景を変更する方法のご紹介です。
スタイルシートを編集します。
管理画面→デザイン管理→スタイルシートの編集をクリックして下さい。
スタイルシートの編集画面が開いたら、下記の指定の追加と編集を行って下さい。
input,
select,
textarea {
background-color: #FFFFDD;
}
/* フォームボタン強調 */
.bot_b input,
.shopc_in .changeinput,
.shopc_in .deleteinput,
.bbs_page_body .postinput,
.bbs_page_body .resetinput,
.bbs_page_body .searchinput,
.bbs_page_body .replyinput,
.bbs_page_body .sendinput,
.bbs_page_body .changeinput,
.td_color2 .changeinput,
.td_color2 .deleteinput {
padding: ****;
background-color: ****;
background-image: ****;
color: ****;
border: ****;
}
編集後、「登録処理を完了する」ボタンをクリックして下さい。
input,
select,
textarea
について |
input,
select,
textarea {
background-color: #FFFFDD;
}
この指定については、コピーしてスタイルシート内に貼り付けて下さい。
貼り付け位置は、各テンプレートの/* フォームボタン強調 */の上にお願い致します。
貼り付け後、#FFFFDDのカラーコードを変更して下さい。
※背景色に黒色(#000000)等を指定いただいた場合は、入力する文字が見えなくなる可能性がありますので、
color: #FFFFFF;
等の文字指定を追記して下さい。
|
/* フォームボタン強調 */
について |
この部分は、既存の指定を編集して下さい。
各テンプレートに/* フォームボタン強調 */として
.bot_b inputの指定がございます。
その指定内に
.shopc_in .changeinput～.td_color2 .deleteinput
までを追加して下さい。
※inputに対して指定を追加するため、ボタンの表示に不具合が出る可能性がありますので、下記の指定にて上書き指定しています。
通常
.bot_b input {
変更後
.bot_b input,
.shopc_in .changeinput,
.shopc_in .deleteinput,
.bbs_page_body .postinput,
.bbs_page_body .resetinput,
.bbs_page_body .searchinput,
.bbs_page_body .replyinput,
.bbs_page_body .sendinput,
.bbs_page_body .changeinput,
.td_color2 .changeinput,
.td_color2 .deleteinput {
※paddingやbackground-colorの指定については、変更いただく必要はございません。 |
前号へ
