chocolat* BLOG

BlogPetが「ふじこ」と「みちる」の2匹に増えたので、The blog of H.Fujimoto さまの「BlogPetのランダム表示JavaScript(改良版)」＆「BlogPetのランダム表示JavaScript(アクセスログ集中化対応版)」と、KOROPPYの本棚さまの「全てのBlogPetをサイドバーでランダム表示」＆「ランダム表示スクリプトにてデフォルトのBlogPetを指定する」を参考に、FC2ブログ用に手を加えてみました。
とはいっても、殆ど何もしてないのと同じですが･･･；

複数のBlogPetを飼った場合、全てのペットをサイドバーに表示すると、長くなるだけでなく、どうしてもサーバーが重くなってしまいます；
それを解消してくれる優れもののスクリプトがこれ!
特定のペットを指定表示するリンクも付いているし、デフォルトで表示するペットを指定することも出来ちゃいますv

サンプルは、当ブログサイドメニュー部の「Blog Pet」を見てください。
デフォルトでは「ふじこ」が表示され、ペット名をクリックすることで「ふじこ」と「みちる」の表示を切り替えることができます。 STEP1 ：スクリプトの準備
【 1. 専用のスクリプトをコピー＆ペースト】
まず、The blog of H.Fujimoto さまの「BlogPetのランダム表示JavaScript(改良版)」のページより JavaScript をコピーします。
次に、メモ帳などのテキストエディタを開いて新規作成で、先ほどコピーしたものを貼り付けます。

【 2. 不必要な部分を削除】
メモ帳に貼り付けたら、以下の部分の最初の2行と最後の2行を削除します。

//-->
</script>

【 3. ペットの各IDを記載】
スクリプト上部にある以下の部分

var idarray = new Array("1匹目のID", "2匹目のID", "3匹目のID", "4匹目のID", "5匹目のID");

に、自分の飼っているペットのID（32桁の半角英数字）を記述します。
このIDは、BlogPetのコントロールパネル内にあるコード生成の「http://www.blogpet.net/js/abc123def456ghi789jklmn0123opqr4.js」というURLのピンク部分がペットのIDになります。
ペットが2匹だけの場合は、「, "3匹目のID", "4匹目のID", "5匹目のID"」という部分を削除すればOKです。

【 4. ランダムに表示する間隔を指定】
スクリプト上部にある以下の部分

var interval = 60000;

の 60000 は、ページ表示中も60秒ごとにペットの表示が切り替わるという設定になります。
ページ表示中はペットを切り替えたくないという場合は、var interval = 0; とします。
※ ちなみに結依さんは、ページ表示中に切り替わると重くなったりコメント表示が不便なので、切り替えなしに設定しています。

【 5. デフォルトで表示するペットを指定】
スクリプト上部にある以下の部分

var default_pet = 0;

の 0 は、最初のペットをデフォルトで表示するという設定になります。
つまり1番目のペットを表示するには「0」、2番目のペットは「1」、3番目のペットは「2」、4番目のペットは「3」、5番目のペットは「4」という風になります。
もしデフォルトの機能を使用しない場合は「var default_pet = -1;」とします。

【 6. スクリプトの保存】
上記の1?5まで設定が終わったら、スクリプトを「名前をつけて保存」します。
保存するときは、半角英数字でJavaScriptとして保存しましょう。
※ 結依さんは「blogpet.js」として保存しました。

【 7. スクリプトのアップロード】
FC2ブログの管理者ページ左側にある「ファイルのアップロード」から、先ほど保存したスクリプトをアップします。

STEP2 ：呼び出し用タグを記述
ブログのHTMLを開き、表示させたい部分に以下を記述します。

結依さんは留守番背景画像にうさぎーず小劇場さまの「こうさぎ背景番外・留守番画像」からお借りしています<(_ _)>

STEP3 ：ペット切り替え用リンクを記述
ブログのHTMLに、以下のタグを上記の STEP2 で記述したペット呼び出しテーブルタグのすぐ下に記述します。

<a href="javascript:select_pet(0);">1匹目のペット名</a> /
<a href="javascript:select_pet(1);">2匹目のペット名</a> /
<a href="javascript:select_pet(2);">3匹目のペット名</a> /
<a href="javascript:select_pet(3);">4匹目のペット名</a> /
<a href="javascript:select_pet(4);">5匹目のペット名</a>

切り替えを「前のペット」「次のペット」という風にする場合は、以下のタグを記述します。

<a href="javascript:prev_pet();">前のペット</a>
<a href="javascript:next_pet();">次のペット</a>

STEP4 ：ペット切り替え用スクリプトを挿入
STEP3 で付け加えた切り替え用リンクタグの下に、以下のようなスクリプト呼び出し記述を加えてあげます。

以上で設定は終わりです。

chocolat*BLOGで配布しているテンプレートは、大抵サイドメニュー部は次のように設定してあります。

<div class="side_title">サイドメニュータイトル</div>
<div class="side_text">サイドメニューコンテンツ</div>

上記を参考にして、HTMLの記述例をあえて書くと、次のようになります。

<div class="side_title">Blog Pet</div>
<div class="side_text">
<table border="0" cellspacing="0" cellpadding="0" width="127" height="196" background="留守番背景画像URL">
<tr><td id="blogpet"></td></tr>
</table>
<a href="javascript:select_pet(0);">1匹目のペット名</a> /
<a href="javascript:select_pet(1);">2匹目のペット名</a> /
<a href="javascript:select_pet(2);">3匹目のペット名</a> /
<a href="javascript:select_pet(3);">4匹目のペット名</a> /
<a href="javascript:select_pet(4);">5匹目のペット名</a>
<script language="JavaScript" type="text/javascript" src="STEP1でアップロードしたスクリプトのURL" charset="EUC-JP"></script>
</div>
※ ピンクの文字部分はご自分のに合わせて変更してください

デフォルトで表示するペットを指定することで、アクセスログを一括管理することが出来るので、とても便利です。