スポンサーサイト

--年--月--日
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

BlogPet更新ボタン JavaScriptバージョン(留守番背景あり)

2006年11月23日

BlogPetの更新ボタンの方ですが、
もともと無料会員のときに作ったため、あることに先日気がつきました。
iframeを使っているとBlogPetのアクセス解析が上手く働いていないらしい。
BlogPetのアクセス解析はかなり高機能らしいと聞いていたのですが。。。
でも、更新ボタンはやめられないし、どうしようかと困ったなぁと思っていましたら、
お友達の「ROOM-M」mioさん「ペット更新ボタンのJavaScript化」の記事にて
新しい更新ボタンの記事をアップしてくださいました!!
実をいうと、もともとこちらを設置しようと思って失敗して、あの方法にたどり着いた私。
今回は大丈夫だろうか?と不安に思いながらmioさんの記事どおりにやってみると
出来ました~♪本当にmioさんの分かりやすい記事のおかげです!!


さて出来た~と喜んだのも束の間。一点気になることが。
私はBlogPetのキャプチャを撮るのに、WinShotというソフトを使っているのですが、
(このソフトについては「キャプチャソフト「WinShot」すごすぎるー!!」の記事をご覧ください。)
そのときに使うJPEGで保存(コントロール/クライアント)→Ctrl+Alt+F10を押す!!
(ビットマップで保存の場合はCtrl+Alt+F8)という撮り方があります。
これはブログペットの部分を自動で選択してくれるとっても便利な技なのですが、
(無料会員ペットの場合は広告部分も入ってしまいますが。(^^;;)
このJavaScriptバージョンではBlogPetの部分を認識してもらえず、
画面全体しかキャプチャできなくなります。
BlogPetが形として認識されないということは、これを枠として認識してもらえるように
すればいいのか。。。下に画像を入れたらもしかしたらOK?などと短絡的に考え、
以前から導入しています留守番背景(ペットが重いときに出る可愛い画像)の設置を
してみることにしました。
こちらは「KOROPPYの本棚」KOROPPYさん
「全てのBlogPetをサイドバーでランダム表示」の記事を参考にしました。
KOROPPYさんちのみゅうみゅうちゃんはこのキャプチャ方法が使えるからきっといけるはず!!と
やってみたら、なんとか成功!!キャプチャもバッチリでした。
あ、でも何故出来るようになるかは分かりませんでしたが。(^^;;


ということで前置きが長くなりましたが、
mioさんとKOROPPYさんの記事をもとに設置した手順を書かせていただきます。
以下のコードは留守番背景対応版ですので、
留守番背景を設置しない場合はmioさんのコードをお使いください。


(1)まずは「blogpet.js」というファイルを作ります。
下のコードをコピペしてメモ帳などに貼り付けてください。

赤字の部分は自分のブログペットのプロフィールのアドレスの
http://www.blogpet.net/profile.php?id=☆ ☆の部分の32桁の英数字に変更します。


そして名前をつけて保存で「blogpet.js」と書いて保存です。
そしてご自分のサーバースペースへアップロードしてください。
(私の場合、ファイルの属性は604にしました。)


(2)実際に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>
青字の部分をそれぞれ自分の必要なように変更してください。
赤字の部分は私は別のサーバを使いましたので絶対パスにしていますが、
FC2ブログの方でFC2にblogpet.jsをアップロードした場合は
<%url>file/blogpet.js
とすればOKです。(詳しくはmioさんの記事をどうぞ♪)

また留守番背景の設定のcenter top またはcenter bottomの部分ですが、
ブログペットを左揃えにしている場合はcenterをleft、
右揃えの場合はcenterをrightに変更してくださいね!!
細かい微調整等に関しましては
「BlogPet更新ボタンをバージョンアップ!!XHTMLバージョン」の記事を
参考になさってください。


実はもう一点苦労したことがありました。
ブログペットの更新ボタンの画像なのですが、私は画像のとなりに
2行の文字を入れているので画像の回り込みをしているのですが、
画像が何故か左端にいってしまい、中央ぞろえにならないという問題が起こっていました。
こちらはdivタグの中にmargin-left:auto; margin-right:auto; width:130px;を入れることで
回避出来ました。
この方法を教えてくださったのは「yozoの気が向いたと記2.0」yozoさんでした。
うちの右サイドにもつけていますCLEVERBBSの方で同じような問題が起こっていて
yozoさんに相談したら、marginにauto設定したらいいことを教えていただいたのでした。
また記事にしてくださるということですので楽しみにしております。
yozoさんありがとうございました。(*- -)(*_ _)ペコリ


ということで、今回はmioさん、KOROPPYさん、yozoさんのおかげで
本当に助かりました!!本当にお世話になりました。(*- -)(*_ _)ペコリ


前回の更新ボタンを使われている方でPOCの方、
無料会員だけど、ぺたぺた機能ではなく、アクセス解析を使われている方は
お手数ですが、こちらに変更していただければと思います。
それ以外の方は多分以前のパターンの方が軽いと思いますので。
くれぐれもバックアップはお忘れなく!!


そうそう、書き忘れるところだった。(゜ー゜;Aアセアセ
アクセス解析の方、今まで検索ワードなどなど拾ってもらっていなかったのですが、
きちんと表示されるようになりました♪こんな感じです。
061123access1.jpg061123access2.jpg
いやー、すごいなぁ♪検索ワードもかなりの数で検出されてました。
(2006/11/23 18:47の段階で94個も出てました~!!)
これを使いこなせるようにならなければ。(笑)

↓応援よろしくお願いします。(o*。_。)oペコッ
banner_02.gif



追記
2006/12/28 のリニューアルによりこのスクリプトが使えなくなりました。
新バージョンは「緊急 BlogPet更新ボタンJavaScriptバージョン リニューアルにより変更!!」にて
書かせていただいてますのでそちらを参考にしてください。
スポンサーサイト

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

メイン

トラックバックURL


トラックバック

全てのBlogPetをサイドバーでランダム表示 from KOROPPYの本棚
The blog of H.Fujimotoさまの「BlogPetのランダム表示JavaScript(改良版)」を導入しました。 全てのペットがランダムに表示される優れものです。 1回に表示するBlogPetは1匹なので、サイドバーが重くならずにすみます。 また、特定のペットを表示するリンクもついているの [Read More]

わんとろーちゃんの切り替え、成功!! from あれこれ雑記
先日、Blogpet背景のランダム表示にコメントをいただき わんとろーちゃんの切 [Read More]

ブロックレベル要素のセンタリング(CSS編集) from yozoの気が向いたと記2.0
はじめに 画像や表などを記事の真ん中に配置する(センタリングする)とき、以前では、&lt;center&gt;や&lt;div align=&quot;center&quot;&gt;を使用するのが当たり前でした。これらの方法は簡単で便利だったのですが、HTML4.01で [Read More]

コメント

まゆびさん、(*・ω・)ノ~☆コンバンワ♪
着々と進化してますね~*:.。.:*・(*´∀`)゚。.:・*ポワワワァァン
mioさんの記事も読ませていただいてきましたが
みなさん凄い事をやっておられるんだなぁと
ポカーンと口が開いたままに(笑
いつもこちらにお邪魔するとポチポチ押してしまうボタンですが
今までの機能を保ちつつ、解析も利用できるなんて
ホントスバラシイですね(・ω・)(._.)(・ω・)(._.)ウンウン♪
来訪者目線でありながらしっかり機能も堪能できてるまゆびさん、やっぱり尊敬だわ♪
ためになる記事、ありがとうございましたー(´・ω・)(´-ω-)(´_ _)ペコリ
モンビッケさん、こんばんは♪(^▽^)/
mioさんのおかげでできたようなものですよ。(゚-゚*)(。。*)ウンウン
私ひとりでこれに挑んでいたらどれだけの時間がかかったことやら。
私も更新ボタンをつけてからは意味もなくポチポチっと押しております(笑)。
BlogPetのアクセス解析はかなり高機能のようなので、
使えていないのはもったいないですものね。
このJavaバージョンに変えてから、少ししてアクセス解析結果を見てみると
びっくりするほどの情報が出てきてびっくりしましたよ!!

いえいえ、尊敬だなんてとんでもないです。うっかりものですから。(^^;;
長い記事を読んでいただいてありがとうございました♪(o*。_。)oペコッ
こんばんは!
お知らせをありがとうございました。
メッセでもお話したようにととろのBlogPetは検索が一個も掛からないのであまり必要かな?って疑問もありますが(爆)やはり更新ボタンは無くてはならないものになってますので、最新にしてこれからもまゆびさまの更新にあわせて付いていきたいと思っています。
ぴょん・jerryともこちらを使わせていただきました。
とてもわかりやすく解説してくださってありがとう。
ととろさん、こんばんは♪(^▽^)/
なんと、もう新しいバージョンに変更していただいたのですね♪
ありがとうございます♪(o*。_。)oペコッ
>ととろのBlogPetは検索が一個も掛からない
いえいえ、以前のifameを使ったバージョンでは検索ワードが出てこないんです。
私もこのバージョンに直す前はゼロでした。(笑)
数時間で結果が出ていましたので、ととろさんももう少ししたら
何かヒットしてるかも♪(*'ー'*)ふふっ♪
また明日にでもチェックしてみてくださいね♪(*^-^)ニコ
まゆびさん、こんばんはー♪
お役に立てて何よりでっす♪センタリングは近々記事にしますね。
CLEVERの修正記事もリリースするようにします。(>▽<;; アセアセ
jsファイルにするなど、XHTML準拠もバッチリのようですね。それになぜだかWinshotでframeが認識されない点も、divのbackgraudに留守番背景を設置するという裏技(?)でカバーされたところなんて本当にすごいですよ。
へぇ~♪名だたるBlogPetのアクセス解析はとても見やすいのですね。
これでPOCならではの機能を十分に活用でいるのですから、この記事の価値は高いですね。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

追伸:
無料会員のyozoにまで、お知らせいただいてありがとーございまっす♪
丁寧な対応に心から感謝しまっす m(_ _)m
yozoさん、こんばんは♪(o^∇^o)ノ
本当にセンタリングの件ではお世話になりました。(o*。_。)oペコッ
以前はiframeだったからあのコードでも問題なかったのですね。
勉強になりました。
CLEVERの方はのんびりと記事をお待ちしております。(*- -)(*_ _)ペコリ
>jsファイルにするなど、XHTML準拠もバッチリのようですね。
こちらはmioさんのおかげでございます。
mioさんのいる方向に足を向けて寝られないかも。
WinShotの件は上手くいってよかったです。
POCの場合は「コントロール/クライアント」が非常に便利なので、
あれが使えないとなるとかなり痛いなぁと思っていたので。
>名だたるBlogPetのアクセス解析はとても見やすいのですね。
思った以上の高機能でびっくり。POCになったころから前のバージョンの
更新ボタンだったのでどこまですごいか十分把握できていなかったんですよね。
楽しみが増えそうです♪《《《《♪♪(*´▽`*)ノ゛うふふ~

無料会員の方でもアクセス解析に興味がある方もいらっしゃるでしょうし、
POCになる方もおられるかもしれないのでトラバ、コメントでご連絡いただいた方には
メッセを送らせていただきました♪
もしもPOCになることがございましたら、使ってくださいね♪(笑)
こんにちは。

そのままではクライアント指定できないとは、
思わぬ展開でしたね。
カスタマイズって、一ついじると別のところが気になったりするから、
どんどんはまってっちゃいますよねw

留守番背景によって上手く直ったようで、なによりです。
記事でのご紹介もありがとうございました。

iframeだとブログ本体のアクセス解析のデータが取得できないとか、
今回の件ではいろいろ勉強になりました。

KOROPPYさん、こんにちは♪(^ー^)ノ
本当にこの度はお世話になりました。(o*。_。)oペコッ
まさかWinShotのクライアントが出来ないとは
思いもよりませんでした。
気がついたときにはかなりショックでしたわ。(笑)
>カスタマイズって、一ついじると別のところが気になったりするから、
>どんどんはまってっちゃいますよねw
そうですよね。時間がたっぷりあるときにやらないと
ついつい意地になってやってしまい、寝るのが遅くなっちゃいます。(笑)

私も今回は本当にいろいろ勉強になりました。
こういった情報は知っていると後々役に立ちますものね♪(゚-゚*)(。。*)ウンウン

本当にありがとうございました♪(*- -)(*_ _)ペコリ
mioさんのところで この更新ボタンの記事が出てきてから どうしても付けたくて 試行錯誤していましたが どうしても 出来なくて ものは 試にとまゆびさんのところのjsファイルをコピーして mioさんの所の
コードを使って 試した所。
やっと 更新ボタンが動きました。
うれしくて コメント 残しました。
サボタージュさん、こんばんは♪(^▽^)/
更新ボタン設置おめでとうございます!!
私もmioさんのおかげで出来たのですよ。
感謝感謝ですね~♪(゚-゚*)(。。*)ウンウン
これでペットちゃんと遊ぶのが
ますます楽しみになりますよね!!!(*'-')
まゆびさん、こんにちは♪

メッセでお知らせ頂き、ありがとうございましたm(_ _)m
joeyは今、ぺたぺた機能をつかっているので大丈夫みたいですね。アクセス解析にするか、POCになるならば、こちらの設定が必要なんですね~
逆にぺたぺた機能を使っていてもこちらの設定にしても大丈夫って事ですか?そしたら勉強のためにやってみようかな?^^
joeyさん、こんばんは♪(^▽^)/
そうですね。ぺたぺた機能の場合は問題ないです。
アクセス解析が働かないという問題点があったので
こちらに変更させていただきました。
>逆にぺたぺた機能を使っていてもこちらの設定にしても大丈夫って事ですか?
そうですね。どちらでもかまわないとは思うのですが、
以前のパターンの方が軽いような気もします。
一度やってみてどちらにするか決めてみてもいいかもしれませんね。
まゆびさん、こんにちわ♪

BlogPetでのメッセージありがとうございます。

遅ればせながら、本日まゆびさんのご紹介して頂いた記事を参考にさせて貰いました!!
色々とお世話になり、ありがとうございます☆☆
ろんちゃんさん、こんにちは♪(^▽^)/

更新ボタンの変更上手くいったようでよかったですね。
お役に立ててよかったです。(*'-')

コメントする

サイト管理者にのみ通知する
コメントをプレビューする?
ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。