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

またまた忍者式メールフォームです。本日はサイドバー設置編。
これはテンプレートとは呼べませんが…カテゴリーがないのでテンプレートカテゴリーです。
（非常にいいかげんです）

サイドバーに設置するなら「プレーンスキン」でも十分ですが、ブログテンプレートのサイドバーの幅によってはうまく収まらないので、ここでまたデザイン「自作CSSを使用する」でいってみマス。
（いやぁ…ウチのブログテンプレも幅あわなくて…orz）
サイドバーのプラグイン＞フリーエリアを作って設置することを想定しています。

まずは恒例の…CSS追加でございます。コピーでOKでございます。
ブログテンプレートのスタイルシートに以下のスタイルシートを丸ごと追加してください。

/*--サイドバーメールフォーム用--*/

/*--メールフォームを囲む箱--*/
div#sidemail{
margin:0;
padding:0;
font-size:10px;
line-height: 120%;
}
/*--既存mainクラス設定修正用--*/
div#sidemail div.main{
margin:0;
padding:0;
font-weight: normal;
border: none;
font-size:10px;
line-height: 120%;
width:90%;
background-color: transparent;
background-image: none;
}
/*--各行の間のbr間隔を指定--*/
div#sidemail div.main br{
line-height: 1px;
}
/*--テキストエリア--*/
div#sidemail div.main textarea {
margin :1px 0;
background: #fff;
border : 1px solid #666;
font-size: 13px;
line-height: 130%;
color: #666;
width: 90%;
height:70px;
}
/*--一行テキストエリア--*/
div#sidemail div.main input {
margin :1px 0;
background: #fff;
border : 1px solid #666;
font-size: 13px;
color: #666;
width: 90%;
}
/*--送信ボタン--*/
div#sidemail div.main input.submit_button {
color: #fff;
margin : 0;
background: #666;
font-weight : bold;
font-size: 10px;
border : 1px solid #666;
width: 50px; /*送信ボタンの文字数が多い場合はこの数字も増やして下さい*/
line-height: 100%;
}

基本的な文字の色（項目名、メールフォームタイトルナド）は使用しているブログ用テンプレートのサイドバーに使われている文字色になります。
指定したい場合は「div#sidemail」にcolor指定を付けてください。

次に「プラグイン」の「フリーエリア」に忍者式メールフォームのタグを書きます。
この時に以下のようにしてください。
（下のタグをコピーして赤字の部分をメールフォームタグに変更でOKです）

<div id="sidemail">
ここにメールフォームのタグをコピー＆ペースト
（この文章は削除してくださいね～）
<noscript>javascriptをオンにしてご利用下さい</noscript>
</div>

上のタグの指定場所に忍者式メールフォームで発行されるタグをコピーして書き込み、プラグインで追加した「フリーエリア」の「HTML編集」で丸ごとフリーエリアに放り込んで下さい（・ω・
借りるメールフォームのデザイン選択は「自作CSSを使用する」にしてくださいネ。


で、以上でおわりです（・ω・

あとはCSS部分を好きなように変更してみてくださいな。
色とかいっそ愉快なほどにシンプルですんで。（汗）
各部の色を変更する程度に留めておくのが一番いいかなってかんじです。
サイドバーのメールフォームがあんまりゴテゴテしてもね、と。

一応見本はウチのサイドバーのオープンメニュー２に放り込んであります。
これは実際ウチで使ってるので相変わらずテストはできませんけども…どんなかんじなのかの表示確認にでもどうぞ。
一見プレーンスキンなのですが、幅が可変になっておりサイドバーのサイズに適当～にあうようになっています。（適当にネ…）


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