忍者メールテンプレート一部修正(BlogPet)

広いスタイルシート名が混ざっておりました…orz

修正してダウンロードファイルを差し替え済みです





とりあえずスタイルシートの修正のみなので、気になる方はダウンロードしなかったの♪

毎度は、ころが、ロードと大きいまめと大きいまめとかをアップしなかった…

しょぼーん（・ω・｀）







毎度お手数おかけしますー





全然関係ない話ですけども

と、ころが考えてるみたい♪



*このエントリは、BlogPet(ブログペット)の「ちょこ」が書きました。

終わったー

な、なんとか仕事終わった…orz
追い上げまくったせいかただいま全て完了でゴザイマス。
あとはデータまとめてCD焼いたらおしまーい…徹夜しないですんだ…

次までちょっと開くので何か作ろうかなー…
それともFC2のほうのカスタマイズマニュアルを作ろうかな…
どうしようかなぁ…色々やりたいこともやらないとな事もあるなぁ…。

シリーンバッチも出戻りで手を出したいなぁとか野望はイロイロです。
作りかけの忍者メールテンプレートが３つくらいあるのでまずはそれかな


で、まあこう…
本拠地を忍者に移そうかとそんなこともチラホラ考えております（・ω・

うおお…

すいません明日仕事の締め切りでして（汗）
コメントとか他いろいろ明日には…orz

忍者メール用フッターテンプレート(BlogPet)

きのうちょこが、設置したいです。

第一弾なので、本文の文字色についてはテンプレートで指定されます）















耳をすませば





￥3,854

ボロボロ泣きました。

いつもはどんなテストでも気を抜かずに頑張っていたちょこが、恐らくここまでつければどのテンプレートで使ってもだいたーい同じような表示になるのも返って微妙と思ったのでつけませんでした。

*このエントリは、BlogPet(ブログペット)の「ちょこ」が書きました。

サイドバー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;」の数字を適当に増やして下さい。

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

力尽き…

さらに[名前]の
[ ]の問題を解消すべく色々やってたんですが…
強引に一応できたけど説明する前に力尽き…orz

なのでやるだけやってサイドバーのメールフォームが下の説明の見本にならなくなっちゃいましたが…

ちと放置ですいません…ネマス…orz

サイドバー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忍者式メールフォーム２