あけび猫のブログ

ブログパーツをページの途中に挿入すると、そのブログパーツの応答が遅くなった時に、そのページのブログパーツの挿入場所以降の部分がなかなか表示されないことがあります。その場合、ブログパーツをページの最後に挿入すれば、ブログパーツの応答が遅くなっても、そのページのブログパーツ以外の部分は直ぐに表示されるようになります。単純にブログパーツをページの最後に挿入するだけだと、ブログパーツはページの最後に表示されるので、これをページの任意の場所に表示させる方法を考えてみました。

<div class="sidebar">
<dl class="sidebardl">
<dd style="text-align: center; padding: 10px;" id="pet_blogpet"></dd>
</dl>
</div>

上記はあけび猫のブログのブログペットが表示される部分のソースコードです。

あけび猫のブログのサイドバーは定義リストで実現されていて、「<dd style="text-align: center; padding: 10px;" id="pet_blogpet"></dd>」の部分にブログペットが表示されます。ここでミソなのは、「id="pet_blogpet"」という風にid属性を設定しているところです。あけび猫のブログでは定義リストを使っていますが、他のブログで、テーブルや<div>を使っていたりしても、id属性が設定できればよさそうです。

<div style="visibility: hidden; width: 0; height: 0; overflow: hidden;">
<div id="cont_pet_blogpet">
<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/48f6e236b9f09ffc31279ecf8238c45f.js" charset="UTF-8"></script>
</div>
</div>
<script type="text/javascript">
<!--
e = document.getElementById("pet_blogpet");
if(e) e.appendChild(document.getElementById("cont_pet_blogpet"));
// -->
</script>

上記はあけび猫のブログのフッター部分のソースコードの一部です。この部分でブログペットを読み込んでいます。

「<div style="visibility: hidden; width: 0; height: 0; overflow: hidden;">」とすることで、読み込んだブログペットをこの位置では表示しないようにしています。そして、「<div id="cont_pet_blogpet">」により、読み込んだブログペットにid属性を設定しています。続いて、「e = document.getElementById("pet_blogpet");」により、先に設定したブログペットが表示される部分の要素を取得しています。最後に「if(e) e.appendChild(document.getElementById("cont_pet_blogpet"));」により、ブログペットが表示される部分の要素にブログペットを追加しています。

あけび猫のブログではこの手法を、ブログペットとアマゾンアソシエイトに使ってみています。ビッダーズアフィリエイトは元々iframeを使っているので、この手法と組み合わせても意味なさそうです。グーグルアドセンスはこれをやると何故か豆腐が表示されます。

効果のほどは、今の所、快調みたいです。