マクパペット切り替え表示専用の「Blog Parts Changer Light for マクパペット」

Blog Parts Changer Lightの第2弾として、マクパペット切り替え専用のものを作ってみました。 メロ専用版と同様に、ランダム表示機能があります。

1.divタグを入れる

マクパペットを表示する先のテンプレートを開き、表示したい位置に、以下のタグを入れてください。

<div id="bpcl_maku"></div>

2.JavaScriptのダウンロード

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

3.JavaScriptの書き換え

2.のJavaScriptの中で、以下の3箇所を書き換えてください。

・3行目「var maku_param = new Array("1つ目のコード", "2つ目のコード", "3つ目のコード");」
「1つ目のコード」等の部分を、マクパペットを表示するためのコードに書き換えてください。
コードは、元々のマクパペット貼り付けスクリプトを見れば分かります。
スクリプトの中に「・・・http://maku.jp/maku.php?p=○○○○○></script>」のような部分がありますが、「p=○○○○○」がIDです。
マクパペットの数を増減させる場合は、「,"3つ目のコード"」等の部分を増減させてください。

なお、maku dresserでコードを作った場合で、そこのオリジナルのアクセサリを使っている場合は、コードに「&base=http%3a%2f%2fwww%2ebb%2eisas%2ene%2ejp%2fbeltram%2fmaku%2f」を追加してください。

書き換えの例をあげると、以下のようになります。

var maku_param = new Array(
    "p=KHN0Uhgiw0dJNYvMHFF9xA1RQti2ZsDE",
    "p=eQZ8C9-gR-Py5UQBBOmPXjRWhzwi&base=http%3a%2f%2fwww%2ebb%2eisas%2ene%2ejp%2fbeltram%2fmaku%2f",
    "p=UAEoz1akdWd58XZcP7yv9FtY3DGCMBM1OKRNNr1FG&base=http%3a%2f%2fwww%2ebb%2eisas%2ene%2ejp%2fbeltram%2fmaku%2f");

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

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

4.JavaScriptの貼り付け

1.のdivタグの後に、3のJavaScriptを貼り付けてください。

5.マクパペット切り替えリンクの貼り付け

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

<a href="javascript:show_maku_main(0);">1つ目のマクパペットの名前</a>
<a href="javascript:show_maku_main(1);">2つ目のマクパペットの名前</a>
<a href="javascript:show_maku_main(2);">3つ目のマクパペットの名前</a>

6.ランダム表示オン/オフ切り替えチェックボックスの設置

ページ表示中にもマクパペットを切り替えて表示するようにした場合、コメントの入力中にマクパペットが切り替わると、コメント入力が途切れるという問題が出ることがあります。
コメント入力欄をクリックすれば入力を続けることができますが、一時的にランダム表示をオフにするようにこともできます。
5.の手順の中に、マクパペットを切り替えるリンクを作る箇所があります。そのリンクの下のあたりに、以下のHTMLを追加してください。

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

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

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

7.注意事項

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

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

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

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