こんにちは。paperboy&co.の鈴木です。

うー、寒い！東京にも本格的な冬が訪れました。こんな季節は、コタツに潜り込んで、煎餅と熱いお茶に限る・・・なんて気持ちをちょっと押さえて、春のキャンペーンシーズンに向けて「ブログパーツ制作のノウハウ」を覚えちゃう、なんていうのは、いかがでしょう。

長めの前置き１　～ブログパーツって？～

今では、当たり前のように配布されるようになった「ブログパーツ」。みなさんもご存じですよね。ブログのサイドエリアに置かれる、幅160px、高さ240pxほどのFlashコンテンツです。その大きな魅力は、パーツを設置してくれた方のサイト上にパーツ配布者側からリアルタイムに情報を配信できるところです。

ブログパーツによっては、マウスオーバーやクリックによってページ全体にイメージが重なってくる「フローティング」タイプのものもあり、表示エリアが小さいブログパーツにおいては、この「フローティング」タイプが人気のテクニックとなっています。

　　
デジタルスケープ「ウェブシネマ小説」（左）
こまねこブログパーツ（中）
プチフォトティッカー(右)

• デジタルスケープ「ウェブシネマ小説」
• こまねこブログパーツ
• 富士急ハイランド「ガンダムクライシス」
• プチフォトティッカー

長めの前置き２　～ブログパーツの設置方法～

ブログパーツの一般的な利用方法は、いたってシンプル。外部JavaScriptファイルを読み込むためのHTMLタグを記述するだけです。

// HTMLの記述例
<script src="http://wd.dsp.co.jp/DSCN/Ticker.js" charset="Shift_JIS"></script>

この記述から読み込まれたJavaScriptによってブログパーツのすべての動作が実行されるのですが、見た目のシンプルさに対して、作る側では予想を超える面倒な処理と落とし穴が待っています。

本コラムでは、２回にわけて今まで語られることの少なかった「フローティングブログパーツ」の作り方をわかりやすくご紹介します。