2011年02月14日

美人時計のブログパーツで余分な余白を消す!

群馬美人時計がリリースされまして、ブログパーツを貼る方法を紹介させてもらいました。

群馬美人時計がリリースされたからブログにパーツを貼ろう!
http://blog.livedoor.jp/dmatsu2005/archives/51909274.html

続いて、僕自身も以前から気にかかっていた無駄な余白問題について@nyoeさんが、その回避方法を紹介されていました。

美人時計ガジェット設置にワンポイントアドバイス
http://d.hatena.ne.jp/nyoe/20110203

しかし、それでもうまくいかない、というコメントをいただいておりまして、詳しく調べてみました。
僕の場合は群馬美人時計の方は大丈夫だったのですが、本家の美人時計の方がおかしい、という状況でありました。

美人時計 無駄な余白


これはGoogleガジェットの問題のような気もします。ソースを見ると、iframeのstyleに「height:320px;」が書き込まれてしまっているのです。さーて、どうしたものか、という訳なのですが、Javascriptで処理しちゃえ(heightを消しちゃう)ってことで、早速スクリプトを書いてみました。
<script type="text/javascript">
// 美人時計の白い部分を消すJavascript
var remove_whitespace = function () {
    this.style.height="";
};
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
    if (iframes[i].src.indexOf("url=http%3A%2F%2Fbijint.com",0) >= 0) {
        if(iframes[i].addEventListener) {
            iframes[i].addEventListener("load", remove_whitespace, false);
        } else if(iframes[i].attachEvent) {
            iframes[i].attachEvent("onload", remove_whitespace);
        } else {
            remove_whitespace();
        }
    }
}
</script>

jQueryに慣れすぎてて、久しぶりにJavascirptネイティブなソースを書くと、いろいろ忘れていることがありますね。ググりまくってしまった(笑)

具体的に、どうやって貼るのか、ということになりますが、美人時計をブログパーツとして貼った画面で、<script src="..."></script>というのを入力したはずです。その下に、上記のソースを書き加えてください。
僕のブログのように、複数個の美人時計ガジェットを貼っている場合でも、そのページで読み込まれるべき美人時計の最後の一つ(一番下になる美人時計と考えてもいい)に貼れば機能します。

どうぞお試しください!


dmatsu2005 at 00:45コメント(2)トラックバック(0) 
テクニック 

トラックバックURL

コメント一覧

1. Posted by G-BUILD   2011年03月11日 12:03
はじめまして!
貴重な情報ありがとうございます!!!

私も余白部分に悩んでいて試してみたのですが、最初は2回に一度余白が消えましたが、また機能しなくなってしまい、余白の部分が出てしまっている状態です(泣)

Firefoxでは綺麗に出ている様ですが、IEとSafariでは余白が出てしまいました…。

私の記述が間違っているのかと調べましたが、原因が何かわかりませんでした。

考えられる事があれば教えて戴ければと、おこがましくもコメントさせて戴きます。
宜しくお願いします!
2. Posted by アロハ   2011年04月28日 00:16
> Firefoxでは綺麗に出ている様ですが、IEとSafariでは余白が出てしまいました…。

ごめんなさい。IEとSafariでもちゃんと動くようにするためには、remove_whitespaceの無名関数を修正する必要があります。
この記事にトラックバックした記事をアップロードしましたので、ご確認ください。

コメントする

名前:
URL:
  情報を記憶: 評価:  顔   星
 
 
 
livedoor プロフィール

アロハ

痩せないと死ぬよっていう宣告を受けてしまったので、ダイエットに目覚めたプログラマー(約95kg)

広告

レンタルサーバーなら使えるねっと


Google AdSense
Google検索
訪問者数
  • 今日:
  • 昨日:
  • 累計:

オススメの書籍