BlogPet更新ボタンをバージョンアップ!!XHTMLバージョン
以前に「BlogPetの更新ボタンを付けてみました♪」の記事で発表しましたペットの更新ボタン。
たくさんの皆様が設置してくださって本当に嬉しかったです。
さて、その更新ボタンのソースですが、
これを作ったときはXHTMLなんて知らなかったので、
古いバージョンのHTML4.01で出来ています。
あと、留守番背景、ボタンの部分にテーブルタグが組まれていました。
テーブルタグというのは非常に便利なのですが、
とにかく重い!!
以前のテンプレもテーブルタグがいっぱいだったのですが、
今はdivタグを使用しているためかなり早くなったと思います。
ということで、XHTMLに変更＆テーブルタグの削除に取り組んでみました!!
ただ注意点がございます。
実際に私がこちらのソースをいろいろ変更していると
IEではきちんと見えるものの、Firefoxでは留守番背景がBlogPetの枠とずれ、
見た目が悪くなる、へんなスペースが生まれるなどの問題が生じました。
もしかしたら以前のバージョンでも起こっていたのかもしれませんが、
ちょっとした微調整が必要になる可能性があります。
留守番背景のずれを指摘し、対処方法を教えてくださった
「naoKの｢ホイきたー!」」のnaoKさん!!
本当にありがとうございました!!＜(＿ ＿)＞
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head><!--Copyright (c) usabi All rights reserved.//-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://mayubi.blog48.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>うさび</title>
</head>
<body style="margin: 0; padding: 0;">
<div style="border-style:none; width:130; height:30; margin:0; vertical-align:middle; line-height:13px;"><a href="usabi.htmlのアドレス" title="リロード"><img src="http://アイコンの画像アドレス" alt="画像の名前" style="float:left; border-style:none;" width="画像の幅" height="画像の高さ" /></a><span style="font-size:10px;">←背景が変わるよ♪<br />クリックしてね♪</span><br style="clear:both;" /></div>
ブログペットの貼り付けスクリプト
</body>
</html>
赤字の部分は自分のアドレス、ペットの名前などに変更してください。
留守番背景はブログに表示させるソースの方に仕込みますので
こちらにはありません。
<iframe name="usabi" id="usabi" title="blogpetbutton" src="http://〜usabi.html" width="130" height="230" scrolling="no" frameborder="0" style="border-style:none; background: url(http://留守番背景.jpg) no-repeat center bottom; margin-bottom: 10px;">iframeを使っています♪</iframe>
margin-bottom:10px;はブログペットの下に余白を入れるための表示ですので、
必要ない方は削除してください。
赤字の部分は自分のペットちゃんのお名前にでも変更してください。
他の部分で使っているidとだぶるとエラーになりますのでご注意くださいね♪
「iframeを使っています♪」の記述は
iframeを表示できないブラウザの方へのメッセージですので、
こちらも自由に変更してくださいませ♪
青字の部分が留守番背景を設定する部分です。
留守番背景を設定しない方はここの部分を削除してください。
あと、以前はusabi.htmlのファイルをFC2にアップしていたのですが、
出来れば別のサーバ(ただし広告の出ないサーバにしてくださいね!!)に
アップした方が軽いような気がします。
あと、微調整のために必要なタグを簡単に書いておきます。
参考になればいいのですが。
こちらに書いているタグは
style="〜"の〜の部分に入れるようにしてください。
そうでないとエラーが起こります。
またタグによって使える表記が違いますので、
「Another HTML-lint gateway」などを使って
エラーチェックをしてみた方がいいかもしれません。
margin: 0; これは外側の余白を設定するものです。
余白をいれたいときは0の部分を2pxなどに設定してください。
padding: 0; これは内側の余白を設定するのものです。
設定の仕方はmarginと同様です。
border-style:none; これは画像などの周りに線が入る設定になっている場合に
入れておくとその線が消えます。
vertical-align:middle; 縦方向の位置をそろえます。
middleは中央揃え。topで上揃え。bottomで下揃えになります。
line-height:13px; 文字の行間を指定します。
えっと。例えば文字の大きさを10pxで設定した場合、
この設定だと、3pxの余白が次の行との間に生まれるということです。
皆様の役に立ちそうなのはこれくらいでしょうか？？？
私もそんなに多くの知識があるわけではないので、
怪しい表現になっているかもしれませんが、
ご了承くださいね。＜(＿ ＿)＞
と、ここまで書いた後で、もしかしてBlogPet更新ボタンって
下にあった方がいいのでは？と思い始めました。
BlogPetの名前の部分をマウスが通過するとメニューバーが出てきて邪魔？？？
そこでボタンを下に持ってくるように変更したのですが、
こちらもなんだかんだ細かい調節が必要でした。。。orz
同じように下に設置したい方もおられると思いますのでこちらのコードも
書いておきますね。
まずはusabi.htmlのソースはコチラです。
<?xml version="1.0" encoding="Shift_JIS" standalone="no"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head><!--Copyright (c) usabi All rights reserved.//-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<link rel="STYLESHEET" href="st.css" type="text/css" />
<link rel="index" href="http://mayubi.blog48.fc2.com/" />
<link rev="made" href="mailto:user@domain" />
<title>うさび</title>
</head>
<body style="margin: 0; padding: 0;">
ブログペット貼り付けコード
<div style="border-style:none; width:130; height:30; margin:0; padding:0; vertical-align:middle; line-height:12px;"><a href="usabi.htmlのアドレス" title="リロード"><img src="http://アイコン画像のアドレス" alt="画像の名前" style="float:left; border-style:none;" width="画像の幅" height="画像の高さ" /></a><span style="font-size:10px;">←背景が変わるよ♪<br /> クリックしてね♪</span><br style="clear:both;" /></div>
</body>
</html>
そして貼り付けコードがコチラです。
<iframe name="usabi" id="usabi" title="blogpetbutton" src="usabi.htmlのアドレス" width="140" height="235" scrolling="no" frameborder="0" style="border-style:none; background: url(留守番背景アドレス) no-repeat center top;">iframeを使っています♪</iframe>
こちらで苦労したのはブログペットと更新ボタンの間に
異様な空間が出来てしまうことだったのですが、
iframeの幅、高さを広げることで回避できました。
「 」というのは半角スペースを表示するもので、
上の行と字の始まる位置を揃えるために入れました。
こちらも留守番背景を使われない方は青い文字の部分を削除してください。
自分でIE、Firefox、Operaのブラウザを全てチェックしましたが、
多分問題ないと思われます。
こちらのコードを使用される方はこの記事にコメント、
またはトラバでお知らせいただけますようお願いいたします。
くれぐれもバックアップはお忘れなく!!
↓応援よろしくお願いします。ペコリ(o_ _)ｏ))
2006/10/31 0:53 追記
iframeのコードの中にcenterという部分がありますが、
これはブログペットを中央ぞろえにしている場合のみです。
左揃えの場合はleft、右揃えの場合はrightにしてください。
よろしくお願いします。ペコリ(o_ _)ｏ))
2006/12/28 追記
ペットのリニューアルにより広告部分が広くなり、
この記事のソースのまま使うと広告が切れてしまいます。
以前よりも高さが120ピクセル長くなりましたので
その分iframeの中のheightを増やせばＯＫです。
広告が出ない状態で表示させるのは規約違反ですので
ご注意ください。(*- -)(*_ _)ペコリ
コメント
そもそもこの更新ボタンを考えついたまゆびさんがすごいんです。すごく便利だし。私はただズレを直しただけですから…。
兎にも角にも，たくさんの方に使ってもらえるといいですね！
Posted by naoK at 2006.10.29 22:37 | edit
本当にいろいろお世話になりましたー。ペコリ(o_ _)ｏ))
naoKさんの助言がなかったらずっとFirefoxでのずれに気がつかずに
使っていたことだろうと思います。(笑)
ランダム背景を設定している方には便利だと思うので、
このボタン設置してもらえると嬉しいなぁ♪(^ー^* )フフ♪
Posted by まゆび→naoKさんへ at 2006.10.29 23:09 | edit
お知らせありがとうございました。早速お邪魔しました♪
今夜は遅いので明日にでもじっくり取り組みますね。ととろはぴょんの方はボタンが上がよいので最初の位置を利用しますが、jerryの方はこちらも使ってみたいので下にしてみますね。
解説を理解しているとは言いがたいですが、まずはコードをコピペさせていただきますね。
あと、微調整のタグはとてもありがたいです。こちらはコピペしてテキストを取っておこうかしら？っていうくらいです。
本当に完成形のようなとてもたくさんの情報を盛り込んだ記事をありがとうございました。明日頑張ります。仕上がったらメッセは入れますのでよろしくお願いします。
Posted by ととろ at 2006.10.29 23:27 | edit
もちろん時間のあるときにじっくり挑戦されてくださいね!!
いつでもかまいませんよ!!
ぴょんちゃんは上の位置で、jerryちゃんは下の位置で
設定される予定なのですね♪
基本的にはコピペで大丈夫だと思うのですが、
ブログ、テンプレートによって上手くいかないこともあるかもしれません。
留守番背景がずれたり、枠内にボタンが表示されなかったりなどの
問題が起こる可能性があります。
微調整のタグがお役に立ったらいいのですけど♪(*^-^)ニコ
頑張ってくださいね♪Fight!!(ｏ^-^)尸~''☆ミ☆ミ
Posted by まゆび→ととろさんへ at 2006.10.30 00:10 | edit
連絡をして下さってありがとうございます。
さっそくアイコンが下にくるＨＴＭＬをアキラくんに使わせていただきましたｗ
更新ボタンって、本当に便利です。
まゆびさま、ありがとうございました♪m(_ _)m
Posted by わたる at 2006.10.30 12:07 | edit
アキラくんは下のボタンにされたのですね!!
更新ボタン、活用していただけているようで
本当に嬉しいです。
このボタンでアキラくんとどんどん遊んであげてくださね!!
Posted by まゆび→わたるさんへ at 2006.10.30 16:20 | edit
うん!!更新ボタンとかつけていない私にわかるのは、更新ボタンが下についたぁー!!!ってことと、軽くなったぁー!!!ってことだけなんですが・・・。
読んで、そうなのかぁ・・・。と思うこともあったりして・・・。
留守番背景とかもあるんだぁ・・・。
知らない事だらけだな・・・。
でも更新ボタンが下にあるのは、背景とか変えながら遊んでる私には便利♪
うふ☆
うん!!!下にあったほうがいいかも♪いいかも♪
Posted by enu at 2006.10.30 18:40 | edit
こんな記事にまでコメント書いていただいてありがとうございます。
軽くなりましたか？
それなら本当によかったです。
うさびとちょくちょく遊んでいるので、
いろいろ試行錯誤して出来るだけ楽しく遊べるようにしているのですが。
更新ボタン下の方が便利ですか!!
Ｏ(≧▽≦)Ｏ ワーイ♪ありがとうございます!!
見た目は上にボタンがあったほうが可愛いなぁって思うのですが、
下の方がバーが出なくて便利かなといきなり思いついたもので。(笑)
でもまだ下にあることに慣れず、
ついついマウスを上のほうへ移動させてしまいます。(爆)
Posted by まゆび→enuさんへ at 2006.10.30 21:18 | edit
ついにXHTML準拠しましたか！
お知らせしてくださってありがとーございまっす♪m(_ _)m ボタンを下にする理由って、メニューバーだったのですね。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
そう言えば、ボタンが上にあるため、メニューバーが更新の度にでてくるわけですね！たった今、気がつきましたよ♪((ﾟmﾟ;)アレマッ！
時間あるときにでも下に変更してみますね。それにしてもtableを使わずにdiv構成しているのですね。勉強になりますよ。(*^-ﾟ)vｨｪｨ♪
追伸：テンプレートがハロウィン仕様になったのですね♪
10/31まで使用するのですね。とても楽しい試みですね♪(*^-ﾟ)vｨｪｨ♪
Posted by yozo at 2006.10.31 00:15 | edit
かなーり遅くなってしまいましたが、
やっとＸＨＴＭＬに準拠したバージョンを出すことが出来ました!!
＞ボタンを下にする理由って、メニューバーだったのですね。
そうなんですよ。いっつも更新ボタンを押すたびに出てくるので
邪魔だなぁと思いまして。(笑)
今は間違えてついつい上の方へマウスを動かしてしまいますが(笑)、
そのうち慣れたら更新しやすくなるかな？と思っています。
yozoさんも下に変更ですね!!楽しみにしてます♪
＞tableを使わずにdiv構成しているのですね。
tableを使うとやっぱり重い気がしたので、
何とかならないかと頑張ってみましたよ。('-'*)フフ
そうなんです♪テンプレ変えてみました♪
明日までですが、存分にハロウィンを楽しもうと思っています♪ヽ(=´▽`=)ノ
嬉しいコメントありがとうございます♪ペコリ(o_ _)ｏ))
Posted by まゆび→yozoさんへ at 2006.10.31 01:06 | edit
お知らせ頂きましてありがとうございました。
こちらのバージョンアップ記事、全然気が付きませんでスミマセン^^;
早速、joeyの記事も書き換え、改めてこちらにもトラバ入れさせて頂きました。
ボタンは（ブログペットの宣伝広告が出ちゃうので^^;）今は、ペットの上についていますが、POCになったらボタンを下に付け替えようと思います^^v
ありがとうございました♪
Posted by joey at 2006.11.09 11:11 | edit
記事の書き換えとトラバありがとうございました。
上手くいったようで何よりです。
ボタンに関しては下にすると無料会員の場合
確かに広告部分がネックになりますよね。
個人的には上にボタンがあった方が可愛いような気もしているのですが、
バーが出てくるのが邪魔なので、下バージョンに変更してみたのでした。
Posted by まゆび→joeyさんへ at 2006.11.09 18:28 | edit
Posted by yolip at 2006.12.22 17:17 | edit
おお♪くるもちゃんに更新ボタンを設置されたのですね♪
私もウェブリブログで飼っているあすなとふわりにつけないといけないのに
放置してました。(゜ー゜;Aアセアセ
＞yolipは無料会員ですから、最新のJSの分の採用は見送っています。
そうですね。JSバージョンはPOCの方用ですので。
多分無料会員の場合はこちらの方が軽いと思います。
くるもちゃんの背景をこれでどんどん楽しんでくださいね♪(*'-')
Posted by まゆび→yolipさんへ at 2006.12.22 19:41 | edit