[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 スナップ用途だけではもったいないかな。

[WEBサービス]Tumblr に Language 設定が出現

Tumblr の設定に Language という項目が出現し、日本語が選べるようになったみたい。 (参考)

具体的な設定の仕方は、 Tumblr のカスタマイズページを開き、 Advanced の Language という項目で Japanese を選択するだけ。

ただ、これはテーマの言語についての設定なので、つまり残念ながら Dashboard が日本語化される!といったことではないよ。「Archive」が「アーカイブ」と表示されたり、「home」が「ホーム」と表示されたり…ということらしい。

これから、この Language の設定に対応したテーマが出てきたり (あるいはもう出てるのか) 、とにかく知っておくと便利かもしれない。

sima は Tumblr を応援していますw

プロフィール

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日)

のカレンダー