[WEBサービス]Tumblr で画像を Lightbox 表示!(しかも何も導入せずに)

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

そもそも Lightbox とは?

Tumblr で画像を Lightbox エフェクトを使って表示したところ

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

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

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

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

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

さきほども書いた通り、このフォトセット・パノラマ投稿した画像をクリックすると、大きく 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 ライフを

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

かわいいどうぶつ (zoo.tumblr.com) の画像を Lightbox 表示したところ

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

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

OLYMPUS XZ-1 | Amazon

最近、 OLYMPUS XZ-1 というコンパクトデジタルカメラを買った。

このカメラは2011年に発売されたもので、既に XZ-2 という後継機が発売されているという、まぁ新しくはない機種だ。

とはいえ、今まで使っていたデジカメは更に古い2009年発売のものだったし、カメラに詳しくない sima が最新型の機種を追っても仕方がないかなと思ったのでコレにした。デザインが格好良すぎて気に入ったというのもある。

実際に使ってみると、今までの普及型コンデジの写真とは写りが格段に違っていて驚いた。高級コンデジとは如何なものかと思っていたけど、素人目でもこんなに違うのが分かるんだね。びっくり。

正直、今まで全然気にもしていなかった OLYMPUS 、いやオリンパスさんを一気に好きになりつつある今日この頃w スナップ用途だけではもったいないかな。

Tumblr で画像を Lightbox 表示!(しかも何も導入せずに)へのコメント一覧

yoyoのコメント

はじめまして。上記のエフェクトが軽快でぜひ使わせていただきたいのですが、ひとつ質問でLightboxで開いた拡大画像の下にキャプションを入れることは可能でしょうか?可能であればご指南いただけると幸いです。よろしくお願いします。

simaのコメント

コメントどもです。
これは何かスクリプトを導入して Lightbox 表示しているわけではなく、 Tumblr 側で自動的に読み込まれるスクリプトを(勝手に)利用して、通常の写真投稿でも Lightbox 表示するように設定するというハックです。それでそのスクリプトを軽く見た限りでは、おそらくキャプション表示はできないように思いました。
もしできたら確かに便利そうなのですけどね〜。

jump-upのコメント

なんで、単体画像だけモーダル表示にならないのかと思っていました。
早速、モーダル表示できるようになって幸せです。ありがとうございました。
メインブログでは、colorboxを使っていますが、lightboxの単純明快なモーダル表示もおつなものですね。

simaのコメント

写真、画像が主の Tumblelog では、それらを大画面に表示できるとリッチな感じがして良いですよね。導入した当初は、グリグリと無駄に表示・非表示を繰り返してしまった記憶がありますw
記事が役に立って良かったです。

Tumblr で画像を Lightbox 表示!(しかも何も導入せずに)へのコメントを書く

コメント : 4件

Tumblr で画像を Lightbox 表示!(しかも何も導入せずに)への言及をする

埋め込みリンクタグ
<a target="_blank" href="http://f-u.seesaa.net/article/348813697.html">Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) : full of universe</a>

トラックバック : 0件

プロフィール

sima

ガジェット大好き。おもしろアイテム大好き。いろいろとまぁ物欲を刺激するモノが多いけど、なかなか手に入れることができないでいる。いつかは自分の部屋を、自分が気に入ったモノだけで埋め尽くしたいものだなぁ。…あっ、これ将来の夢ね。

Twitter はフォロー大歓迎なのでよろしく。よく蚊と戦ってるよ。

最新記事

  1. OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開 (05月25日)
  2. シカ成分を補充したら幸せになった (04月24日)
  3. ブログを(内部的にガッツリと)リニューアルしてみた (12月10日)
  4. 補完モードを開始するマッピングを書く (10月25日)
  5. アボカドを育ててみた…かった (07月23日)
  6. 正規表現クロスワードを完全クリアしてみた (07月19日)
  7. Gmail バックアップソフトの Gmvault が動かないときの解決法 (07月14日)
  8. Google アカウントが消える前に! Gmail フルバックアップのススメ (06月30日)
  9. 厳選して使っているポイントサイト2つ (03月27日)
  10. Tumblr で画像を Lightbox 表示!(しかも何も導入せずに) (03月21日)

カテゴリ

アーカイブ

コメント

Gmail バックアップソフトの Gmvault が動かないときの解決法
dsfds (03月31日)
OpeTumblr の Opera Extensions (拡張機能) 版を密かに公開
sima (06月26日)
you (11月30日)
you (11月30日)
sima (10月28日)
HTML ソースの改行を半角スペースにしない方法
ok (06月21日)
sima (05月28日)
edvakf (05月28日)
英数字・記号を並べてみる
ふぁ (11月25日)
コメハチ (11月02日)
OperaでもっとTumblrる!(OpeTumblrをまたまた改良)
you (05月09日)
sima (05月07日)
you (05月04日)
chikuwa (12月12日)

トラックバック

20代で知っておくべき週番号のこと
full of universe (05月16日)
UKTenkiを自動巡回させてみる(MortScript)
なんとなくすばらしい日々の戯れ言 (01月31日)
新着メールを一気に開くMortScriptを改良!
PDAと私生活 (11月07日)
PDAと私生活 (11月02日)
コイツはすごい!Windows Live Writerでブログ投稿をラクラクに
シーサーイーサー (10月31日)
Willcom03で新着メールを一気に開く!(MortScript)
PDAと私生活 (10月10日)

のカレンダー