BlogPetのランダム表示JavaScript(改良版)

2005年6月17日　改良版をアップしました

先日ご紹介した「BlogPetのランダム表示JavaScript」を改良しました。改良点は以下の通りです。

  • ページに接続するときだけでなく、ページ表示中にも一定時間ごとにBlogPetをランダムに切り替えて表示することができます。
  • 前後のペットへのリンクや、見たいペットをすぐに表示するためのリンクを作ることができます。

機能が増えた分、最初のバージョンと比べると導入の手順がやや複雑になりました。以下の通りです。

手順1

こちらのページを開き、表示されたスクリプトをすべてコピーして、メモ帳等に貼り付けてください。
なお、Webブラウザの「ファイルに保存」の機能は使わないでください（余計なタグ等が入ってしまいますので）。

手順2

スクリプトの1行目にある「charset="UTF-8"」の部分を、ご自分のWebページの文字コードに合わせて変えます。文字コードは、元々の貼り付け用JavaScriptを見れば分かります。
例えば、元々のJavaScriptが以下のようになっている場合だと、「charset="EUC-JP"」に変えれば良いことになります。 

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/1234567890abcdef1234567890abcdef.js" charset="EUC-JP"></script>

手順3

スクリプトの3行目に「1匹目のID」などの部分がありますが、それらを各BlogPetのIDに書き換えます。
BlogPetのIDは、元々のBlogPet貼り付け用JavaScriptにある32桁の英数字です。
JavaScriptを見ると「src="http://www.blogpet.net/js/○○○○.js"」というような部分がありますが、この中の「○○○○」がIDです。

例えば、元々のJavaScriptが以下のようになっている場合だと、「1234567890abcdef1234567890abcdef」がIDにあたります。 

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/1234567890abcdef1234567890abcdef.js" charset="UTF-8"></script>

手順4

スクリプトの4行目にある「var interval = 20000;」の部分で、ページ表示中のランダム表示の間隔を指定します。単位は1000分の1秒です。
例えば、30秒おきにランダム表示するようにするには、「var interval = 30000;」とします。
なお、「var interval = 0;」とすると、ページ表示中にはランダム表示しなくなります。

手順5

元々のBlogPetのJavaScriptを削除して、ここまでで作ったJavaScriptを貼り付けます。

手順6

BlogPetを表示したい位置に、以下のHTMLを入れます。
ただし、先程のJavaScriptより前に入れる必要があります。 

<div id="blogpet"></div>

手順7

前後のペットへのリンクを表示したい場合は、表示先の位置に以下のHTMLを入れます。
「前のペット」「次のペット」の部分は、ご自分でお好きな文章に変えることができます。

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

手順8

特定のペットへのリンクを表示したい場合は、表示先の位置に以下のHTMLを入れます。
「1匹目のペットの名前」等の部分は、ご自分でお好きな文章に変えることができます。

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

追加（2月19日20時2分）

スクリプトを一部追加しました。スクリプトのページで赤字で表示される部分を追加しました。
おそらく、これで留守番画像が表示できるようになると思います。

追加（2月21日12時44分）

レンタルBlogをお使いの場合、「任意のHTMLを追加する」というような機能を利用して、このJavaScriptを貼り付けられることが多いかと思います。
その際、その機能に「改行を<BR>タグに変換する」というようなオプションがある場合は、そのオプションはオフにしてください。