サイドバーin忍者式メールフォーム・２

基本的に、ブログテンプレートはそれぞれ作り方が違うので…自分のとこで作ったものへの対応として書いてます。（全部に対応するのはわたくしには無理デスorz）
他作者さまの作られたテンプレートでは同様の表示に出来ない場合もありますので、その点はあらかじめご了承下さい。（全称セレクタがあればほぼ平気だと思うのですが）

ブログサイドバーに忍者式メールフォームを設置する時、気になるのが項目名です。

[名前]　コレ。
カッコがつくんですよね…。
（現在は管理画面の設定で[]が外せるようになりました～）
とことんデザインするため、この[ ]もなんとかしようと思ったのでございますが…結局出た結論は「このままじゃむりかも」でした…orz

で、苦肉の策「そうだ項目名を画像にしてしまえ」編です。
今サイドバーに設置してあるメールフォームが各項目名を全て画像にしたものです。
ちょっとスッキリ？

通常用
    
入力必須項目用
    

上のが使用してる画像です。
「通常用」と「入力必須項目用」に記号をつけた２種類を用意しました。とりあえず普通のHPやブログで使うと思われる基本項目のみですが、画像さえ作れば全ての項目名を変更できます。

ブログサイドバー設置を前提に説明します。
まずこの記事の通りにメールフォームの設置を終わらせます。この記事の内容を事前に済ませておかないとスタイルシートは反映されません。
次に各項目の画像を用意してブログスペースにアップロードしてください。
（画像は上のものをダウンロードして使用して下さって構いません）

で、以下のスタイルシートを一旦メモ帳などにコピーします。

/*--メールフォーム項目名を画像にする--*/
/*名前*/
div#sidemail div.name_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_name.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*メール*/
div#sidemail div.mail_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_mail.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*URL*/
div#sidemail div.url_right{
padding-top:9px;
background-image: url('http://file.xxxxxxxx.blog.shinobi.jp/simple_url.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*本文*/
div#sidemail div.textarea_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_messe.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*件名*/
div#sidemail div.title_right{
padding-top:9px;
background-image: url('http://file.xxxxxxx.blog.shinobi.jp/simple_title.gif');
background-repeat: no-repeat;
background-position: left top;
}
/*各項目文字表示を隠す*/
div#sidemail div.name_left,div#sidemail div.mail_left,div#sidemail div.url_left,div#sidemail div.title_left,div#sidemail div.textarea_left{
display:none;
}

赤文字の部分が項目ごとに表示される画像のアドレスなので、ここをそれぞれ使用したい画像のアドレスに書きかえて下さい。（ブログスペースやHPスペースにアップロードした画像アドレス）

入力必須項目に指定した部分につく「必須マーク」も表示できなくしてあるので、入力必須項目は使用する画像を変更してアピールを（・ω・
（なので画像が２種類あると…）

あとは修正がおわったスタイルシートをブログテンプレートのスタイルシートに追加するだけです。
この記事の内容を事前にすませておいてくださいね～。
こっちをやり忘れると変更できません。

＊このスタイルシートで表示の変更ができるのは
「名前」「メールアドレス」「URL」「件名」「本文（大）」のみです。
他項目については通常の[ ]つきの表示になります。
上記以外の項目も画像にしたい場合はスタイルシートの追加が必要です。

＊画像を他のものにすると大きさによっては画像の下が隠れてしまったりしますので、その場合は各項目の「padding-top:9px;」の数字を適当に増やして下さい。

＊見えてないだけで文字の項目自体がなくなった訳ではないので、届くメールには各項目につけた名称がそのまま使われます。