久しぶりに Tumblr の HTML テーマをイジってみたところ、新しい発見があった。そこで、 Tumblr に投稿した画像を Lightbox エフェクトを使って格好良く表示する方法を書いてみる。

そもそも Lightbox とは？

Lightbox とは何ぞや？という人ももちろんいるだろうから簡単に説明すると、画像を画面の真ん中に表示して画像以外を目立たなくするエフェクトのこと。

Tumblr でいうと、新しめの HTML テーマを使っている場合に、フォトセット投稿、あるいはパノラマ投稿した画像をクリックすると、その画像が Lightbox 表示される。

ただし、単純な写真投稿の場合には Lightbox 表示されないので、今回はこの場合にも Lightbox 表示されるようにテーマをイジってみよう。

Lightbox 表示されるように HTML テーマをイジる

そもそも Tumblr の画像投稿には、単純な写真投稿 (Photo Posts) や複数枚をアップロードできるフォトセット投稿 (Photoset Posts) があり、そして、いつの間にかパノラマ投稿 (Panorama Posts) なんてものも増えていた (2013年01月17日のスタッフブログの記事に説明あり)。

さきほども書いた通り、このフォトセット・パノラマ投稿した画像をクリックすると、大きく Lightbox 表示される。このとき何が起こっているかというと、テーマに自動的に挿入されたスクリプトの関数が実行され、これによって画像の Lightbox 表示がされているわけだ。

そこで、単純な写真投稿の場合にもこの関数を実行するように HTML テーマを書き換えてみよう！

単純な写真投稿についてのブロックを探す

まずは、 Tumblr のカスタマイズページに移動し、 Custom theme の横にある Edit HTML を開く。表示した HTML ソースから以下のように書かれたところを探す。

{block:Photo}
  …
  {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}" />{LinkCloseTag}
  …
{/block:Photo}


あるいは、テーマによってはこのようになっているかも。

{block:Photo}
  …
  <a href="{PhotoURL-400}"><img src="{PhotoURL-400}" alt="{PhotoAlt}" /></a>
  …
{/block:Photo}


HTML テーマを書き換える

そうしたら、このように書き換える。

{block:Photo}
  …
  <a href="{PhotoURL-HighRes}" onclick="Tumblr.Lightbox.init([{
    'width'    : '{PhotoWidth-HighRes}',
    'height'   : '{PhotoHeight-HighRes}',
    'low_res'  : '{PhotoURL-400}',
    'high_res' : '{PhotoURL-HighRes}'
  }]); return false;"><img src="{PhotoURL-400}" alt="{PhotoAlt}" /></a>
  …
{/block:Photo}


ちなみに、{PhotoURL-400}の部分は、元のテーマによって値が異なっている場合があるよ。

良き Tumblelog ライフを

以上！やることはたったこれだけ。

画像をクリックすると、大きく表示されるようになったはず。何も導入することなく、 Lightbox 表示できるというのが味噌だね。

というわけで、これでより良い Tumblelog ライフを送れるようになった。良い！