Blog Parts Changer Ver.2(その4)：メロ表示用モジュール

Blog Parts Changer Ver.2ではさまざまなBlogパーツを切り替えて表示することができますが、今回はメロ表示用モジュールを紹介します。

なお、メロだけを切り替えられれば良いという方は、メロ切り替え専用の「Blog Parts Changer Light for メロ」をお使いください。

メロ表示用モジュールの設置手順は、以下のようになります。

●1.モジュールのコピー
まず、以下のソースコードをコピーしてください。
赤字の部分は、後で修正する箇所です。

var bpc2_mero_ids = Array('1つ目のkey', '2つ目のkey' , '3つ目のkey');
var bpc2_mero_mouseout_img = Array('http://meropar.jp/img/logo_blog_1.gif', 'http://meropar.jp/img/logo_blog_1.gif', 'http://meropar.jp/img/logo_blog_1.gif');
var bpc2_mero_mouseover_img = Array('http://meropar.jp/img/logo_blog_2.gif', 'http://meropar.jp/img/logo_blog_2.gif', 'http://meropar.jp/img/logo_blog_2.gif');

function bpc2_show_mero(id)
{
    html = "<a href=\"http://meropar.jp/\" target=\"_blank\"><img src=\"" + bpc2_mero_mouseout_img[id] + "\" border=\"0\" style=\"border: none;\" onmouseover=\"this.src='" + bpc2_mero_mouseover_img[id] + "'\" onmouseout=\"this.src='" + bpc2_mero_mouseout_img[id] + "'\" alt=\"メロメロパーク\" /></a>";
    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='key=" + bpc2_mero_ids[id] + "' /><embed src='http://cache.meropar.jp/swf/blog/main.swf' FlashVars='key=" + bpc2_mero_ids[id] + "' 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>";
    return html;
}

●2.メロのkeyの設定
1.のコードの1行目に「var bpc2_mero_ids = Array('1つ目のkey', '2つ目のkey' , '3つ目のkey');」の行があります。
この「1つ目のkey」などの部分を、それぞれのメロのkeyに置き換えます。

メロのkeyは、本来のメロ表示用コード（メロコード）を見れば分かります。
コードの最後の方に「・・・meromero.js?key=○○○" <>/script>」の部分がありますが、「○○○」（32文字の英数字）がIDです。

●3.タブ画像の指定
メロのタブ画像を指定することもできます。
2行目の「var bpc2_mero_mouseout_img = Array(・・・);」では、通常表示時のタブ画像のURLを指定します。
また、3行目の「var bpc2_mero_mouseover_img = Array(・・・);」では、タブ部分にマウスポインタを合わせているときの画像のURLを指定します。
いずれも3つのURLを指定することができますが、それぞれが1つ目／2つ目／3つめのメロに対応します。
なお、URLを変えない場合は、メロメロパーク標準のタブ画像が表示されます。

●4.モジュールの組み込み
ここまででできたモジュールを、Blog Parts Changer Ver.2本体に組み込みます。
Blog Parts Changer本体のソースコードの中で、先頭の方の「// Blogパーツ表示用モジュールを入れる部分（ここから）」と「// Blogパーツ表示用モジュールを入れる部分（ここまで）」の間に、モジュールを貼り付けてください。

●5.テンプレートへの組み込み
ここまででできたものを、Blogのテンプレートに組み込みます。
組み込みの手順は、こちらのエントリーを参照してください。