BlogPet更新ボタンを簡単に設置しましょう。

　06/12/28のBlogPetのリニューアルで、楽しくて便利な機能が追加されましたね。それにあわせて、便利な機能のうち、「お気に入りの登録」ができないため、右サイドのBlogPetの更新ボタンをJavaScript化しました。そして、簡単に貼付けできるようにしました。
　変更に至った詳しい経緯については、追記に書かせていただきました。興味のある方はそちらもご覧ください。m(_ _)m

06/12/30 16：00追記

　この記事の更新ボタンはあくまで記事全体を更新することなく、BlogPetだけを更新するためのものです。この更新ボタンでBlogPetの背景の表示を切り替えするには、CGIによるランダム表示が設定されていることが前提となっています。
ランダム背景表示の設定方法はコチラ↓
CGIを使ってBlogPetの背景をランダムに変更する！（isweb編）

　この更新ボタンの変更は、のんびり前進じたばた生活のまゆびさんの記事緊急　BlogPet更新ボタンJavaScriptバージョン　リニューアルにより変更!!を参考にさせていただきました。まゆびさんいつも本当にありがとーございまっす♪　m(_ _)m

1. 更新ボタン用の画像を用意してください。1キロバイトの素材屋さんから、をダウンロードさせていただきました。この素材はGIF形式です
   そして、画像を自分のブログにアップロードして、画像URL、幅(width)、高さ(height)を控えておきます。なお、widthとheightは、パソコンに保存している画像にマウスカーソルをあてると『大きさ　☆×△』と表示されます。☆がwidthで△がheightですよ。
2. 下のソースコードのこの色の部分を変更して、BlogPetを設置したい場所に貼り付ければOKです。変更点は以下の５点です。
   
   1. 画像URL
   2. 画像の幅
   3. 画像の高さ
   4. ←これは見本です。ご自分でここの文章を変更してください。
   5. 自分のペットのID
   
   自分のペットのIDは、『オーナープロフィール』ボタンをクリックして表示されるページのURLのidのことです。
   　http://www.blogpet.net/profile.php?id=自分のペットのID
   　また、BlogPetをセンタリングさせたい人はこの色の部分(最初と最後の２箇所あります。)も含めて貼り付けてくださいね♪なお、このコードは、申し訳ありませんが、1つのブログに1つしか設置できないようになっています。
   

   無料会員用

   <div style="text-align:center;margin-left:auto; margin-right:auto; width:130px;"><table summary="クリックするとBlogPetが更新されます。"><tr><td style="vertical-align:middle;"><a href="javascript:select_pet(0);"><img src="画像URL" alt="クリック" width="画像の幅" height="画像の高さ" style="border-style:none;" /></a></td><td style="vertical-align:middle;"><span style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。</span></td></tr></table>
   <table summary="BlogPetのスクリプトです。" cellspacing="0" cellpadding="0" style="width:130px; height:320px; border-style:none;"><tr><td id="blogpet"><script type="text/javascript">
   <!--
   // blogpet
   var idarray = new Array("自分のペットのID");
   var interval = 0;
   var id, num, oldnum, timer_id;
   oldnum = -1;
   random_pet();
   if (interval > 0) {
   timer_id = setInterval('random_pet()', interval);
   }
   function random_pet()
   {
   do {
   num = Math.floor(Math.random() * idarray.length);
   } while (num == oldnum)
   oldnum = num;
   show_pet();
   }
   function select_pet(pet_no)
   {
   num = pet_no;
   if (interval > 0) {
   clearInterval(timer_id);
   timer_id = setInterval('random_pet()', interval);
   }
   show_pet();
   }
   function show_pet()
   {
   var today=new Date();
   var tseconds=today.getSeconds();
   var id = idarray[num];
   pethtml = "<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='320' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usan.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /><embed src='http://www.blogpet.net/usan.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='320' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /></object>
   ";
   pethtml += "<img src='http://www.blogpet.net/add_log.php?username="+id+"&url="+document.URL+"&referrer="+document.referrer+"'>";
   document.getElementById('blogpet').innerHTML = pethtml;
   }
   --></script></td></tr></table></div>
   
   

   POC用

   <div style="text-align:center;margin-left:auto; margin-right:auto; width:130px;"><table summary="クリックするとBlogPetが更新されます。"><tr><td style="vertical-align:middle;"><a href="javascript:select_pet(0);"><img src="画像URL" alt="クリック" width="画像の幅" height="画像の高さ" style="border-style:none;" /></a></td><td style="vertical-align:middle;"><span style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。</span></td></tr></table>
   <table summary="BlogPetのスクリプトです。" cellspacing="0" cellpadding="0" style="width:130px; height:220px; border-style:none;"><tr><td id="blogpet"><script type="text/javascript">
   <!--
   // blogpet
   var idarray = new Array("自分のペットのID");
   var interval = 0;
   var id, num, oldnum, timer_id;
   oldnum = -1;
   random_pet();
   if (interval > 0) {
   timer_id = setInterval('random_pet()', interval);
   }
   function random_pet()
   {
   do {
   num = Math.floor(Math.random() * idarray.length);
   } while (num == oldnum)
   oldnum = num;
   show_pet();
   }
   function select_pet(pet_no)
   {
   num = pet_no;
   if (interval > 0) {
   clearInterval(timer_id);
   timer_id = setInterval('random_pet()', interval);
   }
   show_pet();
   }
   function show_pet()
   {
   var today=new Date();
   var tseconds=today.getSeconds();
   var id = idarray[num];
   pethtml = "<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='220' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usap.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /><embed src='http://www.blogpet.net/usap.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='220' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username="+id+"&blogpet_domain=www.blogpet.net/&selfurl="+encodeURIComponent(document.URL)+"' /></object>
   ";
   pethtml += "<img src='http://www.blogpet.net/add_log.php?username="+id+"&url="+document.URL+"&referrer="+document.referrer+"'>";
   document.getElementById('blogpet').innerHTML = pethtml;
   }
   --></script></td></tr></table></div>

• yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、自己責任で行ってください。このコードによって起こったいかなる損害に対してもyozoには責任は無いものとさせていただきます。
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

【BlogPet更新ボタンを簡単に設置しましょう。の続きを開く】

　BlogPet背景変更ボタンの作成と留守番背景の設置にありますように、更新ボタンは、iframeタグを使用して、別のホームページ上に設置したBlogPetを、ここのブログに表示させていたのですが、この仕様だと、06/12/28のBlogPetのリニューアルによって、不具合が発生することがわかりました。リニューアルによって、追加された機能の一つに、「お気に入りの登録・閲覧」というボタンがあります。閲覧するには全く問題ないのですが、「お気に入りの登録」をすると、表示されているここのブログの記事でなく、iframeの呼び込み先が登録されてしまうという問題が起こるようになりました。このままだと、BlogPetがせっかく用意してくれた便利な機能がムダになりますし、何よりもそのことを知らずに「お気に入りの登録」をしてくださった方に迷惑をかけてしまうことになりかねませんので、iframeタグ仕様の更新ボタンをJavaScript仕様に変更することにさせていただきました。

　なお、ここのBlogPetのJavaScriptは外部ファイル化しておりますが、この記事では、外部ファイル化はしておりません。外部ファイルでの更新ボタン設置をご希望の方は、のんびり前進じたばた生活のまゆびさんの記事緊急　BlogPet更新ボタンJavaScriptバージョン　リニューアルにより変更!!を参考にしてください。

↓　ぽちっと応援お願いします♪ m(_ _)m

【BlogPet更新ボタンを簡単に設置しましょう。の続きを閉じる】

BlogPet背景変更ボタンの作成と留守番背景の設置

06/12/29 お知らせ

　06/12/28のBlogPetのリニューアルによって、この記事のように、iframeタグを使った更新ボタンを使用すると、一部の機能に不具合が発生することがわかりました。BlogPetの仕様変更に準拠するため、新しく更新ボタンの設定の方法を記事にしてあります。この記事を参考にされたみなさんにはお手数かけますが、更新ボタンを変更していただけますようにお願いします。記事はコチラ→BlogPet更新ボタンを簡単に設置しましょう。

【BlogPet背景変更ボタンの作成と留守番背景の設置の続きを開く】

　06/08/07にお友達ののんびり前進じたばた生活のまゆびさんの記事BlogPetの更新ボタンを付けてみました♪で、とってもナイスなアイデアを発見しました。
　ご存知の通り、yozoんちのBlogPetのうさもの背景は、CGIを使ったランダム表示になっています。設定のしかたはコチラ→CGIを使って背景をランダムに変更！
　今のところ、ブラウザの[更新]ボタンをクリックして、背景を変更するようにお勧めしていました。ところが、簡単な設定で、背景だけをリフレッシュするナイスなアイデアを発表してくれたんです。さすが屈指のBlogPetラバーのまゆびさんですね。ナイスなアイデアですよ。たぶん最も軽いリフレッシュボタンですよね。この『BlogPet背景変更ボタン』に加えて、留守番背景についても同時に設置しました。留守番背景とは、BlogPetがダウンしているときに表示される背景のことです。詳しくはコチラ→留守番背景を設定しました♪(*^-ﾟ)v
　なお、一番最初に真似をして設置するつもりだったのですが、なぁんと、これまたお友達の夢みるととろ日記のととろさんに先を越されてしまいました。(^○^)
ととろさんのこのボタンの紹介記事はコチラ→BlogPetの更新ボタンを付けてみる
前置きが長くなりましたね。それでは

背景変更ボタンの作成と留守番背景の設置しましょう。

1. まず、ボタンに使う画像と、留守番背景を用意しましょう。
   yozoは、ボタン画像は1キロバイトの素材屋さんから、をダウンロードさせていただきました。この素材はGIF形式です
   

   そして次に、留守番用の背景はこれをお借りしました。
   カーソルを当てると、あら不思議？ダウンロード防止になってますよ♪

   
   
   

   『綿野原・錦』と名付けられた背景です。I'll be right back.
   という言葉と、この幻想的な雰囲気に惹かれました。

   
   
   今回設置した留守番背景はうさぎーず小劇場のウサゾウさんのこうさぎ背景番外・留守番画像の記事よりダウンロードさせていただきました。
   この留守番背景はJPEG形式です。ここの記事は見本ですから、ダウンロードはできません。
2. 用意できたボタンに使う画像と、留守番背景をアップロードします。
   
   1. FC2ブログにログインして、FC2ブログ管理者ページの左サイドの「ツール」の項目[ファイルアップロード]をクリックします。
   2.     ファイルの選択：[参照]をクリックして、アップロードしたい画像を選択します。
      ファイルのタイトル：お好みのタイトルを入力してください。
      「アップロード」をクリックします。
      (ファイルのタイトルは、画像が表示されないときに画像の代わりに表示される代替文字となります。)
   3. アップロードされた画像の一覧で使いたい画像の「記事を書く」をクリックすると、
      投稿記事の一番最後に、下のようなコードが追加されます。赤字の部分http:?画像URL?/pc_26_04.gifが画像URLです。
      また、記事で画像を使用するの場合は、<img src="http:?画像URL?/pc_26_04.gif" alt="クリック" width="☆" height="★" />の部分だけを使用しましょう。
      
      <a href="http:?画像URL?/pc_26_04.gif"><img src="http:?画像URL?/pc_26_04.gif" alt="クリック" border="0"></a><br clear="all">
3. メモ帳やテキストエディタ等で、BlogPet表示用のページを作成します。ご自分の好きな半角英数文字の名前で保存してください。yozoはusamo.htmlとusamo.cssを用意しました。(^○^)
   
   このファイルは、まゆびさんの了承を得て、XHTMLに準拠させています。
   
   なお、yozoはフリーソフトの「サクラエディタ」を使っています。ダウンロードはコチラ→サクラエディタ Download
   

   usamo.html

   
   <?xml version="1.0" encoding="Shift_JIS"?>
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" id="sixapart-standard">
   <head><!--Copyright (c) usabi All rights reserved.//-->
   <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <link rel="STYLESHEET" href="usamo.css" type="text/css" />
   <link rel="index" href="http://yozoblog2.blog63.fc2.com/" />
   <link rev="made" href="mailto:[e-mail]" />
   <title>うさも</title>
   </head>
   <body>
   <div class="textcenter"><div class="tablecenter"><table summary="クリックするとBlogPetが更新されます。"><tr><td style="vertical-align:middle;"><a href="http:?このファイルのURL?/usamo.html" title="リロード"><img src="http:?ボタン画像のURL" alt="クリック" width="幅" height="高さ" style="border-style:none;" /></a></td><td style="vertical-align:middle;"><span style="font-size:10px;">←背景が変わります♪</span></td></tr></table><table summary="BlogPetのスクリプトです。" cellspacing="0" cellpadding="0" style="width:130px; height:200px; border-style:none;"><tr><td><script type="text/javascript" src="http:?BlogPetの貼付け用コード?" charset="Shift-JIS"></script></td></tr></table></div></div></body>
   </html>
   

   usamo.css

   
   body
   {
   margin:0;
   }
   a:hover
   {
   position:relative; top:1px; left:1px;
   }
   .tablecenter {
   margin-left: auto;
   margin-right: auto;
   width:130px;
   }
   .textcenter
   {
   text-align: center;
   }
   
   ※http:?このファイルのURL?/usamo.htmlは、FC2にアップロードする場合、画像URLの最後のファイル名を自分でつけた名前に変更すればいいのです。
   　yozoの場合なら、『http:?画像URL?/pc_26_04.gif』という画像ファイルですから、
   初めの部分はそのままにして、最後のpc_26_04.gifの部分をusamo.htmlに変更すればいいわけです。
   『http:?画像URL?/usamo.html』これがyozoの場合のこのファイルのURLとなります。実際にアップロードした後は、ブラウザのアドレスバーに
   『http:?このファイルのURL?/usamo.html』と入力して、きちんと表示されるか確認しましょう。
4. フリーエリアに下のコードを貼り付けて動作確認をしましょう。
   
   <iframe name="usamo" id="usamo" src="http:?このファイルのURL?/usamo.html" width="150" height="360" scrolling="no" frameborder="0" title="usamo.html" style="background-image:url(http:?留守番背景のURL?);">iframeでBlogPetを設置しています。</iframe>

06/12/28 18:00追記
BlogPetのリニューアルに対応させるため、更新ボタンをBlogPetの上に配置するため、usamo.htmlを変更しました。
また、フリーエリアの貼付けコードタグiframeのheightを"240"→"360"へと変更しました。

06/12/23 12:00追記
外部CSSファイルなんて面倒！とか、アップロードできないという人は、「usamo.html」ファイルにCSSを書き込んでください。

「usamo.html」ファイルの<head>?</head>の間にある、
<link rel="STYLESHEET" href="usamo.css" type="text/css">
の一行を、下のように書き換えるだけです。これで「st.css」ファイルは不要となります。
余計なmarginが出ないように、bodyのmarginについても記述しています。

<style type="text/css">body
{
margin:0;
}
a:hover
{
position:relative; top:1px; left:1px;
}
.tablecenter {
margin-left: auto;
margin-right: auto;
width:130px;
}
.textcenter
{
text-align: center;
}</style>

↓　ぽちっと応援お願いします♪ m(_ _)m

【BlogPet背景変更ボタンの作成と留守番背景の設置の続きを閉じる】