Tumblr でスライドショー

しつこく Tumblr ネタですみません（笑）
前回 Tumblr の 写真のサムネイルをブログのバナースペースに表示させてみました。あれから CSS を修正してマウスオーバー時のサムネイル拡大表示を見やすくしてみました。いい感じです。
さて次の野望？はスライドショー！
ここまで来たら Tumblr の写真をスライドショーで見たいと思うのが自然の成り行きです（ほんとか？）

今回使用するのは、これですヽ(*ﾟ▽ﾟ)ノ

tumblr image slideshow　/　Yahoo! Pipes

Yahoo! Pipes というのは 視覚的にモジュール同士をパイプで繋いでWebサービスをマッシュアップするという画期的で便利なツールです。
いろんな人たちが素敵な Pipes を公開しているのでそれを利用させてもらいましょう。今回の Pipes もそのうちのひとつ。

まずは上記リンクの Pipes のページを開き、テキストボックスに Tumblr のユーザー名を入れます。
僕の場合は uchiy なのでそれを入力して「Run Pipe」ボタンをクリック。
どうでしょう？スライドショーが表示されたでしょうか？

さてこのスライドショーを自分のブログに表示するにはどうすればよいでしょうか。
Yahoo! Pipes には バッジ という ブログパーツのように簡単に自分のページに貼り付けられる機能があります。これを使用して組み込みます。

まず先ほど実行したスライドショー画面の左上にある「Get as a Badge」ボタンをクリック。すると小さなウインドウが開きます。

デフォルトのスライドショーは枠の高さが低くて縦長の写真が切れて表示されてしまいます。なので少しカスタマイズを入れてみましょう。
ウィンドウ上の並んだアイコンの上にある「Customize the size, type and settings of your Badge」をクリックします。
プルダウンメニューで「image」を選択、自分のユーザ名を入れて、Height に ピクセル値を入れます。僕は 600 を設定しました。Width はお好みでどうぞ。
「Next」をクリックするとカスタマイズ完了です。
最初の画面に戻るのでアイコンメニューから「Embed」を選択します。（TypePad などメニューに用意されているシステムを使ってる人はそれを選択）
下に JavaScript のリンクが表示されるのでそれを自分のブログにコピペして出来上がり！ね、簡単でしょ。:-D

貼り付けた結果は以下のようになります。

僕はもう少しカスタマイズをしたスライドショー用のページを用意して自分の Tumblr ページにスライドショーのボタンリンクをつけてみました。ボタンをクリックするとスライドショーが表示されます。

↑クリック

どんな感じでしょうか。:-)

この専用ページを iPhone で見てみたら問題なく表示されるのが確認出来ました。
iPhone を 横向きにしてスライドショーを見るとなかなかいい感じです♪

Tumblr ライフ ますます楽しくなりそうです！(≧∇≦)b

投稿者 うっちー : 2008年8月 3日 22:29 | コメント (10) | トラックバック (1)