日本を出る前後、昨年の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>
Y:
Comments