フローティング型のブログパーツを作ろう

2009年2月20日(金)
山下 美緒

フローティング型のブログパーツを作ってみよう!

 今回は、画面全体をFlashで覆うようなフローティング型のブログパーツを作ってみましょう。

 前回までの記事では、ブログのサイドバーに表示する小さめのブログパーツについて解説してきました。サイドバーに常駐するブログパーツの場合は、いつでも気軽に情報をチェックできるなど、とても手軽に使うことができます。しかし、どうしてもサイドバーの横幅(通常は160px前後)以内のサイズで制作しなければなりません。

 そのため画面全体を使った演出を行い、強いインパクトを与えたい場合などは、今回のようにフローティング型のブログパーツを作ることで、より自由な表現を行うことができます。

 制作者にとっては、パーツの大きさの制限がなく画面全体を自由に使えますので、フローティングのブログパーツが魅力的に感じられるかもしれません。しかし、フローティングのブログパーツは、ブログの記事を読みにきた読者にとっては、読みたい記事を隠してしまう邪魔な存在ととらえられてしまう可能性もあります。

 それぞれのブログパーツの用途や目的に応じて、フローティング型がよいか、サイドバーの常駐型のブログパーツがよいか、どちらがユーザーに喜ばれるかを吟味して企画を考える必要があります。

 またフローティング型のブログパーツを採用した場合は、下記のよう
な配慮を行うこともできますので、検討してみてください。

・常に「閉じる」ボタンを表示し、ユーザーがいつでもブログに戻れるようにする
・初回時のみフローティング表示し、二度目以降はフローティング表示をさせない

 とはいえフローティング型のブログパーツは、表示領域が限定されない分、ふだん見慣れているブログページを舞台にして、楽しい仕掛けや驚くような演出を加えることができますので、ぜひユーザーに喜んでもらえるようなブログパーツを考えてみてください。

ブログページ全面を使って時計を表示してみよう!

 今回は、「世界のWeb広告賞を総なめにしたアノ時計!」風のサンプルを作成してみました。こちらをもとに、フローティング型のブログパーツについて解説していきたいと思います。

 まず、作成するサンプルの仕様について解説します。今回もサンプルデータがありますので、ぜひダウンロードしてください(858_1.zip/378 KB)。

 まず、サイドバーにあるバナー(画像)をクリックすると、フローティングでブログパーツが表示されます。

 フローティングのブログパーツが表示されている間は、以下のシーンを繰り返します。

・1秒ごとに画面の色が切り替わりながらブログの中央に時計が表れるシーン
・時計表示が消えて元のブログが表示されるシーン

 なお今回のブログパーツの制作にあたって、弊社とcshoolが共同で開発・運営している「くるくるパーツ(http://parts.kuru2jam.com/)」のサイトで配布しているブログパーツの制作キットを利用・改造しています。

株式会社ピクルス
大学卒業後、JAの金融窓口の事務を2年間行った後、一念発起しWebの世界へ飛び込む。eラーニングコンテンツの制作会社やWeb系の制作会社を経て、2007年より(株)ピクルスに勤務。現在は、広告キャンペーン系のサイトの企画/制作、特にFlashやXHTML/CSSなどのWebコンテンツ全般の実装を行っている。ブログパーツを中心としたデジタルアイテムの配信サイト「くるくるパーツ(http://parts.kuru2jam.com/)」も運営中。最近は、上越線が気になっています。
http://www.pickles.tv/

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています