BlogPet更新ボタン JavaScriptバージョン(留守番背景あり)
2006年11月23日
BlogPetの更新ボタンの方ですが、
もともと無料会員のときに作ったため、あることに先日気がつきました。
iframeを使っているとBlogPetのアクセス解析が上手く働いていないらしい。
BlogPetのアクセス解析はかなり高機能らしいと聞いていたのですが。。。
でも、更新ボタンはやめられないし、どうしようかと困ったなぁと思っていましたら、
お友達の「ROOM−M」のｍｉｏさんが「ペット更新ボタンのJavaScript化」の記事にて
新しい更新ボタンの記事をアップしてくださいました!!
実をいうと、もともとこちらを設置しようと思って失敗して、あの方法にたどり着いた私。
今回は大丈夫だろうか？と不安に思いながらｍｉｏさんの記事どおりにやってみると
出来ました〜♪本当にｍｉｏさんの分かりやすい記事のおかげです!!
さて出来た〜と喜んだのも束の間。一点気になることが。
私はBlogPetのキャプチャを撮るのに、WinShotというソフトを使っているのですが、
(このソフトについては「キャプチャソフト「WinShot」すごすぎるー!!」の記事をご覧ください。)
そのときに使うJPEGで保存（コントロール/クライアント）→Ctrl＋Alt＋F10を押す!!
(ビットマップで保存の場合はCtrl＋Alt＋F8)という撮り方があります。
これはブログペットの部分を自動で選択してくれるとっても便利な技なのですが、
(無料会員ペットの場合は広告部分も入ってしまいますが。(^^;;)
このJavaScriptバージョンではBlogPetの部分を認識してもらえず、
画面全体しかキャプチャできなくなります。
BlogPetが形として認識されないということは、これを枠として認識してもらえるように
すればいいのか。。。下に画像を入れたらもしかしたらＯＫ？などと短絡的に考え、
以前から導入しています留守番背景(ペットが重いときに出る可愛い画像)の設置を
してみることにしました。
こちらは「KOROPPYの本棚」のKOROPPYさんの
「全てのBlogPetをサイドバーでランダム表示」の記事を参考にしました。
KOROPPYさんちのみゅうみゅうちゃんはこのキャプチャ方法が使えるからきっといけるはず!!と
やってみたら、なんとか成功!!キャプチャもバッチリでした。
あ、でも何故出来るようになるかは分かりませんでしたが。(^^;;
ということで前置きが長くなりましたが、
ｍｉｏさんとKOROPPYさんの記事をもとに設置した手順を書かせていただきます。
以下のコードは留守番背景対応版ですので、
留守番背景を設置しない場合はｍｉｏさんのコードをお使いください。
下のコードをコピペしてメモ帳などに貼り付けてください。
赤字の部分は自分のブログペットのプロフィールのアドレスの
http://www.blogpet.net/profile.php?id=☆ ☆の部分の３２桁の英数字に変更します。
そして名前をつけて保存で「blogpet.js」と書いて保存です。
そしてご自分のサーバースペースへアップロードしてください。
(私の場合、ファイルの属性は604にしました。)
(２)実際にBlogPetをブログに設置するためのコードを作成します。
このコードはBlogPetを設置したいプラグインやフリースペース等に貼り付けてください。
<div id="blogpet" style="border-style:none; background: url(http://留守番背景のアドレス) no-repeat center top; margin:0;">
<script type="text/javascript" src="http://先ほどアップロードしたblogpet.jsのアドレス"></script></div>
<div style="margin-left:auto; margin-right:auto; width:130px; height:30px;"><a href="javascript:select_pet(0);"><img src="http://画像のアドレス" alt="画像の名前" style="float:left; border-style:none;" width="画像の幅" height="画像の高さ" /></a><div style="margin:0; font-size:10px;">←背景が変わるよ♪<br /> クリックしてね♪</div></div>
<div style="margin-left:auto; margin-right:auto; width:130px; height:30px;"><a href="javascript:select_pet(0);"><img src="http://画像のアドレス" alt="画像の名前" style="float:left; border-style:none;" width="画像の幅" height="画像の高さ" /></a><div style="margin:0; font-size:10px;">←背景が変わるよ♪<br /> クリックしてね♪</div></div>
<div id="blogpet" style="border-style:none; background: url(http://留守番背景のアドレス) no-repeat center bottom; margin:0;">
<script type="text/javascript" src="http://先ほどアップロードしたblogpet.jsのアドレス"></script>
</div>
赤字の部分は私は別のサーバを使いましたので絶対パスにしていますが、
ＦＣ２ブログの方でＦＣ２にblogpet.jsをアップロードした場合は
また留守番背景の設定のcenter top またはcenter bottomの部分ですが、
ブログペットを左揃えにしている場合はcenterをleft、
右揃えの場合はcenterをrightに変更してくださいね!!
細かい微調整等に関しましては
「BlogPet更新ボタンをバージョンアップ!!XHTMLバージョン」の記事を
参考になさってください。
実はもう一点苦労したことがありました。
ブログペットの更新ボタンの画像なのですが、私は画像のとなりに
２行の文字を入れているので画像の回り込みをしているのですが、
画像が何故か左端にいってしまい、中央ぞろえにならないという問題が起こっていました。
こちらはdivタグの中にmargin-left:auto; margin-right:auto; width:130px;を入れることで
回避出来ました。
この方法を教えてくださったのは「yozoの気が向いたと記2.0」のyozoさんでした。
うちの右サイドにもつけていますCLEVERBBSの方で同じような問題が起こっていて
yozoさんに相談したら、marginにauto設定したらいいことを教えていただいたのでした。
また記事にしてくださるということですので楽しみにしております。
yozoさんありがとうございました。(*- -)(*_ _)ペコリ
ということで、今回はｍｉｏさん、KOROPPYさん、yozoさんのおかげで
本当に助かりました!!本当にお世話になりました。(*- -)(*_ _)ペコリ
前回の更新ボタンを使われている方でＰＯＣの方、
無料会員だけど、ぺたぺた機能ではなく、アクセス解析を使われている方は
お手数ですが、こちらに変更していただければと思います。
それ以外の方は多分以前のパターンの方が軽いと思いますので。
くれぐれもバックアップはお忘れなく!!
アクセス解析の方、今まで検索ワードなどなど拾ってもらっていなかったのですが、
きちんと表示されるようになりました♪こんな感じです。
いやー、すごいなぁ♪検索ワードもかなりの数で検出されてました。
(2006/11/23 18:47の段階で９４個も出てました〜!!)
これを使いこなせるようにならなければ。(笑)
↓応援よろしくお願いします。(o*。_。)oペコッ
追記
2006/12/28 のリニューアルによりこのスクリプトが使えなくなりました。
新バージョンは「緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!!」にて
書かせていただいてますのでそちらを参考にしてください。
コメント
着々と進化してますね〜*:.｡.:*･(*´∀`)ﾟ｡.:･*ﾎﾟﾜﾜﾜｧｧﾝ
mioさんの記事も読ませていただいてきましたが
みなさん凄い事をやっておられるんだなぁと
ポカーンと口が開いたままに（笑
いつもこちらにお邪魔するとポチポチ押してしまうボタンですが
今までの機能を保ちつつ、解析も利用できるなんて
ホントスバラシイですね(･ω･)(._.)(･ω･)(._.)ｳﾝｳﾝ♪
来訪者目線でありながらしっかり機能も堪能できてるまゆびさん、やっぱり尊敬だわ♪
ためになる記事、ありがとうございましたー(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
Posted by モンビッケ at 2006.11.23 20:16 | edit
ｍｉｏさんのおかげでできたようなものですよ。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
私ひとりでこれに挑んでいたらどれだけの時間がかかったことやら。
私も更新ボタンをつけてからは意味もなくポチポチっと押しております(笑)。
BlogPetのアクセス解析はかなり高機能のようなので、
使えていないのはもったいないですものね。
このJavaバージョンに変えてから、少ししてアクセス解析結果を見てみると
びっくりするほどの情報が出てきてびっくりしましたよ!!
いえいえ、尊敬だなんてとんでもないです。うっかりものですから。(^^;;
長い記事を読んでいただいてありがとうございました♪(o*。_。)oペコッ
Posted by まゆび→モンビッケさんへ at 2006.11.23 20:29 | edit
お知らせをありがとうございました。
メッセでもお話したようにととろのBlogPetは検索が一個も掛からないのであまり必要かな?って疑問もありますが(爆)やはり更新ボタンは無くてはならないものになってますので、最新にしてこれからもまゆびさまの更新にあわせて付いていきたいと思っています。
ぴょん・jerryともこちらを使わせていただきました。
とてもわかりやすく解説してくださってありがとう。
Posted by ととろ at 2006.11.23 22:52 | edit
なんと、もう新しいバージョンに変更していただいたのですね♪
ありがとうございます♪(o*。_。)oペコッ
＞ととろのBlogPetは検索が一個も掛からない
いえいえ、以前のifameを使ったバージョンでは検索ワードが出てこないんです。
私もこのバージョンに直す前はゼロでした。(笑)
数時間で結果が出ていましたので、ととろさんももう少ししたら
何かヒットしてるかも♪(*'ー'*)ふふっ♪
また明日にでもチェックしてみてくださいね♪(*^-^)ニコ
Posted by まゆび→ととろさんへ at 2006.11.23 23:27 | edit
お役に立てて何よりでっす♪センタリングは近々記事にしますね。
CLEVERの修正記事もリリースするようにします。(＞▽＜;; ｱｾｱｾ
jsファイルにするなど、XHTML準拠もバッチリのようですね。それになぜだかWinshotでframeが認識されない点も、divのbackgraudに留守番背景を設置するという裏技(？)でカバーされたところなんて本当にすごいですよ。
へぇ〜♪名だたるBlogPetのアクセス解析はとても見やすいのですね。
これでPOCならではの機能を十分に活用でいるのですから、この記事の価値は高いですね。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
追伸：
無料会員のyozoにまで、お知らせいただいてありがとーございまっす♪
丁寧な対応に心から感謝しまっす m(_ _)m
Posted by yozo at 2006.11.23 23:41 | edit
本当にセンタリングの件ではお世話になりました。(o*。_。)oペコッ
以前はiframeだったからあのコードでも問題なかったのですね。
勉強になりました。
CLEVERの方はのんびりと記事をお待ちしております。(*- -)(*_ _)ペコリ
＞jsファイルにするなど、XHTML準拠もバッチリのようですね。
こちらはｍｉｏさんのおかげでございます。
ｍｉｏさんのいる方向に足を向けて寝られないかも。
WinShotの件は上手くいってよかったです。
ＰＯＣの場合は「コントロール/クライアント」が非常に便利なので、
あれが使えないとなるとかなり痛いなぁと思っていたので。
＞名だたるBlogPetのアクセス解析はとても見やすいのですね。
思った以上の高機能でびっくり。ＰＯＣになったころから前のバージョンの
更新ボタンだったのでどこまですごいか十分把握できていなかったんですよね。
楽しみが増えそうです♪《《《《♪♪(*´▽｀*)ノ゛うふふ〜
無料会員の方でもアクセス解析に興味がある方もいらっしゃるでしょうし、
ＰＯＣになる方もおられるかもしれないのでトラバ、コメントでご連絡いただいた方には
メッセを送らせていただきました♪
もしもＰＯＣになることがございましたら、使ってくださいね♪(笑)
Posted by まゆび→yozoさんへ at 2006.11.24 00:15 | edit
そのままではクライアント指定できないとは、
思わぬ展開でしたね。
カスタマイズって、一ついじると別のところが気になったりするから、
どんどんはまってっちゃいますよねｗ
留守番背景によって上手く直ったようで、なによりです。
記事でのご紹介もありがとうございました。
iframeだとブログ本体のアクセス解析のデータが取得できないとか、
今回の件ではいろいろ勉強になりました。
Posted by KOROPPY at 2006.11.24 11:02 | edit
本当にこの度はお世話になりました。(o*。_。)oペコッ
まさかWinShotのクライアントが出来ないとは
思いもよりませんでした。
気がついたときにはかなりショックでしたわ。(笑)
＞カスタマイズって、一ついじると別のところが気になったりするから、
＞どんどんはまってっちゃいますよねｗ
そうですよね。時間がたっぷりあるときにやらないと
ついつい意地になってやってしまい、寝るのが遅くなっちゃいます。(笑)
私も今回は本当にいろいろ勉強になりました。
こういった情報は知っていると後々役に立ちますものね♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
本当にありがとうございました♪(*- -)(*_ _)ペコリ
Posted by まゆび→KOROPPYさんへ at 2006.11.24 17:03 | edit
コードを使って 試した所。
やっと 更新ボタンが動きました。
うれしくて コメント 残しました。
Posted by サボタージュ at 2006.11.25 20:27 | edit
更新ボタン設置おめでとうございます!!
私もｍｉｏさんのおかげで出来たのですよ。
感謝感謝ですね〜♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
これでペットちゃんと遊ぶのが
ますます楽しみになりますよね!!!(*'-')
Posted by まゆび→サボタージュさんへ at 2006.11.25 22:23 | edit
メッセでお知らせ頂き、ありがとうございましたm(_ _)m
joeyは今、ぺたぺた機能をつかっているので大丈夫みたいですね。アクセス解析にするか、POCになるならば、こちらの設定が必要なんですね〜
逆にぺたぺた機能を使っていてもこちらの設定にしても大丈夫って事ですか？そしたら勉強のためにやってみようかな？^^
Posted by joey at 2006.11.26 16:17 | edit
そうですね。ぺたぺた機能の場合は問題ないです。
アクセス解析が働かないという問題点があったので
こちらに変更させていただきました。
＞逆にぺたぺた機能を使っていてもこちらの設定にしても大丈夫って事ですか？
そうですね。どちらでもかまわないとは思うのですが、
以前のパターンの方が軽いような気もします。
一度やってみてどちらにするか決めてみてもいいかもしれませんね。
Posted by まゆび→joeyさんへ at 2006.11.26 18:32 | edit
BlogPetでのメッセージありがとうございます。
遅ればせながら、本日まゆびさんのご紹介して頂いた記事を参考にさせて貰いました！！
色々とお世話になり、ありがとうございます☆☆
Posted by ろんちゃん at 2007.02.10 15:15 | edit
更新ボタンの変更上手くいったようでよかったですね。
お役に立ててよかったです。(*'-')
Posted by まゆび→ろんちゃんさんへ at 2007.02.10 18:42 | edit