ホームページ作成便利ツール

アメブロカスタマイズの記事第四十三弾です。
今日は、このアメブロにメールフォームを設置
するために、いろいろと試行錯誤をしていました。

メールフォーム設置と言っても忍者メールフォーム
のようにフォームタグをプラグインに書いてサイド
バーに設置するという方法ではありません。

メッセージボード、そして記事下に独自のメール
フォームを設置する方法です。
いろいろと調べてみましたが、アメブロに対して
このような設置方法について詳しく書かれた情報
ソースは見当たりませんでした。

アメブロはフォームタグを記事やメッセージボード
に設置しようと思っても「form」や「input」タグ
が禁止タグとなっているため、通常の方法では設置
できません。

私が本日試行錯誤して、メールフォーム設置を可能と
する方法を一応確認できたので今回紹介することに
しました。

これを設置できれば、アメーバ会員さん以外の方が
メールフォームからメッセージ送信できるように
なります（アメブロ標準装備のメッセージ、コメント
はアメーバ会員限定という制限がありますので）

但し、注意事項をひとつ。
わたしのブログでは記事に【続きを読む】という
記事折り返しの為の以下のコードを書いております
が、今回紹介する方法を設置すると、【続きを読む】
をクリックしても、以降の記事を開くことができま
せんでした。

<a href="#" class="moreReader" title="tsuduki●●">
続きを読む</a>
<div class="tsuduki●●" style="display:none;">
（注）●●は同一の数字です。

よって、１つの記事を【続きを読む】という形で
折りたたんでいないことが前提です。

これが制限事項ですが、１記事を途中で折りたたんで
なければ、不具合なく設置することが可能です。
以下の画像は実際に設置した際にキャプチャーした
ものです。



また、別のアメブロに実際にメールフォームを記事下に設置
していますので参考にされて下さい。


それでは早速、設置方法を以下紹介します。

手順

【１】メールフォーム用のHTMLコード
以下のコードは例ですので、お自身に合わせたコードを利用下さい。

<FORM action=http://～～～/mailform.cgi method=POST >←cgi or phpのurl記述
<INPUT type="hidden" name="mailto" value="送信先メールアドレス">
<INPUT type="hidden" name="subject" value="メールのタイトル">
<INPUT type="hidden" name="location" value="送信後表示されるURL">
<TABLE border="0"><TR><TD>名前</TD><TD><INPUT name="name"size="30">
</TD></TR>
<TR><TD>メールアドレス</TD><TD><INPUT name="email"size="30"></TD></TR>
<TR><TD>コメント</TD>
<TD><TEXTAREA name="comment"rows="3" cols="30"></TEXTAREA></TD></TR>
</TABLE>
<P><INPUT type="submit" value="送信">
<INPUT type="reset" value="リセット"></P></FORM>


【２】以下の'ここに上記のHTMLコードを記入'
部分に、【１】のコードを記述します。
注意事項としては、改行しないで記述することです。
改行が入っていると、後で設置しても動きません。
動かなかった場合には、記述したHTMLコード中に
改行が入っていないかチェックして下さいね。

function myF() {
var myMe ='ここに上記のHTMLコードを記入'
var myfix = document.getElementsByTagName('div');
for(i = 0; i < myfix.length; i++){
myObj=document.getElementsByTagName('div')[i];
if(myObj.className=='contents'){
myObj.innerHTML += ( '<p class="fix">'+ myMe + '</p>');}}}


【３】上記【２】のコードをサクラエディタ等の
テキストエディタに貼り付けて、文字コードをUTF-8
に設定してJSファイルとして保存します。
名前は、適当で構いません。
例えば「test.js」といった具合で保存します。

【４】上記【３】で作成したJSファイルをサーバー
にアップロードして、そのURLを控えておきます。
（注）アメブロにはアップロードできませんので、
レンタルサーバー（稼働確認しているサーバーは
ハッスルサーバーです）にFFFTPで送信しアップ
ロードすることが必要です。

【５】プラグインへの書き込み
以下を書き込みます。

<script type="text/javascript">
(function() {
var codes = document.body.innerHTML.match
(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>
((.|\n)*)<\/pre>/gi);
if (codes == null) return;
for (var i = 0; i < codes.length; i++) {
eval(codes[i].replace(/<\/pre>/i, "")
.replace(/<pre [\w\s:;"=]*class="?eval"?
[\w\s:;"=]*>/i, ""));
}
})();
</script>

<SCRIPT LANGUAGE="JavaScript"
src="【４】でアップロードしたJSファイルのURL"></script>
<script language="javascript"><!--
window.onload = function(){myF();}
// --></script>


【６】CSSへの書き込み
以下をCSSの最後に書き込みます。

/*メールフォーム設置*/
#message .fix{
display:none;
}
.entry .fix{
padding:50px 0 0 0;
text-align:center;
}

（注）/*メールフォーム設置*/は書いても
書かなくてもいずれでも構いません。
/*～*/はコメントとして後で何の記述で
あったかがわかるようにしているだけです。
が、書かれておくことをオススメします。


以上で設置は完了です。
アメブロを開いて、メッセージボード及び記事下
にメールフォームが表示されていることを確認
して下さい。

• 
• 
• ツイート