忍者式よもやま話

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

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

<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(http://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にリンクを張るなどして使用してください。

完成～

忍者メールフォーム用テンプレート・１

忍者メールフォームサービス用のテンプレートを突然思い立って作成しました。
（…と言うかやっと構造とついてるクラスＩＤがわかった…orz）

発行されるメールフォームのタグを貼り付けるだけで使用できます。
メールフォームにつけたIDで「メールフォームスキンの編集」に表示されるスタイルシート名は変わりますが、一応どんなIDをつけていても大丈夫なはずです。（タブンネ…）

画像はブログの使いまわしですが…
「ブログとおそろい」とでも好意的に解釈して頂けると…（汗）
うさぎポストと同じイメージで作ってあります。
ただし、ブログ用ではなく通常のＨＴＭＬ用です。
＊注意：ブログのサイドバーにこのテンプレートは設置できません。

うさぎポストメール
サンプル

サンプルはＨＴＭＬなので送信テストはできません

「名前」「メールアドレス」「件名」「ＵＲＬ」「本文（大）」
以上の５項目を使う場合に一番キレイに見えるように調節してあります。
その他の項目についても同様の表示になるようにはしてありますが、うさぎの柄が微妙な位置になってしまう予定です…orz

最適化具合
Firefox＞IE＞＞＞Netscape＞Opera
（各ブラウザのフォーム入力部品の高さの都合でどうしても揃えきれない部分があります）

お知らせ。本日２６日１９：００時前までにダウンロードされた方へ。
以下の部分のスタイルシートに間違いがありました。
「default」と名前をつけたメール用の指定が一部混ざってしまっている状態です。
大変お手数ですが、スタイルシートの以下の部分を修正して頂くか、ダウンロードしなおしてやってください、お手数おかけしますー<(_ _)>

このスタイルシートの色のついている部分が不要な指定です。
/*--送信ボタン--*/
div.main div#default_submit input.submit_button {
color: #fff;
margin : 0;
background: #6E464F;
font-weight : bold;
font-size: 10px;
border : 1px solid #6E464F;
width: 80px;
line-height: 100%;
}

こう直して下さい。
/*--送信ボタン--*/
div.main input.submit_button {
color: #fff;
margin : 0;
background: #6E464F;
font-weight : bold;
font-size: 10px;
border : 1px solid #6E464F;
width: 80px;
line-height: 100%;
}

忍者メールフォーム用テンプレートの使い方
一番簡単に設置する方法の場合。
修正＆追加が必要なのは二ヵ所だけです。
使い方を書いたテキストファイルも同梱してあります。

まずは準備。ダウンロードしたデータは圧縮ファイルになっていますので、まずはLhaca等の解凍ソフトを使って圧縮ファイルの解凍をして下さい。
解凍するとフォルダになりますので、その中に入っている「index.html」をテキストエディタなどで開いて下さい。修正作業が必要なのは「index.html」のみです。
テキストエディタはTeraPad等がオススメ。

１．追加する
「この真下に忍者メールフォームのタグを丸ごとコピー＆ペーストしてください」
こう書いてある部分の下に忍者メールフォームで発行されるメールフォームのタグをそのままコピー＆ペーストします。
＊注意：デザイン選択で「自作CSS使用」を選んでタグを発行して下さい。自作CSS以外を選択すると正常に表示できません。

２．修正する
<A href="http://xxxxxx.xx.jp">HOME</A>
下の方にこう書いてある部分があります。
このhttp://xxxxxx.xx.jpの部分を、ホームページのアドレスや、メールフォームから戻らせたいページのアドレスに書きかえて下さい。
戻るリンクが不要な場合は、HTML内に書いてある内容にしたがってその部分を削除することもできます。（削除範囲をHTML内にコメントで書いてあります）

以上の作業が終わったら、フォルダごと自分のホームページスペースにアップロードしてください。
フォルダの中身は分けずに、そのまま同じ場所にアップロードして下さい。

以上で設置作業は完了です。

あとはアップロードしたindex.htmlにブラウザでアクセスして、一応動作確認とかしてみてくださいネ。

装飾は全てスタイルシートで行っています。
スタイルシートファイル（usamail.css）がフォルダ内に入っていますので、デザインを調節したい部分があればこのスタイルシートをお好みで修正してください。


テンプレートのダウンロードは以下追記部分へドウゾ。

アマゾン用フッターテンプレートタグ・１

第一弾なのでまずは簡単なものから。
アマゾンアソシエイト用のフッターテンプレートタグです。
画像に商品ページへのリンクをつけてfieldsetをdivにかえ、他要素も色々変えて、後はしつこいくらいにスタイルシートを書き込んだ感じです（汗）
テンプレートのスタイルシートに左右されないように本来いらないような設定までつけてますが、恐らくここまでつければどのテンプレートで使ってもだいたーい同じような表示になるのではないかなーと思われます（タブンネ…）
テンプレートへのスタイルシートの追加をしないコトを前提に作ったので、やたらめったらタグが長くなってますが…orz
ちなみに、文字の色だけは指定した結果テンプレート全体のイメージに合わなくなるのも返って微妙と思ったのでつけませんでした。文字色についてはテンプレートで指定されている本文の基本色になります。（まあなので、本文の文字色が白とかの場合は文字が見えなくなるので、その場合は指定してくださいませ…）

記事表示部分の中央寄せでポンと箱のように表示されるようになっています。
複数の商品を同時に表示しても箱同士がくっつかないようには一応してあります。
適当に装飾したり色かえたり要素追加して使ってみてクダサイナ。
コピペで使えるハズ…た、たぶん

<div style="text-align:center;margin:0;padding:0;">
<!--amazon_web_services-->
<div style="text-align:left;width:80%;margin:0 auto 3px auto;font-size:10px;line-height:120%;padding:5px;border:1px solid #ccc;background:#eee;">
<table style="text-align:left;width:100%;margin:0;padding:0;"><tr><td style="width:40%;text-align:center;vertical-align:top;">
<span><a href="<!--$amazon_Url-->" target="_blank"><img src="<!--$amazon_ImageUrlLarge-->" alt="画像" border="0" style="width:85px;border:1px solid #999;;margin:0;padding:5px;background:#fafafa;"></a></span></td>
<td style="text-align:left;vertical-align:top;">
<p style="font-size:12px;line-height:120%;margin:0;font-weight: bold;"><a href="<!--$amazon_Url-->" target="_blank"><!--$amazon_ProductName--></a></p> <span><!--$amazon_Director--><!--$amazon_Artist-->
<!--$amazon_Author--></span>
<p style="margin:0;padding:0;border-bottom:1px dotted #666;"><!--$amazon_OurPrice--></p>
<p style="margin:5px 0;padding:0;font-weight: bold;"><!--$amazon_Review_Summary--></p>
<span style="font-size:10px;line-height: 130%;"><!--$amazon_Review_Comment--></span>
</td></tr></table>
</div>
<!--/amazon_web_services-->
</div>

色々おかしなトコもあるかもですが…実験につきあう気分でご利用下さい。（ヒドイ）
ご利用はご自由にドウゾ。

＊表示見本＊（通常は追記の下部分に表示されます）

耳をすませば ￥ 3,854 ボロボロ泣きました。 耳をすませばをはじめて見た時の事は今でもよく覚えています。たしかテスト前の連休が始まる前の金曜日でした。いつもはどんなテストでも気を抜かずに頑張っていた私が、この映画を見た後の二連休のあいだ全く勉強に手がつかなかったんです。二日間ずっとこの映画のことを思い出しては胸が苦しくなって、何にも考えられなかったんです。そのころの私は、ちょうど雫と同い年でした。雫の気持ちが痛いくらい分かったんです。雫と自分とが重なってなんともいえない気持ちになったのを覚えています。周りとの葛藤、恋、自分の夢。とにかく私の中では最高傑作の映画です。見終わった後にずっと涙が止まりませんでした。

フッターテンプレート実験中

とりあえずフッターテンプレートにも手を出してみました。
やー色々できてたーのし～
とりあえずなんでもかんでもスクロールバーをつけるのは悪いクセですが、いっぱい表示するならこのほうがいいかなーと…。
フッターテンプレートの挿入位置ってかえれるんだっけ？？調べてなかったなそういえばそのあたり…。（まあコピペすればいんですけど）
これで商品がもっと指定できたらいいんだけどな…検索してテンプレートに当てはめる以外の方法はないのかしら…。
これとこれを表示、って自分で最初に選択できるとイイナとか贅沢をいってみる。
（実はできるのかな？）

アマゾン以外の使い道も模索中。なんかあるかなぁ…。

ザンサイアン(初回限定盤)(DVD付) Cocco ： 2006/06/21 There is Not Elements There is Not Elements

ベスト+裏ベスト+未発表曲集 Cocco ： 2001/09/05 自然 こんなに優しく、激しく、希望に満ち、憂鬱でいて美しい歌を聴いたことがあっただろうか。彼女の声、存在は唯一無二の孤高のモノであり、それらは「人工物」などとは言い切れない。ごく普通に、自然がその姿のまま吐き捨てられたような透明なモノ。それらは、ありとあらゆるアーティストが作ろうとしてもなしえなかったモノ。「芸能界」という、日常から切り離され、圧迫された空間の中で、彼女は彼女自身の持っているモノを、惜しみもなく私たちの胸に届けてくれた。 このアルバムは、今まで出してきたシングルと、彼女によって厳選されたシングルのカップリング及び、アルバム収録曲が集まったものです。初めてCoccoにふれる方、今までCoccoを聴いてきた方にも充実した作品となっているはずです。 ちなみに、彼女がライブツアーの最中に書き下ろした名曲「箱舟」は残念ながらアルバムに入りませんでした。何より残念です。こちらはシングル「羽根」の中に入っていますのでそちらも聴いてみてください。

陽の照りながら雨の降る(初回限定) Cocco ： 2006/05/24 There is Not Elements There is Not Elements

ブーゲンビリア Cocco ： 1997/05/21 Cocco初期の傑作!! ブーゲンビリアはCocco初期の作品としてとてもCoccoらしい味が出ていてなにより傑作だと思う。Cocco独特の身を裂くような歌い方もあり、残酷なやさしさを醸しだした子守唄のような曲もあり、まさに傑作！そしてこれぞCocco!!Coccoの世界を究極に体験したいならブーゲンビリアは欠かせない!!