2006年08月09日

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

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

 8/7にお友達ののんびり前進じたばた生活まゆびさんの記事BlogPetの更新ボタンを付けてみました♪で、ページはそのままで、BlogPetだけをリフレッシュする更新ボタンの設置方法と留守番背景の設置例が紹介されていました。
 ここのBlogPetのうさみちゃんの背景は、CGIを使ったランダム表示にしていませんから、このボタンは意味がないかもしれません。でも、BlogPetのエラーで[更新]しないといけないことも多くあります。そして[更新]がとても重いことも多々ありますね。それで、ここにも留守番背景とともに更新ボタンを設置することにしたのです。
 詳しい解説及び設置法はまゆびさんの記事BlogPetの更新ボタンを付けてみました♪をご覧になってください。
 留守番背景とは、BlogPetがダウンしているときに表示される背景のことです。詳しくはコチラ→留守番背景を設定しました♪(*^-゜)v
 なお、yozoのメインブログでも設置しています。yozoの記事はコチラ→BlogPet背景変更ボタンの作成と留守番背景の設置(yozo2.0版)


ボタンに使った画像は1キロバイトの素材屋さんから、ダウンロードさせていただきました。また、留守番背景はうさぎーず小劇場ウサゾウさんのこうさぎ背景番外・留守番画像の記事よりダウンロードさせていただきました。

 今回設置するにあたり、まゆびさんの方法に少し変更を加えさせていただきました。以下は変更点です。


  1. ボタンが「プニュ♪プニュ♪」するように、下記の内容の「st.css」ファイルを、「usami.html」と同じフォルダに追加してアップロードしました。
    a:hover
    {
    position:relative; top:1px; left:1px;
    }
  2. 自由形式に下のコードを貼り付けてました。貼り付けたときの上部の余計なmarginをなくすためにmarginheight="0"を追加しました。
    <iframe name="usami" id="usami" src="http:〜このファイルのURL〜/usami.html" width="150" height="240" scrolling="no" frameborder="0" marginheight="0" title="usami.html">iframeでBlogPetを設置しています。</iframe>

お友達の設定記事の案内
記事名をクリックすると設定記事が別窓で開きます。
参考にしてくださいね。m(_ _)m


posted by yozo家 at 17:24 | Comment(12) | TrackBack(5) | カスタマイズ | edit
この記事へのコメント
yozoさん、こんにちは♪(o^∇^o)ノ
おぉうさみちゃんにも更新ボタンが!!
ランダム背景でなくても活躍すると思いますよ。
だってページを開いたときにBlogPetが表示されないことも
ありますしね♪(゚-゚*)(。。*)ウンウン
おぉ。iframeのマージン設定とは!!
これなら余分なスペースが取れますね。
なるほどー!!教えてくださってありがとうございました!!

トラバありがとうございました♪
こちらからも送らせていただきました。<(_ _)>
Posted by まゆび at 2006年08月09日 17:53
こんにちはー。yozoちゃん。
わーーこっちも。

そーなんだぁ・・・。
>BlogPetのエラーで[更新]しないといけないことも多くあります
そっか・・・。そういう理由でつけてもいいんだね・・・。
そっか・・・。なるほど♪
raraも背景は1個しかないけど・・・。エラーの時とかは確かに便利なんだね・・・。なるほど!!!
今はほかの事で忙しいので、落ち着いたら是非やってみたいと思いました♪そのときはまた色々ヨロシクですぅーー!!!
Posted by enu at 2006年08月09日 18:14
こんばんは!
jerryの方へコメントとトラバをありがとうございました。
なるほど〜ランダム設定をしてなくてもこれを採用する事での意義があるっていうのはとても発見ですね。そこに留守番背景も簡単に設定できるとあっては言うことなし!です。
それと、「ぷにゅぷにゅボタン」は面白いです!またととろの悩みでもあったボタン上のスペースについて教えていただけてありがたかったです。
もしcssとかだったらととろのココログではできないなぁって思っていましたが、iframeでの設定ならば反映されるかも!
ちょっと後で調整をしてみますね。
Posted by ととろ at 2006年08月09日 19:53
こんばんは、あの後こちらを参考に変更してみました。
少しですが表示も変わって、スペースも小さくなったような気がします。まだ他に方法があるかもしれませんが、この方が見やすいので助かりました。
こちらへリンクとTBを入れさせていただきましたのでよろしくお願いします。
Posted by ととろ at 2006年08月10日 01:55
>まゆびさん、おはよーございまっす♪
トラバ返してくださってありがとーございまっす♪m(_ _)m

>おぉうさみちゃんにも更新ボタンが!!
>ランダム背景でなくても活躍すると思いますよ。
おっしゃるとおりです。BlogPetが表示されていないときに、
ページ全体の更新するのはストレスになることが多いですからね。
本当にまゆびさんのアイデア様ですよ♪ありがとーございまっす♪m(_ _)m

>おぉ。iframeのマージン設定とは!!これなら余分なスペースが取れますね。
>なるほどー!!教えてくださってありがとうございました!!
えへへ・・・CLEVER BBSの調整のときに、iframeをいじってましたからね。
今回役に立ったようです。ちょっぴり恩返しが出来てうれしいですよ。(*^-^)
Posted by まゆびさんへ at 2006年08月10日 08:39
>enuちゃん、おはよーございまっす♪

>raraも背景は1個しかないけど・・・。
>エラーの時とかは確かに便利なんだね・・・。なるほど!!!
そうですよ。ページ全体の更新はかなりストレスがある場合が多いですからね。
何しろBlogPetをサイドバーのトップにおいてますからね。(*^-^)

>今はほかの事で忙しいので、落ち着いたら是非やってみたいと思いました♪
>そのときはまた色々ヨロシクですぅーー!!!
はい♪先に仕上げなきゃいけないことがあるもんね。
落ち着いてからゆっくりやればいいですよ。
いつでも待ってますからね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン
Posted by enuちゃんへ at 2006年08月10日 08:43
>ととろさん、おはよーございまっす♪

>ランダム設定をしてなくてもこれを採用する事での意義がある
そうなんですよ。特にBlogPetが表示されていないときは、
ページ全体の更新もとても重くなりますよね。でもこのボタンで
スッキリ更新してバッチリ表示ですよ。(゚-゚*)(。。*)ウンウン

>それと、「ぷにゅぷにゅボタン」は面白いです!
面白いでしょ。やっぱりこれじゃないと!って思いました(*^-^)
st.cssというファイルを、pyon.htmlと同じフォルダにアップロードすればいいのですよ。詳しくはコチラの追記をご覧くださいね。
http://yozoblog2.blog63.fc2.com/blog-entry-362.html

>またととろの悩みでもあったボタン上のスペースについて
>教えていただけてありがたかったです。
いえいえ♪seesaaも同じようになったので、
marginをとってみましたよ♪v(。・ω・。)ィェィ♪
うまくいくといいですね♪お試しあれ。 m(_ _)m
Posted by ととろさんへ at 2006年08月10日 08:59
>ととろさん、おはよーございまっす♪
トラバありがとーございまっす♪こちらからも
トラバ返させていただきますね。m(_ _)m

>少しですが表示も変わって、スペースも小さくなったような気がします。
失礼ながらソースを見たら、iframeの前に改行が入っています。
たぶん、それが原因ではないかと思います。改行をとってみて下さいね♪
(ダメだったらごめんしてくださいね。)お試しあれ。・・・
ってこっちに書いてどうするんだろう・・・(*^-^)
Posted by ととろさんへ at 2006年08月10日 10:02
yozoさま、
記事へのコメント&トラバありがとうございました。
詳細はととろの方へ(笑)
ひとつのことからいろんな事が分かってきてすごくうれしいでした。
ととろは教えられてばかりですが、それでも少しずつ自分の力になるといいなと思ってます。

>ってこっちに書いてどうするんだろう・・・(*^-^)

大丈夫です。こっちも読んでますから(笑)
Posted by ととろ at 2006年08月10日 20:06
>ととろさん、おはよーございまっす♪
こちらこそトラバありがとーございまっす♪m(_ _)m

>詳細はととろの方へ(笑)
あはは・・・コピペしときましたけど・・・(=⌒▽⌒=) ニャハハハ♪

>ひとつのことからいろんな事が分かって
やっぱり自分のやりたいことからはじめるのがとっつきやすいですよね。あまりにレベルの高いことに手を出すのは無理にしても、
お友達がやってることは、やってみたいと思うことがそのような前向きな気持ちを生むのでしょうね。(゚-゚*)(。。*)ウンウン
yozoもその姿勢でチャレンジしていきますよ。d(@^∇゚)/ファイトッ♪

>大丈夫です。こっちも読んでますから(笑)
ありがとーございまっす♪思い(?)が報われましたよ。
なんのこっちゃ・・・(゚m゚*)プッ
Posted by ととろさんへ at 2006年08月11日 07:20
yozoさん、こちらにもこんばんは♪
うさみちゃんにもちゃーんと更新ボタンつけてあげたんですね!!
うさみちゃん喜んでるでしょうねぇ *'ー')♪
留守番背景も設置してあげたとは、さすがyozoさんです。
わたしは・・・また今度でいいか〜と、実は後回しにしちゃいました(苦笑)

他のお友達の設定記事、参考にさせていただきました♪
こちらできれいにリストにまとまっていたので、とっても分かりやすかったです☆
こちらにもトラックバック送らせていただきました<(_ _*)>
Posted by mio at 2006年08月20日 23:27
>mioさん、おはよーございまっす♪

>うさみちゃんにもちゃーんと更新ボタンつけてあげたんですね!!
「(゚-゚*)(。。*)ウンウン エラーして見えないときとかに、このボタンだけで
 すぐにうさみが表示されるので、とってもうれしいですよ♪」by うさみ

>留守番背景も設置してあげたとは、さすがyozoさんです。
いえいえ♪すべてまゆびさんのおかげですよ。
そのまんま真似させていただきました。(*^-^)

>他のお友達の設定記事、参考にさせていただきました♪
お役に立ててうれしいですよ♪(^○^)
みなさん、やっぱりこれはうれしいですよね。
めちゃくちゃ便利ですからね。
(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

追伸:トラバありがとーございまっす♪
こちらからも返しトラバ入れさせていただきます。m(_ _)m
Posted by mioさんへ at 2006年08月21日 10:46
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL
http://blog.seesaa.jp/tb/22138778

BlogPetの更新ボタンを付けてみました♪
Excerpt: BlogPetを多頭飼いしているお友達の所へ行くと、 大抵画面の切りかえボタンがついていて、 ボタンひとつで他のペットと遊ぶことができ とても便利だなぁと思っていました。 BlogPetの部分..
Weblog: のんびり前進じたばた生活
Tracked: 2006-08-09 17:44

BlogPet更新ボタンについて
Excerpt: 先日、ありがたく設置させていただいた、『のんびり前進じたばた生活』まゆびさまの「
Weblog: 夢みるととろ日記
Tracked: 2006-08-10 01:50

BlogPetの更新ボタンをうさなにも付けてみた♪(*^-^)ニコ
Excerpt: 先日メインブログの「のんびり前進じたばた生活」の 「BlogPetの更新ボタンを付けてみました♪」の記事でブログを更新せずにすむ BlogPet更新ボタンを作ってみました。 背景を楽しむにはとて..
Weblog: まゆびのかわいいもの大好き
Tracked: 2006-08-12 19:10

BlogPet背景変更ボタン♪なのだ
Excerpt: お友達リンクのyozoさんの「yozoの気が向いたと記2.0」の記事「BlogPet背景変更ボタンの作成と留守番背景の設置」と「うさもの気が向いたと記」の記事「BlogPet背景変更ボタンの作成と留守..
Weblog: ろんちゃん言いたい放題-断続的日記-
Tracked: 2006-08-14 20:55

こうさの「refresh ボタン」
Excerpt: 先日、「のんびり前進じたばた生活」のまゆびさんが「BlogPetの更新ボタンを付けてみました♪」の記事で、素晴らしいアイディアを発表されました。BlogPetを別ページに書き出し、更新ボタンをつけると..
Weblog: ROOM-M
Tracked: 2006-08-20 22:15

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。