アメブロのトップページとそれ以外で異なるフォームを表示する

前回の記事で、アメブロの全てのページにフォーム等の任意のHTMLを表示させるための手順を書きました。

アメブロの全ページにフォームを表示する方法

今回は、トップページとそれ以外で別々の内容を表示する方法をご紹介いたします。

方法としては、前回作成した form_js.php というファイルの中身を以下のように修正します。

<?php
$arr_search = array(“\n”,”‘”);
$arr_replace = array(“”,”\'”);
$target_file_top = “./msgbrd_top.html”; // トップページ用ファイル
$content_top = str_replace($arr_search,$arr_replace,file_get_contents($target_file_top));
$target_file_each = “./msgbrd_each.html”; // 個別ページ用ファイル
$content_each = str_replace(“\n”,””,file_get_contents($target_file_each));
?>function displayForm() {
var thisContent;
if(location.href.indexOf(“.html”)>0) {
thisContent ='<?php echo $content_each; ?>’;
} else {
thisContent ='<?php echo $content_top; ?>’;
}
var targetTag = document.getElementsByTagName(‘div’);
for(i = 0; i < targetTag.length; i++){
thisObject=document.getElementsByTagName(‘div’)[i];
if(thisObject.className==’skinMainArea2′){
thisObject.innerHTML = ( ‘<p class=”form_js”>’+ thisContent + ‘</p>’)+thisObject.innerHTML;}}}

ざっくり日本語で説明すると、「現在のURLに「”.html”」に一致する部分がある場合はmsgbrd_each.html の内容を、ない場合は msgbrd_each.html の内容を表示するよ」といった感じです。

アメブロはトップページで index.html を使用していないようなのでこういった条件分岐をしてみました。

また他のニーズがあったら試してみたいと思います。

なお、自分のブログでも今回の方法で実装してみました。