caramel*vanilla » TumblrのReblog Notesをlightbox風に表示してみた。

RSS Feeds

Posts

Posted on March 28, 2008 at 2:30 am

TumblrのReblog Notesをlightbox風に表示してみた。

Reblog Notes機能が楽しい

他ユーザーのReblog履歴がDashboardで確認できる「Notes」機能はとても面白いです。
自分がPOSTしたものが広がっていく経路がわかったり、似た趣味のユーザーを見つけやすくなっています。
Dashboardで「You and ** other person reblogged」の文字を見るとついついクリックしてしまいます。
このReblog NotesはDashboard外のいわゆる「表」でも確認することができます。
(TumbleユーザーならDashboardが「表」という認識かもしれませんが :-P)

Reblog NotesについてはこちらのPOSTが詳しいです↓

Untitled Shanti - Reblog notes script >> Reblog notes variables

http://www.tumblr.com/dashboard/notes/{PostID}/ユーザーID

テンプレートに上記のリンクを追加すればPOSTごとのReblog Notesを誰もが確認できるようになります。
ランダムな9文字のユーザーIDはDashboardのソースから確認できるそうです。

ページもlightbox風にポップアップしてくれるLightWindow

「表」面でもReblog Notesが見れるようになり便利になったのですが、いちいち別ページに飛ばなければならないのがちょっと面倒です。
その場でサッと確認したくていろいろ試行錯誤しました。
Dashboardと同じようなアコーディオン形式のエフェクトで表示させたかったのですが、Reblog Notesのテンプレートがわからなかったため実現できず。
諦めてlightbox風にポップアップ表示させることに。
画像だけではなくHTMLもポップアップしてくれるライブラリはたくさんあったのですが、いろいろ試した結果LightWindowを使うことにしました。
LightWindowはlightboxの高機能バージョンともいえるライブラリで、画像だけではなくページ内のdiv要素やFlash,PDFなどのファイルもポップアップ表示してくれます。
当初の思惑とは異なりますが、その場で確認するという目的は達せられたのでこれでよしとします。

Reblog NotesをLightWindowで表示する

TumblrでLightWindowを使う手順をメモ。

ライブラリのダウンロード

LightWindowからlightwindow.zipをダウンロードして解凍

画像のパスを修正しアップロード

CSSとJSファイルの画像パスは絶対パスに修正してから「css」「images」「javascript」の各フォルダをアップロードします。
CSS修正箇所(lightwindow.css)は全部で7箇所
JS修正箇所(lightwindow.js)は全部で3箇所

最初CSSしか修正していなかった為、ローディング画像が表示されずに焦りました。

テンプレートにコードを追加

アップロードした環境に合わせて修正した以下のコードを<head>～</head>内に追加

PLAIN TEXT

CODE:

<script type=“text/javascript” src=“javascript/prototype.js”></script>
<script type=“text/javascript” src=“javascript/scriptaculous.js?load=effects”></script>
<script type=“text/javascript” src=“javascript/lightwindow.js”></script>
<link rel=“stylesheet” href=“css/lightwindow.css” type=“text/css” media=“screen” />

Reblog Notesへのリンクを追加

場所はお使いのテンプレートにも寄りますが{/block:Posts}の上辺り。
ポップアップするウィンドウサイズはlightwindow.jsのデフォルトサイズを修正するか、パラメーターで指定できます。

PLAIN TEXT

CODE:

<a href=“http://www.tumblr.com/dashboard/notes/{PostID}/ユーザーID” params=“lightwindow_width=500,lightwindow_height=400″ class=“lightwindow page-options”>Reblog Notes</a>

ユーザーIDは自分のものに書き換えてください。
以上でポップアップ表示は完了です。

ユーザーCSSでDashboard風のデザインにする

Reblog Notesのページは素のHTMLなので見た目がちょっと味気ないです。
自分用にStylishでユーザーCSSを適用して見た目をDashboard風にしてみました。

Tumblr - Reblog Notes Styler | userstyles.org

適用前

適用後

これでかなりいい感じに。
でもできればみんなに同じスタイルで見て欲しいなぁ。

ツリー形式で表示する

Reblog Notesのリンク先を Tumblr Reblog Tree を利用したURLにするとReblog遍歴をツリー状にして表示してくれるのでこれもまた面白いです。

PLAIN TEXT

CODE:

<a href=“http://stone.dialog.jp/tumblr/notes/{PostID}/ユーザーID/ユーザーネーム” params=“lightwindow_width=500,lightwindow_height=400″ class=“lightwindow page-options”>Reblog Notes</a>