BlogPet更新ボタンを簡単に設置しましょう。出来事etcをつづっています。方へ目次なんでも掲示板画像掲示板ブログペットキリぺた帳検索トップ--年--月--日スポンサーサイト上記の広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。この記事のURL2006年12月29日BlogPet更新ボタンを簡単に設置しましょう。06/12/28のBlogPetのリニューアルで、楽しくて便利な機能が追加されましたね。それにあわせて、便利な機能のうち、「お気に入りの登録」ができないため、右サイドのBlogPetの更新ボタンをJavaScript化しました。簡単に貼付けできるようにしました。変更に至った詳しい経緯については、追記に書かせていただきました。興味のある方はそちらもご覧ください。この記事の更新ボタンはあくまで記事全体を更新することなく、BlogPetだけを更新するためのものです。この更新ボタンでBlogPetの背景の表示を切り替えするには、CGIによるランダム表示が設定されていることが前提となっています。リニューアルにより変更!!を参考にさせていただきました。_)m更新ボタン用の画像を用意してください。1キロバイトの素材屋さんから、をダウンロードさせていただきました。この素材はGIF形式ですそして、画像を自分のブログにアップロードして、画像URL、幅(width)、高さ(height)を控えておきます。☆×△』と表示されます。☆がwidthで△がheightですよ。下のソースコードのこの色の部分を変更して、BlogPetを設置したい場所に貼り付ければOKです。変更点は以下の5点です。画像URL画像の幅画像の高さ←これは見本です。ご自分でここの文章を変更してください。自分のペットのID自分のペットのIDは、『オーナープロフィール』ボタンをクリックして表示されるページのURLのidのことです。BlogPetをセンタリングさせたい人はこの色の部分(最初と最後の2箇所あります。)も含めて貼り付けてくださいね♪なお、このコードは、申し訳ありませんが、1つのブログに1つしか設置できないようになっています。summary="クリックするとBlogPetが更新されます。style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。summary="BlogPetのスクリプトです。summary="クリックするとBlogPetが更新されます。style="font-size:10px;">←これは見本です。ご自分でここの文章を変更してください。summary="BlogPetのスクリプトです。この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。言うまでもないことですが、この記事を参考にされるのでしたら、自己責任で行ってください。このコードによって起こったいかなる損害に対してもyozoには責任は無いものとさせていただきます。この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。_)mBlogPet背景変更ボタンの作成と留守番背景の設置にありますように、更新ボタンは、iframeタグを使用して、別のホームページ上に設置したBlogPetを、ここのブログに表示させていたのですが、この仕様だと、06/12/28のBlogPetのリニューアルによって、不具合が発生することがわかりました。リニューアルによって、追加された機能の一つに、「お気に入りの登録・閲覧」というボタンがあります。閲覧するには全く問題ないのですが、「お気に入りの登録」をすると、表示されているここのブログの記事でなく、iframeの呼び込み先が登録されてしまうという問題が起こるようになりました。このままだと、BlogPetがせっかく用意してくれた便利な機能がムダになりますし、何よりもそのことを知らずに「お気に入りの登録」をしてくださった方に迷惑をかけてしまうことになりかねませんので、iframeタグ仕様の更新ボタンをJavaScript仕様に変更することにさせていただきました。ここのBlogPetのJavaScriptは外部ファイル化しておりますが、この記事では、外部ファイル化はしておりません。リニューアルにより変更!!を参考にしてください。editコメント流石yozoさまです。わかりやすい記事ですね。とろはまるっとまゆびさまの更新ボタンを使わせていただいてるので、該当エントリをそのままコピペさせてもらいました。それにしても無料会員さん、CMが大きくなってフレームから外れたので、はみだし背景が楽しめるようになりましたね!なんといってもととろはこれが今回一番うれしいかも。editコメントyozoさん、こんにちは♪ヾ(=^▽^=)ノトラバいただいていたのに来るのが遅くなってしまって申し訳ありません。_)o))とっても分かりやすい記事ですね♪うちの記事は外部ファイルなのでこちらの方が初心者の方には設置しやすいなぁと思います。!素敵な記事をありがとうございました。))アワワワ!!そうだったのですか♪BlogPetのチェンジャーを使っているみなさんは、表示されなくなりますもんね。この記事では、複数のBlogPetの切替はできませんが、『KOROPPYの本棚』様の記事でとっても簡単に切替ボタンが作成できるソースが公開されていましたよ。お時間あるときにでも、覗いてみてくださいね。http://koroppy.cocolog-nifty.com/blog/2006/12/post_b643.html>さすがyozoさん、冷静に対処なさっているのですね(゚▽゚*)♪いえいえ♪06/12/28のリニューアル以来、パニックですよ。iframeの調節をし直したものの、お気に入り登録ができなくなりましたからね。それからは、JavaScriptを色々と試しましたよ。editコメント>ととろさん、こんにちはー♪>流石yozoさまです。わかりやすい記事ですね。わぁ♪そう仰っていただけると、とってもうれしいでっす。_)m>ととろはまるっとまゆびさまの更新ボタンを使わせていただいてるXHTML準拠を推奨していますから、yozoも外部ファイル参照タイプにしてます。それでも、折角、CGIのランダム表示はできているのに、更新ボタンを設置できない方もいらっしゃるようなので、とりあえず、コピペタイプのJavaScriptのコードにしてみました。>無料会員さん、CMが大きくなってフレームから外れたので、>はみだし背景が楽しめるようになりましたね!えっ?フレームから外れたのですか?おお!それは知らなかったでっす。ワーイそれでも大きくなったCMの方についつい目がいってしまうような気が・・・でも、それ以外は、メニューは全部楽しませていただいていますから、OKとしてまっす。「ひみつの日記」がお気に入りのyozoでっす。editコメント>まゆびさん、こんにちはー♪>トラバいただいていたのに来るのが遅くなってしまって申し訳ありません。_)o))いえいえ♪年の瀬の忙しい時期ですからね。それよりも、yozoの方こそ、まゆびさんのJSコードのおかげで、サクッと更新ボタンをリニューアルできましたよ。_)m>うちの記事は外部ファイルなのでこちらの方が初心者の方には>設置しやすいなぁと思います。!どうしてもXHTML準拠を考えると、外部ファイル化が妥当ですよね。ランダム背景表示はできているのに、ファイルのアップロード先の無い人は更新ボタンは設置できませんからね。今回のリニューアルでiframeが使えないのなら、ブログに直接書き込むJSコードもありかなって思って、敢えて簡単版を紹介したのですよ。editコメントyozoさん、こんばんは。うちも、まゆびさんの記事を参考にして、外部JSファイル版に修正しました。「お気に入りの登録」ができなくなるとは想定外でしたね。それとこのコピペ版はとてもわかりやすいですね。CGIのランダム背景表示さえ完成していれば、文字通りのコピペでOKですもんね。追伸:勝手ながらトラバ入れさせていただきました。editコメントyozoさん(*・ω・)ノ~☆コンバンワ♪おぉぉ・・・新しいボタンの説明ですね。editコメント>yolipさん、おはよーございまっす♪yolipさんも外部JSファイルにされたのですね。仰るとおり、折角のサーバーサイドでの設置で閲覧PCの負荷を減らす対策だったのですが、「お気に入りの登録」がでサーバーのHTMLを登録されてしまうことになってしまうとは・・・まさしく想定外でしたね。yozoもyolipさんと同様にまゆびさんと同じように、外部JSファイルでの設定にしています。外部JSファイルはサーバースペースをお持ちでない方には、無理な場合が多いので、手軽にブログのフリースペースにコピペできるようにしてみましたよ♪(*゚▽゚)*。