Blog Parts Changerその2：メロを表示する(3種切り替え表示も可能)

Blog Parts Changerでの切り替え表示第1弾として、メロを設置する手順ご紹介します。

●Blog Parts ChangerのJavaScriptを書き換える
　まず、Blog Parts ChangerのJavaScriptを書き換えます。「// 1つ目のパーツを表示する処理」等の部分を、以下のようなスクリプトに置き換えます。

        parts_html += "<a href=\"http://meropar.jp/\" target=\"blank\"><img src=\"http://meropar.jp/img/logo_blog_1.gif\" border=\"0\" onmouseover=\"this.src='http://meropar.jp/img/logo_blog_2.gif'\" onmouseout=\"this.src='http://meropar.jp/img/logo_blog_1.gif'\" alt=\"ブログペットのメロメロパーク\" /></a>";
        parts_html += "<br /><object codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='140' height='257' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://cache.meropar.jp/swf/blog/main.swf' /><param name='quality' value='high' /><param name='bgcolor' value='ffffff' /><param name='FlashVars' value='petId=○○○' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=○○○' quality='high' bgcolor='#ffffff' width='140' height='257' name='main' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";

「○○○」の部分は、ご自分のメロのIDに合わせて変えます。
メロのIDは、元々のメロ表示用のスクリプトを見れば分かります。スクリプトの最後の方に「・・・meromero.js?id=○○○" ></script>」という部分がありますが、その「○○○」がIDです。
例えば、「・・・meromero.js?id=1234" ></script>」となっていれば、メロのIDは1234です。

●デフォルトのBlogパーツの指定
Blog Parts Changerの最後にある「show_blog_parts(○);」の行を、デフォルトで表示したいBlogパーツの番号に変えます。

●Blogパーツを切り替えるためのリンクを作る
次に、「<div id="blog_parts_changer"></div>」の行の後に、Blogパーツを切り替えるためのリンクとして、以下のようなものを入れます。

<a href="javascript:show_blog_parts(○)">Blogパーツの名前</a>

「○」の部分には、表示したいBlogパーツの番号を入れます。
また、「Blogパーツの名前」の部分には、表示したいパーツの名前を入れます。

●例
以下のような表示にしたいとします。

パーツ番号0　→　IDが1234のメロ
パーツ番号1　→　IDが2345のメロ
パーツ番号2　→　IDが3456のメロ

この場合、Blog Parts ChangerのJavaScriptは以下のようになります。

<script language="javascript" type="text/javascript" charset="UTF-8">
<!--
function show_blog_parts(parts_no)
{
    parts_html = "";
    if (parts_no == -1) {
        parts_html = "<p>ただいま工事中です。</p>\n";
    }
    else if (parts_no == 0) {
        parts_html += "<a href=\"http://meropar.jp/\" target=\"blank\"><img src=\"http://meropar.jp/img/logo_blog_1.gif\" border=\"0\" onmouseover=\"this.src='http://meropar.jp/img/logo_blog_2.gif'\" onmouseout=\"this.src='http://meropar.jp/img/logo_blog_1.gif'\" alt=\"ブログペットのメロメロパーク\" /></a>";
        parts_html += "<br /><object codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='140' height='257' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://cache.meropar.jp/swf/blog/main.swf' /><param name='quality' value='high' /><param name='bgcolor' value='ffffff' /><param name='FlashVars' value='petId=1234' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=1234' quality='high' bgcolor='#ffffff' width='140' height='257' name='main' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";
    }
    else if (parts_no == 1) {
        parts_html += "<a href=\"http://meropar.jp/\" target=\"blank\"><img src=\"http://meropar.jp/img/logo_blog_1.gif\" border=\"0\" onmouseover=\"this.src='http://meropar.jp/img/logo_blog_2.gif'\" onmouseout=\"this.src='http://meropar.jp/img/logo_blog_1.gif'\" alt=\"ブログペットのメロメロパーク\" /></a>";
        parts_html += "<br /><object codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='140' height='257' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://cache.meropar.jp/swf/blog/main.swf' /><param name='quality' value='high' /><param name='bgcolor' value='ffffff' /><param name='FlashVars' value='petId=2345' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=2345' quality='high' bgcolor='#ffffff' width='140' height='257' name='main' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";
    }
    else if (parts_no == 2) {
        parts_html += "<a href=\"http://meropar.jp/\" target=\"blank\"><img src=\"http://meropar.jp/img/logo_blog_1.gif\" border=\"0\" onmouseover=\"this.src='http://meropar.jp/img/logo_blog_2.gif'\" onmouseout=\"this.src='http://meropar.jp/img/logo_blog_1.gif'\" alt=\"ブログペットのメロメロパーク\" /></a>";
        parts_html += "<br /><object codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='140' height='257' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://cache.meropar.jp/swf/blog/main.swf' /><param name='quality' value='high' /><param name='bgcolor' value='ffffff' /><param name='FlashVars' value='petId=3456' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='petId=3456' quality='high' bgcolor='#ffffff' width='140' height='257' name='main' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' /></object>";
    }
    document.getElementById('blog_parts_changer').innerHTML = parts_html;
}
//-->
</script>

また、メロを切り替えるためのリンクは以下のようになります。

<a href="javascript:show_blog_parts(0)">IDが1234のメロの名前</a>
<a href="javascript:show_blog_parts(1)">IDが2345のメロの名前</a>
<a href="javascript:show_blog_parts(2)">IDが3456のメロの名前</a>

お知らせ

Blog Parts Changerその2：メロを表示する(3種切り替え表示も可能)

おすすめ