アメブロでMero Changerを使う

2007年4月28日　2007年4月24日のリニューアルに対応した新版のMero Changerを公開しました。
旧版では、メロウィンドウ内の広告をクリックしたときに、リンク先に飛ばない不具合が確認されています。
旧版をお使いの方は、新版に変更してくださいますようお願いします。

アメブロでは、Blogパーツ等を貼り付ける際には、「フリープラグイン」という機能を使います。
ただ、拙作のMero Changerのソースをそのままフリープラグインに貼り付けて保存しようとすると、「更新に失敗しました。」というメッセージが表示されました。

どうやら、フリープラグインには容量の上限があるようです。
試しに、Mero ChangerのソースをHTML部分とJavaScript部分に分けて、JavaScript部分をファイルから読み込むようにすると、Mero Changerが動作するようになりました。
今日はその方法を紹介します。

ただし、この方法を使うためには、JavaScript部分のファイルを、プロバイダのホームページ用スペースなどにアップロードすることが必要になります。

1.Mero ChangerのJavaScript部分を別ファイルにする

まず、Mero ChangerのソースコードをHTML部分とJavaScript部分に分けます。

Mero Changerのソースは以下のようになっています。
このソースをすべてコピーして、メモ帳等に貼り付けます。
そして、ソースの中の青色の部分を削除します。また、赤色の部分を切り取ってメモ帳等に貼り付け、「merochg.js」というファイル名をつけて保存します。

<!-- Mero Changer 開始 -->

<div id="merowindow" style="text-align : center;">
・
・（途中略）
・
<!-- メロ表示用テーブル終了 -->
</div>

<!-- Mero Changer本体開始 -->
<script language="javascript" type="text/javascript">
<!--
var mero_id = new Array('・・・', '・・・', ・・・);
var mero_mouseout_img = new Array('・・・', '・・・', ・・・);
・
・
・
（途中略）
    mero_random_switch = 0;
}

//-->
</script>
<!-- Mero Changer本体終了 -->

<!-- Mero Changer 終了 -->

2.merochg.jsをアップロードする

次に、1.で作成したmerochg.jsファイルを、ホームページ用スペース等にアップロードします。
なお、アップロードの手順は、個々のプロバイダ等のヘルプをお読みください。

3.HTML部分に1行を追加する

次に、1.で残ったHTMLの部分の最後に、以下の赤色の行を追加します。

<!-- Mero Changer 開始 -->

<div id="merowindow" style="text-align : center;">
・
・（途中略）
・
<!-- メロ表示用テーブル終了 -->
</div>

<script type="text/javascript" src="merochg.jsのURL" charset="Shift_JIS"></script>
<!-- Mero Changer 終了 -->

なお、「merochg.jsのURL」の部分は、merochg.jsのアップロード先のURLに合わせて書き換えます。

4.フリープラグインに貼り付ける

最後に、3.まででできたHTML部分を、アメブロのフリープラグインに貼り付けます。