Tumblrのテキスト投稿でLightBoxを独自導入して使う

Tumblrにはbuilt-inのLightBoxがあり、カスタムHTML編集で簡単に導入することができる。以下のサイトで紹介されているのがこれを用いた方法。

f-u.seesaa.net

しかし、これはどうも写真投稿限定のようで、テキスト投稿になると画像のURLやサイズをbuilt-inのLightBoxに引き渡すことができなかった。似たような質問が英語記事だが紹介されている。

Unfortunately, if you’re using the built-in Tumblr lightbox for photosets there’s currently no way to apply it to single photos as well. What you can do is apply your own lightbox (eg. View.js) to single photos.

テキスト投稿はカスタム編集を見ていると、入力したHTMLソースをそのまま記事に渡しているようで、読み込んだあとにDOM操作してLightBoxのタグを付与しようとしても、画像のサイズや解像度を{block:Posts}の外側から{PhotoWidth-HighRes}の変数で取得することができず、built-inのLightBoxのポップアップが立ち上がらなかった。カスタムテーマ用の変数は以下を参照。

Tumblrカスタムテーマの作り方：日本語訳（Creating a custom HTML theme | Tumblr）

{block:Posts}に入れ子になっている{block:Photo}や{block:Photos}も写真投稿用のブロックで、例えばブログのようにテキスト投稿で間に画像を挿入しながら書いていくという形式だと{block:Text}で読み込まれるようだ。{block:Text}において挿入されている画像をTumblrが用意した変数で取得することは不可能なので、テキスト投稿で入れた画像にLightBoxのような”味付け”をする場合は、結局のところDOM操作が必要になる。

結論からいうと、テキスト投稿で埋め込まれた画像においてLightBoxを導入することは可能だ。ただし、Tumblr側が用意したbuilt-inのLightBoxではなく、一からLightBoxを導入する必要がある。

LightBoxの導入

まずはLightBoxの公式サイトにアクセスし、LightBoxをダウンロードする。

lokeshdhakar.com

英語になるが、公式のGetting Startedに目を通して使い方に慣れるといいだろう。

ダウンロードしたlightbox2-master.zipを解凍する。必要なファイルは、

dist/css/lightbox.css
dist/imagesのフォルダにある画像ファイル（close.png, loading.png, next.png, prev.png）の4つすべて
dist/js/lightbox.js

この3種類だ。LightBoxはjQueryを使用し、jQuery同梱版のLightBox（lightbox-plus-jquery.js）もあり公式チュートリアルではそれの使用を推奨する旨もあったが、自分の環境では同梱版を使うとTumblrでjQueryを使用するプラグインと衝突するバグが発生したため、CDNからjQueryを読み込ませることにした。そのため使うのは同梱版ではない普通のlightbox.jsでよい。

Tumblrへのアップロード

ここが若干わかりづらいのだが、Tumblrにも静的ファイルをアップロードするスペースはある。

ダッシュボードから設定アイコン→テーマの編集を開き、「HTMLを編集」を開きカスタムHTML編集画面を起動する。そこからさらに左上の設定アイコン→「テーマアセット」を開く。ここが静的ファイルのアップロードスペースとなる。

テーマアセットの注意書きを見ると「テーマ以外のデータをアップロードした場合は、そのアカウントを随時凍結します」という物々しい注意書きがあるが、プラグイン用の画像やスクリプトファイルを上げるぐらいなら問題はないだろう（確証はないのでBANされても責任は取れません）。要はアップローダーみたいに使うのはNGということだろう。

まず、ここにimage以下の画像4ファイルをアップロードする。ここでのアップロード先のURLをコピーしてメモしておく。

次に、css/lightbox.cssのCSSをテキストエディタ等で編集する。なんでこんな面倒なことするのかというと、テーマアセットのアップロード先が不定かつ任意のディレクトリを作れないので、画像ファイルを相対パスから絶対パスに書き換えてやる必要があるからだ。LightBoxはMITライセンスなので改変についてのライセンス上の問題はない。

CSSの書き換え箇所は4箇所。例えばローディングの画像では、

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../images/loading.gif) no-repeat;
  //ここのurl以下を書き換える
}

url()のカッコ内をTumblrにアップロードした対応する画像ファイルのURLに書き換える。ファイル内を「url」で検索すると書き換え箇所が簡単に見つかる。

書き換えが終わったら、編集済みのlightbox.cssを同様にアップロードする。また、lightbox.jsもアップロードする。こちらは編集は特に必要ない。アップロードしたCSSとJSファイルのURLをまたメモしておく。

カスタムHTML編集

＜head＞～＜/head＞にLightBoxのCSS、＜body＞～＜/body＞にjQueryとLightBoxのJavaScriptを設置する。

<head>
（中略）
<link rel="stylesheet" href="テーマアセットでアップロードしたURL/lightbox.css">
</head>

<body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="テーマアセットでアップロードしたURL/lightbox.js"></script>
（中略）
</body>

使用しているテーマにあわせてDOMを操作

ここからは使用しているテーマによってクラス構造が違うので一概には言えないが、DOM編集のスクリプトを追加し、LightBoxでテキスト投稿の画像を表示できるようにする。

例えば自分の使用しているテーマでは、記事は次のような構造になっている（そのままソースを表示すると文字がエンコードされている可能性があるため、画像周辺を開発者ツールで見るとわかりすい）。

<div class="post-body">
  <p>町田は神奈川</p>
  <p>駅前走っているバスは神奈中～～～<img src="～～～.jpg" /></p>
</div>

これをLightBoxで表示するにはimgタグの部分を、

<a href="～～～.jpg" data-lightbox="ぶっちゃけなんでもいい"><img src="～～～.jpg" /></a>

とする。このdata-lightboxが重要でLightBoxで表示するという印である同時に、data-lightboxが同一の画像でグループ化して表示される。

HTML編集画面を開き、bodyの最後あたりにDOM操作のスクリプトを追加する（{block:Posts}のあとならどこでもよさそう）。

<script>
    var postImgs = document.getElementsByTagName("img");
for (var i = 0; i < postImgs.length; i++) {
    if (!postImgs[i].parentNode || 
        postImgs[i].parentNode.tagName.toLowerCase() !== "p") continue;
    if (!postImgs[i].parentNode.parentNode || 
        postImgs[i].parentNode.parentNode.className.toLowerCase() !== "post-body") continue;
    postImgs[i].outerHTML = "<a href='" + postImgs[i].src + 
        "' data-lightbox='lightbox" + i + "'><img src='" + postImgs[i].src + 
        "' alt='" + postImgs[i].alt + "' /></a>";
}
</script>

これでOKだ。プレビュー画面では反映されないことがあるので、保存してから別ページでホームを開くとLightBoxで画像が表示されるようになっている。せっかくjQuery導入したからここをjQueryで書いてもよかったけど個人的に嫌いなので（

以前投稿した記事をLightBox用に再編集する必要はない。

ぷろぐらみんぐ帳

LightBoxの導入

Tumblrへのアップロード

カスタムHTML編集

使用しているテーマにあわせてDOMを操作