日本を出る前後、昨年の9月頃から、このページでグーグルのAdsenseを利用しています。使いこなしていないせいか、広告収入が100$に達するのに、あと数年はかかりそうなペースです。さて、この広告表示は、JavaScriptのdocument.writeを使ってインラインフレーム(IFRAME)で書き出すということをしています。前回のエントリーで使用しているBLOCKQUOTEのボーダー枠を演出するJavaScriptの実行タイミングが遅いなと感じていたんですが、原因は、このdocument.writeの存在でした。ちょうど2年前に、これに関するエントリー (document.write()の実行タイミングをずらす方法)を書いていたのを思い出し、早速、このサイトにも適用させてみました。
効果はてきめんで、先にBLOCKQUOTEの装飾が終わり、その後、Google Adsenseが表示されるようになりました。ppBlogでは、DOMの構築が終わるタイミングで実行されるJavaScriptが多いので(これはドキュメントの読み込み完了前に実行される)、document.write()に起因する描画遅延対策は大切ですね。
具体的に行った対処法は、シンプルです。テーマのtemplate.phpを弄ります。このサイトのベーシックなテーマでは、左側のカラム(サイドバー)にGoogle Adsense用のDIVタグ(IDはgoogle-ads)を用意してます。
<div id="google-ads"> /* この中にグーグルからの広告用javascriptを貼り付けている */ </div><!--#google_ads-->
で、この中身を以下のようにします。既存のグーグルのコードをいじることはないです。
<div id="google-ads"> <script type="text/javascript"> (function (){ var alts = []; d._write = d.write; /* オリジナルのdocument.writeをコピーしておく */ d.write = function(s){ alts.push(s);}; /* 新たにdocument.writeを定義。ここでは、単に配列に入れるだけ */ oParts.start(function(){ /* DOM構築完了のタイミングで実行されるように登録する */ o("#google-ads").html(alts.join("")); /* 配列に入れた本来のdocument.writeの中身を書き出す */ d.write = d._write; /* オリジナルのdocument.writeに戻す */ }); })(); </script> /* 以下、既存のコード */ <script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXX"; google_ad_slot = "XXXXXXXX"; google_ad_width = 180; /* 広告の幅 */ google_ad_height = 150; /* 広告の高さ */ //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> </div><!--#google_ads-->
基本的には、これでOKです。後は、予め広告のサイズが分かっているので、見栄えとしてCSSファイルを少しいじるだけです。このサイトでは以下のように指定しています。
#google-ads { margin: 70px auto 0 10px; padding: 0; width: 180px; /* 広告の幅に合わせる */ height: 150px; /* 上と同様に */ }
ちなみに、このサイトのwebRing は、「ページ作成機能」を使って作っていますが、表示スクリプトはBlogPeopleさん のを利用しています。ここでもdocument.writeが使われているので、それに対処した記述をしています。その中身をさらしておきます。
<div class="center" style="color:#2f4f4f;"> <h2>ppBlog's webRing</h2> <p style="padding:1em;font-size:14px;width:300px;margin:auto;"> ppBlog使いの方々です。随時募集中。 <br />多分に見落としなどもあると思いますので,このサイトもお願いしますというのがあれば 気兼ねにメール下さい。自薦他薦問いません。</p> <div id="_webRing" style="margin: 2em auto;width:300px;text-align:left;"></div> /* ここから */ <script type="text/javascript"> (function (){ var alts = []; d._write = d.write; d.write = function(s){ alts.push(s);} oParts.start(function(){ o("#_webRing").html(alts.join("")); /* 上で用意した DIV#_webRing に流し込む */ d.write = d._write; }); })(); </script> /* ここまでがポイント */ <script type="text/javascript" charset="utf-8" src="http://www.blogpeople.net/display/usr/0f0d40535b5b4103.js"></script> </div>
Comments