アメブロで新Mero Changerを使う

アメブロでは、ブログパーツ等の任意のHTMLを貼り付ける際には、「フリープラグイン」という機能を使います。

ただ、フリープラグインでは文字数に制限があります(最大で半角3,800文字)。
そのため、新Mero Changerのソースコードをそのまま貼り付けることができません。
アメブロで新Mero Changerを使う場合、Mero Changerのコードのうち、JavaScriptの部分を別ファイルから読み込むような形にする必要があります。

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

1.Mero ChangerのコードをHTMLとJavaScriptに分ける

Mero Changerコード作成ツールでMero Changerのコードを作ったら、そのコードをメモ帳等に貼り付け、HTMLの部分とJavaScriptの部分に分けます。

Mero Changerのコードは以下のようになっています。
このコードのうち、赤字がJavaScriptの部分で、残りがHTMLの部分です。

<!-- Mero Changer開始 -->
<!-- Mero表示テーブル開始 -->
<div style="text-align : center;">
・
・(途中略)
・
<!-- Mero表示テーブル終了 -->

<!-- Mero Changer JavaScript開始 -->
<script type="text/javascript">
//<![CDATA[
MeroChanger = function() {
・
・(途中略)
・
merochg_obj = new MeroChanger();
merochg_obj.show(0);
//]]>
</script>
<!-- Mero Changer JavaScript終了 -->
<!-- Mero Changer終了 -->

JavaScript部分のコードを切り取り、メモ帳をもう1つ起動して、そちらに貼り付けます。

2.JavaScript部分をアップロードする

次に、1.で作ったJavaScript部分を、プロバイダのホームページ用スペース等にアップロードします。

まず、JavaScript部分のうち、以下の赤字の部分を削除します。
そして、残りの部分を「merochg.js」というファイル名で保存します。

<!-- Mero Changer JavaScript開始 -->
<script type="text/javascript">
//<![CDATA[
MeroChanger = function() {
    this.init();
};
・
・(途中略)
・
merochg_obj = new MeroChanger();
merochg_obj.show(0);
//]]>
</script>
<!-- Mero Changer JavaScript終了 -->

ファイルを保存したら、プロバイダのホームページ用スペース等に、そのファイルをアップロードします。
なお、アップロード手順の詳細については、個々のプロバイダのヘルプ等を参照してください。

3.HTML部分をフリープラグインに貼り付ける

次に、HTML部分をフリープラグインに貼り付けます。

1.の手順でMero ChangerのコードをHTML部分とJavaScript部分に分けましたが、HTML部分のコードをコピーします。
そして、アメブロにログインし、フリープラグインの設定を開いて、HTML部分のコードを貼り付けます。

↓HTML部分のコードを貼り付けたところ
HTML部分のコードを貼り付けたところ

そして、HTML部分の最後の「<!-- Mero Changer終了 -->」の行の前に、以下の行を挿入します。

<script type="text/javascript" src="merochg.jsのアドレス"></script>

例えば、merochg.jsのアドレスが「http://www.provider.ne.jp/~someuser/merochg.js」になるようにアップロードした場合だと、以下のような行を挿入します。

<script type="text/javascript" src="http://www.provider.ne.jp/~someuser/merochg.js"></script>

↓scriptタグを追加したところ
scriptタグを追加したところ

4.表示の確認

最後に、「設定」のボタンをクリックして、フリープラグインの設定を保存します。
そして、ご自分のブログを表示して、Mero Changerが動作することを確認します。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください