Blog Parts Changer Light for メロ（新メロコード対応版）を新規に設置する手順

2005年12月3日　メロの世代交代等に対応させたMero Changerを公開しました。

2005年10月14日　「mayumayu's room お気楽Blog☆」で配布されている「ストラップ」の切り替えに対応したMero Changerをリリースしました。

2005年9月29日　スクリプト自動出力機能を搭載した「Mero Changer」をリリースしました。
JavaScriptを手動で書き換える必要がなくなり、設置が簡単になりましたので、こちらをお使いください。

2005年8月27日　 Flashタブ対応版をリリースしました。

2005年8月17日　アイテムリスト対応版を公開しました。

メロの表示コード（メロコード）が変更になり、昨日のエントリーの通り、「Blog Parts Changer Light for メロ」も新コードに対応させました。
昨日はバージョンアップの手順を紹介しましたが、今日は新規に導入する際の手順を紹介します。

1.divタグを入れる

メロを表示する先のテンプレートを開き、メロを表示する位置（元々のメロコードを入れている位置）に、以下のタグを入れてください。

<div id="bpcl_mero"></div>

また、元々のメロコードは削除してください。

2.JavaScriptのダウンロード

こちらのページに接続してJavaScriptを表示し、内容をすべてコピーして、メモ帳等に貼り付けてください。

3.メロのkeyの設定

手順2.のJavaScriptの中で、3行目の「var mero_id = new Array('1つ目のkey', '2つ目のkey', '3つ目のkey');」の「1つ目のkey」「2つ目のkey」「3つ目のkey」を、メロの「key」に書き換えてください。
keyは、元々のメロ貼り付けスクリプトを見れば分かります。
スクリプトの最後の方に「・・・?key=○○○"></script>」という部分がありますが、「○○○」の部分（32文字の英数字）をコピーします。

例えば、それぞれのメロのkeyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」「c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3」の方の場合だと、以下のようにします。

var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2', 'c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3c3');

また、メロを2種類だけ切り替える場合は、「, '3つ目のkey'」の部分を削除してください。
例えば、keyが「a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1」「b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2」の2つのメロを切り替え表示したい場合は、この行を以下のように書きます。

var mero_id = new Array('a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1a1', 'b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2b2');

4.タブの差し替え

メロのタブを自分の好きなものに変えたい場合は、スクリプトの4行目と5行目を書き換えます。

・4行目「var mero_mouseout_img = new Array(・・・);」
・5行目「var mero_mouseover_img = new Array(・・・);」

4行目には、タブをマウスで指していないときの画像のURLを指定します。
また、5行目には、、タブをマウスで指しているときの画像のURLを指定します。
それぞれURLを入れるところが3つありますが、１つ目～3つ目のそれぞれのメロに対応しています。

5.ランダム表示の設定

メロをランダムに表示させたい場合は、以下の2箇所を設定します。

・7行目「var mero_first_no = -1;」
ページを開いたときに、最初に表示するメロを指定します。
このまま変更しないと、ページを開くたびにメロがランダムに選ばれて表示されます。
ランダムではなく、常に1つ目のメロを表示する場合は、最後の「-1」を「0」に変えてください。
また、2つ目のメロなら「1」、3つ目のメロなら「2」に変えてください。

・8行目「var mero_interval = 30000;」
ページを開いている間にも、メロをランダムに切り替えて表示するかどうかを指定します。
このまま変更しないと、30秒ごとに切り替え表示します。
「30000」のところを変えると、切り替えの間隔が変わります（1000分の1秒単位です）。
例えば、1分（60秒）おきに切り替え表示するなら、ここを「60000」に変えます。
また、ここを「0」にすると、ページ表示中のランダム表示は行いません。

6.JavaScriptの貼り付け

手順1.のdivタグの後に、ここまでで設定したJavaScriptを貼り付けてください。

7.メロ切り替えリンクの貼り付け

手順6.のJavaScriptの後に、メロを切り替えるためのリンクとして、以下を貼り付けてください。
「1つ目のメロの名前」等の部分は、ご自分のメロに合わせて変えていただくことができます。

<a href="#" onclick="show_mero_main(0); return false;">1つ目のメロの名前</a>
<a href="#" onclick="show_mero_main(1); return false;">2つ目のメロの名前</a>
<a href="#" onclick="show_mero_main(2); return false;">3つ目のメロの名前</a>

8.ランダム表示オン／オフ切り替えチェックボックスの貼り付け

ページ表示中にメロをランダム切り替え表示するようにすると、コメントの入力に支障が出ることがあります。
その場合は、ランダム表示のオン／オフを切り替えられるように、チェックボックスをつけておくことをお勧めします。
手順7.のリンクの下のあたりに、以下のHTMLを追加してください。

<form name="bpcl_mero_random">
<p><input type="checkbox" checked name="random" onClick="if (document.bpcl_mero_random.random.checked) { mero_random_on(); } else { mero_random_off(); }"
>ランダム表示</p>
</form>

なお、Movable Typeなどのように、テンプレートを自由に編集できる場合は、チェックボックスを使わずに、コメント入力フォームのあるテンプレート（通常は個別アーカイブテンプレート）では、ランダム表示を無条件にオフにする方が良いでしょう。
対象のテンプレートを開き、手順6.のJavaScriptの後に、以下のJavaScriptを入れます。

<script language="javascript" type="text/javascript">
<!--
mero_random_off();
//-->
</script>

9.クレジットバナーの貼り付け

「Blog Parts Changer Light for メロ」のクレジットバナーを作っていただきました。
ご自分のBlogに、クレジットバナーを貼り付けていただければ幸いです。
貼り付け方はこちらを参照してください。

10.注意事項

設置の際には以下の点にご注意ください。

・改行の自動変換をオフにする
レンタルBlogでは、「自由なHTMLを追加する」といった機能を使って設置することになります。
その際、「改行を自動的にbrタグに変換する」というような設定項目があったら、それはオフにしてください。

・Macをお使いの方
上記の2.の手順でJavaScriptをダウンロードする際には、Safariは使わないでください（文字化けが起こるため）。
FireFox等の他のWebブラウザをお使いください。

お知らせ