tikeda's blog

Flower, Plant, Travel, Design, My life stories

RSSモジュールを展覧会っぽく演出

RSSモジュールで表示した写真を横スクロールで展覧会っぽく演出してみました。最近、ダイアリーのヘッダーを触っていて、何かヘッダーを使っていつもと違った見せ方が色々できそうだな〜と思いやってみました。普段ダイアリーのデザインをする時はテーマにする事が念頭にある為、「モジュール=サイドバーに並べる」と考えてしまってますがその辺を考えず試してみました。


一見複雑そうですが、ヘッダーにモジュールを挿入しdivタグで囲んだだけで、後はCSSです。

<div id="art">
<hatena name="rss" url="http://f.hatena.ne.jp/domu/rss"
 template="hatena-photo" moduletitle="Okinawa Photo">
</div>
<div class="main">

CSSは、やっつけで、引き続きいじる予定なので日記には書きませんが、このページのソースを見てもらえば /*美術館風*/ の後が必要なCSSです。表示内容が変わる事があるかもしれませんが、やってみたい方がいらしたらコピーして試してみてください。一応最近のWin IE,Win Firefoxでは崩れてないと思います。


もちろんFotolife以外にも、はてなブックマークのコレクションはてなマップなどのRSSでも同じように見せられます。展覧会のシチュエーションだけじゃなく、カードにしたり本棚にしたり、とかもできそうなので、試しにやってみてもいいかもと思ってます。
※背景に花瓶や銅像が置かれてたり、人が見てたりとか小細工も作ってみよう。