Zooomrの写真をブログに表示しよう： 公式widget編

今回はクリストファー氏が作成した公式widgetを使って、Zooomrの写真をブログに表示する方法をご紹介したいと思います。

こちらのページに3種類のスクリプトが載っていて、下の方にはこのwidgetを表示しているブログ一覧もあります。


まず、All Zipline Activity(写真とチャット両方表示）がこちら。

Photos Only がこちら

Chat Onlyがこちらになります。

基本的な作成方法は

<script type="text/javascript" src="http://www.zooomr.com/zipline/widget/USERNAME"></script>

USERNAMEの部分をZooomrでの自分のユーザ名にするだけです。

ttp://jp.zooomr.com/shigekicks/　←アドレスのこの部分の名前で、僕ならshigekicksです。


これだけでも完成となるのですが、かなり縦長になります。
スペースが合えばこれで完了でいいのですが、

上の三例では、

<div style="overflow:scroll;height:400px;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

この青い部分を追加してあり、divという範囲で高さ400pxに収まりきらなかった部分はスクロールさせるという意味になります。
この部分の高さをブログのスペースに合わせて自由に変えて頂くといいかと思います。

なお、widthで幅まで決めてしまうと、Firefoxと他のブラウザで表示幅が全く違ってしまい、Firefoxでピッタリでも、IEでははみ出してしまうという事が起こるので指定しない方がいいと思います。


またこれに加えて、

<div style="overflow:scroll;height:400px;border:solid 1px #CCCCCC;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

この紫の部分を追加して頂くと、全体を太さ1pxの#CCCCCCという色の固形(solid)の線で囲むという意味になります。

それがこちらになります。

この線や色をお好みで変えて頂くといいかと思います。
色についてはこちら、線についてはこちらがわかりやすいかと思います。



さらになんですが、背景色を変えて頂くと、また違った感じになります。

<div style="overflow:scroll;height:400px;border:solid 1px #CCCCCC;background-color:#FFFFCC;"><script type="text/javascript" src="http://www.zooomr.com/zipline/widget/shigekicks"></script></div>

このオレンジの部分になりますが、背景を#FFFFCCという色にするという設定になります。
それがこちらです。

このように、自分の好みでカスタマイズしていく事も出来るので是非ブログに表示してみて下さい。