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

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

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

忍者式よもやま話

ちょっとよもやま。めんどくさい話になるので興味のある方だけドウゾ。
忍者式メールフォームについて。
自分用覚え書きも兼ねて。
カスタマイズ用に構成が知りたいとメールくれた方も…こ、これでわかるかしら？

下の記事に書いてある内容をみてみると…

<div class="bottommailbox">
<div class="bottommail">
この部分にメールフォームのタグをコピー＆ペースト
<noscript>javascript対応ブラウザでjavascriptをオンにしてご利用下さい</noscript>
</div>
</div>

なんだかしつこいくらいに<div>で囲んでいるのがお分かりになると思います…（汗）

タグだと分かりにくいので、視覚的にしてみるとこんな構造。


「div.bottommail」より内側の部分が全て忍者メールフォームのタグのjavascriptで自動で書き出されるHTML部分です。書き出される内容の詳細はまた来週（？）。
「div.bottommail」と「div.main」の間にもう一つdivがあるのですが、それは忍者メールで書き出されるID名のみのボックスなので装飾には使用していません。

なんでかというと、メールフォームのタグから吐き出される各要素についている「ID」はメールフォームの名前で毎回変わるもののようで、自分のようにテンプレート配布するとなると使えないからです。（みんな違うと想定されるので）
その箱を使うとなると、人によっていちいちID名部分を変更しないといけなくなる訳で…それをやるなら最初から忍者さんで配布されているCSSフォーマットに書いていったほうが早いから…（'-';
（しかもコピペできても作業がめんどくさいのでそれではテンプレの意味もないと…orz）

で、結局は「クラス」のみを使用する事になるのですが…書き出されるHTMLの一番大外の枠は「ID]しかついていないのです。なのでこれを使用すると、メールフォームにつけた名前が同じ人しか使えないテンプレートが出来上がってしまいます。
なので自分で代わりのボックスをその更に外につける事にします。
それが「div.bottommail」だと思って下さい。

じゃあその外側の「div.bottommailbox」はなんじゃ？と言うと
「div.bottommailbox」より外側はブログのテンプレート記事表示部分なのです。
ブログの記事は通常文字が書かれる位置が指定してありまして、ほとんどの場合は「text-align: left;」だと思うのですが、これが記事内の文字などを「左よせ」で表示しますという指定です。
なので記事内に書き出される事になるこのフォームも「左寄せ」で表示される事になる訳です。
（ただしdivへの効果はIEのみで、もじらー等はデフォルト設定で左に寄ってるダケ）
ブログテンプレートの記事が書かれる部分に「text-align: center;」とつければメールフォームは中央に表示されますが（IEではね…）
その結果「記事自体も中央に表示されることになります」（汗）
それを回避する為に箱で囲い、「この箱の中身は中央に表示する」と指定する為にあるのが「div.bottommailbox」です。

IE系以外（フォックスとかもじらー）なら「div.bottommail」に
div.bottommail{
margin: 0 auto;
}
と指定してあげれば記事中央に表示できますが、IEがそれを理解してくれないので
「bottommailbox」で囲ってその中身を中央に表示する為の指定をつけます。
（こっちの指定は逆にフォックス、もじらー系が理解してくれません＾＾；）
div.bottommailbox{
text-align: center;
}
こんなかんじに。
（IEは「この中身をどこに表示」、もじらーは「この箱はどこに表示」ってかんじで、結果は同じことなんですがお願いする場所が違うのです・笑）

ほんと言うと、ここまで囲まなくてもって気はしますが…（'-';

あとは
<noscript>javascript対応ブラウザでjavascriptをオンにしてご利用下さい</noscript>
これを同じデザイン内に収める為かなぁ…。
javascriptをオフにしている人にはこのメールフォームは見えないのです。
ですのでjavascriptをオフにしている人用のメッセージも書いておいたほうが宜しいかと思われるのですが、その時デザインおかしくなるのもナニなので。
コレをデザイン内に収めつつ表示位置を指定するのに、二つの箱で囲む事しか思いつかなかった結果でもあります…orz
「main」に装飾をつけない理由もjavascriptオフ時に同様の飾りがほしいからです（・ω・｀

今後作るかもしれないデザインとの兼ね合いとかもあるかな…（汗）
とりあえず自分が作りたいものを想定すると、二重の箱が必要になりまして…その時の為に（笑）
二重くらいにしとくと、後でカスタマイズしたい時にある程度までのデザインには対応できるはずなので、今後新しいテンプレートを配布した時スタイルシートを書き換えるだけで使用できる予定なのです。（たぶんね…）

HTMLを書き換える回数を極力減らす為でもある、と。

なるべく深く考えなくてよくなる為に必要と思ったら躊躇なく要素を足す傾向にあります。
いらないと思った部分は削除したり変更したりしてくださいまし（・ω・

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

忍者式メールフォーム第一弾
あんまり問題はないのですが…まだ特定のIDでしか効かないスタイルシート名が混ざっておりました…orz
修正してダウンロードファイルを差し替え済みです。

とりあえずスタイルシートの修正のみなので、気になる方はダウンロードしてスタイルシートのみアップロードして上書き下さいませ。
HTMLや画像はアップロードしなくて平気です。

クラス名…把握したつもりができてなかった…しょぼーん（・ω・｀


毎度お手数おかけしますー<(_ _)>


全然関係ない話ですが。
メールチェックするのをすっかり忘れていた今はあんまり使ってないメールアドレスがあるのですけども。
今日ふと思い出してメールチェックしたら
新着メール７８３件とか恐ろしい事になっておりました…orz

メールチェック…まめにしようね…orz

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

忍者式メールフォームを忍者ブログで使う為のフッターテンプレートです。
あ、いや、テンプレートってほどのもんでもないですが…（'-';
こんな使い方如何ですか的提案カモ。

すっかり忍者式メールのとりこですが、もうしばらくお付き合い下さい（笑）

ちょっとコメント重視なウェブ拍手みたいな感じで、例えば絵や写真を展示しているけどコメント機能を使っていない場合や、コメント機能オンでもメールでも感想欲しいなーって時ナドに、作品を展示した記事にだけポンと置いてみたりする感じで使うといいかも？
他にも何かに使えそう？？
サンプルは実際にフッターテンプレートとして使って追記部分に設置してあります。


セールスポイント…（笑）

忍者ブログフッターテンプレートで忍者式メールフォームを使う利点っぽいもの

１．フッターテンプレートで使用する事で、表示する記事を簡単に任意で選べる。
２．追記部分へのリンクの表示名を毎回設定できるので、メールフォームを設置した時だけ「メールコメントする？」みたいな感じに分かりやすく表示することができる。
３．忍者メールは送信後に画面の移動をする必要がないので、見ているページを開いたままの状態でメールが送れ、送信後に戻る必要もない。
４．ほんとに項目が適当に選べる（笑）名前と本文のみとかネ。

じゃあやってみよーってことで。

忍者式メールフォームをレンタルしてデザインは「自作ＣＳＳ使用」を選択。
設置項目は自由に選んでOK。メールフォームのタイトル、メール説明文も必要なければ表示しないを選択してOKです。
以下のタグに忍者メールのタグをコピペした状態でフッターテンプレートに登録してください。
（アマゾン用を選ばないように）

<div class="bottommailbox">
<div class="bottommail">
この部分にメールフォームのタグをコピー＆ペースト
<noscript>javascript対応ブラウザでjavascriptをオンにしてご利用下さい</noscript>
</div>
</div>

例：
<div class="bottommailbox">
<div class="bottommail">
<script type="text/javascript"
src="http://xxx.shinobi.jp/xxxxxxx/xxx.js" charset="utf-8">
</script>
<noscript>javascript対応ブラウザでjavascriptをオンにしてご利用下さい
</noscript>
</div>
</div>

以下のスタイルシートを「ブログ用テンプレートのスタイルシート」に追加してください。

/*--メールフォームの大枠--*/
div.bottommailbox{
text-align: center;
margin:0;
padding:0;
}
/*--フォームを囲む内枠--*/
div.bottommail {
text-align: center;
width:80%;
color:#666;
margin:0 auto;
font-size:10px;
padding: 10px;
border:1px solid #ccc;
background:#eee;
}
div.bottommail div.main br{
line-height: 1px;
}
/*--一行テキストエリア--*/
div.bottommail div.main input {
margin :1px;
background: #fff;
border : 1px solid #666;
font-size: 13px;
color: #666;
width: 70%;
}
/*--テキストエリア--*/
div.bottommail div.main textarea {
margin :1px;
background: #fff;
border : 1px solid #666;
font-size: 13px;
line-height: 130%;
color: #666;
width: 80%;
height:100px;
}
/*--送信ボタン--*/
div.bottommail div.main input.submit_button {
color: #fff;
margin : 0;
background: #666;
font-weight : bold;
font-size: 10px;
border : 1px solid #666;
width: 80px; /*送信ボタンの文字数が多い場合はここの数字も増やして下さい*/
line-height: 100%;
}

＊注意：使用中のテンプレートによっては微妙に間隔に差が出るかもしれません
色は非常にシンプルな色にしてありますので、こちらもお好みで変えて下さい。

あとはメールフォームを使用したい記事で登録したフッターテンプレートを呼び出すだけです。
ついでに「続きを書く」の設定で「追記のリンクテキスト」もメールコメントとかにでも書き換えておくとメールフォームがある記事が分かりやすいかもしれません。
追記を普通に使用している場合は追記を読もうとすればメールフォームが見えるのでリンクテキストは変えなくていいかも？

＊注意：追記開閉スクリプトを設置してる場合はメールフォームをあんまりたくさん置くと忍者さんに迷惑かけちゃうかもなのでほどほどに
（あれは見えてないだけで実は最初に全部読み込んでるので…）

忍者ブログで忍者メールフォーム

下で紹介しました忍者メールフォームのテンプレートですが
「ブログしかないから使えない」とご相談を数件頂きました。

忍者ブログを借りているなら使えますよ～。

他でもファイルがアップロードできてスクリプトの実行が許可されてればいけますが…ぼそり

サイドバーには無理ですけどね…orz

忍者ブログでは「ファイルをアップロード」できるわけですが。

Ｑ＆Ａに着目

Q.ファイルのアップロードはできますか？
A.1ファイルにつき500KBまでのファイルをアップロードすることができます。
ファイルの種類は制限していません。

ＨＴＭＬファイルもスタイルシートファイルも全部アップロードできるので、ブログ管理画面の「ファイルアップロード」を使えばブログスペースに全てアップロード可能なのです～。
で、一応試しましたが問題なく使用できます。
一応忍者ブログ内設置見本ナド

ただ、画像アドレスやスタイルシートアドレスを「絶対アドレス」（http://～から始まるアドレスのことです。絶対パスとも言います）に書き直す必要がありますので、その方法を一応ご紹介しておきます。


まず、この記事に書いてある修正内容を全て終わらせて下さい。
（２.修正する、までやっておいてくださいね～）
次に、画像ファイルをブログの管理画面から「ファイルアップロード」を使用してブログスペースに全てアップロードします。

画像をアップロードし終わったら、スタイルシートファイル（usamail.css）を開き
以下の部分をアップロードした画像のアドレスに書きかえます。

使用している画像は全部で３こです
background-image: url(mail_usa_body.gif);
background-image: url(mail_usa.gif) ;
background-image: url(mail_usa_title.gif);

スタイルシートの画像のアドレス変更が必要な部分の横に
/*画像アドレスは必要に応じて書きかえて下さい*/
と付けてありますので探しやすいハズ？

書き換え例：
うち（http://tmpblog.blog.shinobi.jp/）の場合ですと
これを
background-image: url(mail_usa.gif) ;
↓
こうします
background-image: url(https://blog.cnobi.jp/v1/blog/user/f120fdc7823cb38f0c6103dc0fbbfd3e/1156617016) ;

それが終わりましたら、スタイルシートファイルも管理画面から「ファイルアップロード」でブログスペースにアップロードしちゃってください。

で、「index.html」をテキストエディタで開きます。
上のほうに以下のような部分がありますので
<LINK rel="stylesheet" href="usamail.css" type="text/css">
色のついている部分（usamail.css）を画像と同じようにブログスペースにアップロードしたスタイルシートファイルのアドレスに書き換えて下さい。

で、最後に重要な事が。
「index.html」の名前を適当な名前に変更して下さい。
「mail.html」とかなんでも、任意で大丈夫です。
とにかく「index」の部分を半角英数字で別の名称にしてください。
理由は説明すると長くなるので割愛で…（汗）
どうしたらいいかわからなければ「mail.html」でいいと思います。
（保険みたいな作業ですけれども）

名前の変更が終わりましたらhtmlファイルも他のものと同じようにアップロードして下さい。

以上で完了です。
あとはアップロードしたhtmlファイルにアクセスしてみて動作確認をしてくださいね～。
（アップロード画面のファイル一覧に表示されているhtmlファイルにアクセスすればＯＫ）

あとはブログからそのhtmlにリンクを張るなどして使用してください。

完成～