BlogPet背景更新ボタンの設置 の記事一覧

メイン

2006年12月29日

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>\n";
    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>\n";
    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
人気blogランキング

【BlogPet更新ボタンを簡単に設置しましょう。の続きを開く】
FC2ブックマークに追加

スレッドテーマ:ブログペット:ブログ

Admin | Posted at 20:51 | BlogPet背景更新ボタンの設置 | | Comments [10] | Trackbacks [2]
2006年08月08日

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

06/12/29 お知らせ
　06/12/28のBlogPetのリニューアルによって、この記事のように、iframeタグを使った更新ボタンを使用すると、一部の機能に不具合が発生することがわかりました。BlogPetの仕様変更に準拠するため、新しく更新ボタンの設定の方法を記事にしてあります。この記事を参考にされたみなさんにはお手数かけますが、更新ボタンを変更していただけますようにお願いします。記事はコチラ→BlogPet更新ボタンを簡単に設置しましょう。
【BlogPet背景変更ボタンの作成と留守番背景の設置の続きを開く】
FC2ブックマークに追加

スレッドテーマ:初心者のために・・・:コンピュータ

Admin | Posted at 17:14 | BlogPet背景更新ボタンの設置 | | Comments [38] | Trackbacks [9]

メイン