喜怒哀楽

①まずは、
BlogPetでは、5種類のペットたちを登録して
そのIDをメモしておきましょう。

IDとは、BlogPetコントロールパネルのこの部分です。

②５種類のペットIDをメモしたら

The blog of H.Fujimoto様からスクリプトをいただきまして
メモ帳などへコピペして編集します。

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

赤字の部分にさきほど控えたIDをそれぞれ入れていきます。

③今までサイドバーに貼り付けていた
BlogPet表示スクリプトと、今編集したスクリプト全てと
張替えます。

これまでの作業でランダムに表示はしてくれます。

私は、このスクリプトをTeraPatで編集してblogpet.jsとしてエンコードUTF-8で保存して鯖にアップ。
ソースを見やすく編集しました。
（エンコードはご自分のブログに合わせます。）

※保存の際、表示されるスクリプトの最初と最後のこの部分は削除します。

<script language="JavaScript" type="text/javascript" charset="UTF-8">
<!--

---

//-->
</script>

BlogPet表示部分は、こんな感じになります。

<div id="blogpet"></div>
<script language="JavaScript" type="text/javascript" src="blogpet.js" charset="UTF-8"></script>

④さらに、複数のペットを個々に表示させたい時、続いてこんな風なHTMLを書きます（うちの場合）。

<a href="javascript:select_pet(0);">兎</a>:<a href="javascript:select_pet(1);">猫</a>:<a href="javascript:select_pet(2);">パンダ</a>:<a href="javascript:select_pet(3);">犬</a>:<a href="javascript:select_pet(4);">鼠</a><br /><br />

文字ではなく、画像も使うことができますね。

<a href="javascript:select_pet(0);"><img src="画像URL" border="0"></a>

⑤さらにお留守番背景をさせたい場合はBlogPetの表示部分を以下のようにテーブルで囲みます。
赤字はBlogPetを表示させる部分ですね。

<table border=0 cellspacing=0 cellpadding=0 width=127 height=196 background="留守番背景URL"><tr><td id="blogpet"></td></tr></table>
<script language="JavaScript" type="text/javascript" src="blogpet.jsのURL" charset="UTF-8"></script>

※お留守番背景の表示方法は、以下を参考にしています。

「KOROPPYの本棚」様：「こうさぎサーバダウン時に留守番背景を表示する」と「全てのBlogPetをサイドバーでランダム表示」/* TB先 */

これに続いて④の個別表示ボタンを記述します。

作業は以上でおしまいです。

これで5種類のBlogPetは
あなたのものですね♪

これであなたのBlogPetライフは、Perfectですね♪

/* その他のTB先 */
こうさぎTBP