ブログ記事中の画像をクリックすると、にゅっとポップアップされて拡大画像が表示される。
そういうのがカッコイイなぁと思ってて、今回はそれ用のツール「Lightbox2.7」を導入することにしてみたので備忘録として記録しておきます。



サンプルはこれ↓。(この画像をクリック!)
紅葉

紅葉

クリックしてもらうと分かるように、にゅっとポップアップされて表示されます。

やり方

lightboxをブログにアップする

まず必要なのは、Lightbox。今回は2.7.1ってバージョンを使いました。
これを公式サイトよりダウンロードして解凍します。

続いて、それの中の「Lightbox」フォルダをlivedoor Blogにアップします。
(知らん間に、ライブドアブログの無料版でもftpで3MBまでアップできるようになってました)

ライブドアブログの管理画面からftp操作を行う場合、フォルダごとまとめてアップすることが出来ないので、クライアントアプリを使うのがオススメです。
こちらを参考にしてブログに入り、直下に「lightbox」フォルダを作り(このブログだと「http://blog.livedoor.jp/gekkyu_18man/lightbox/」)、そこに全部のファイルを転送すればOK。

が、一応「意味分からんよ!」って方の為に、ちょっと細かいけど管理画面からアップする方法も書いておきます。


=====クライアントアプリを使う人は次のhtmlの編集まで読み飛ばして下さい。=====

管理画面の「画像/ファイル
ブログ設定
の「ファイル管理
ファイル管理
を開きます。

フォルダを4つ作ります。
まず「フォルダを作る」より、「lightbox」というフォルダを作ります。
フォルダ

作ったら、その「lightbox」をクリックし、
フォルダ2

また「フォルダを作る」をクリックして、「css」というフォルダを作ります。
同様に「img」、「js」というフォルダも作ります。
フォルダ3
これで「lightbox」というフォルダの中に「css」「img」「js」というフォルダが入ってる状態になるはずです。

そのフォルダが出来たら、今度はファイルをアップします。
先ほど解凍したフォルダから、それぞれのファイルを同じ名前のフォルダにアップしていきます。
(ただし「index.html」「README」、imgに入っている「demopage」はアップする必要はありません。)

フォルダ5
そうすると、例えば「css」ならこんな感じになります。

htmlを編集する

続いてHTMLを編集します。
lb
「ブログ設定」→「デザイン / ブログパーツ設定」→「PC」→「カスタマイズ」から、「トップページ」「個別記事ページ」「カテゴリアーカイブ」「月別アーカイブ」のページそれぞれに同じことをします。

それぞれのページに「<head>」という部分がある(Ctrl+Fで検索してね)ので、その直ぐ下に
<!--lightbox-->
<script src="http://blog.livedoor.jp/gekkyu_18man/lightbox/js/jquery-1.11.0.min.js"></script>
<script src="http://blog.livedoor.jp/gekkyu_18man/lightbox/js/lightbox.min.js"></script>
<link href="http://blog.livedoor.jp/gekkyu_18man/lightbox/css/lightbox.css" rel="stylesheet" />
<!--lightbox end-->
と入力します。
もちろん、「http://blog.livedoor.jp/gekkyu_18man」の部分はご自分のブログのURLに変更して下さい。
これだけです。「保存」を押したら完成。
(なおこの記述は、公式サイトの使い方の説明をそのまま、相対パスを絶対パスに変更したものです。Lightboxのバージョンが違う場合は公式サイトも参考にしてみてください。)

画像タグにrelを加える

今度は実際のブログ執筆画面。
実際にブログを書いてHTMLタグ編集を押すと、画像の所が
<a  href="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710.jpg" title="紅葉" target="_blank"><img  src="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710-s.jpg" alt="紅葉" class="pict" border="0" height="427" hspace="5" width="640"></a>
こんな感じになっとると思います。
そこに rel="lightbox"を加えます。
<a  href="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710.jpg" rel="lightbox" title="紅葉" target="_blank"><img  src="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710-s.jpg" alt="紅葉" class="pict" border="0" height="427" hspace="5" width="640"></a>
こんな感じ。

これで完成なので、実際に保存して試してみてください。
どうでしょう、出来ましたか?

おまけ

①画像に左右の矢印を付けて次の画像に送る方法は、
rel="lightbox"

rel="lightbox[group]"
のように、[ちょめちょめ]みたいなのを付ければ、同じグループ名同士の画像を送ることが出来ます。
<a  href="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710.jpg" rel="lightbox[group]" title="紅葉" target="_blank"><img  src="http://livedoor.blogimg.jp/gekkyu_18man/imgs/5/a/5a9a2710-s.jpg" alt="紅葉" class="pict" border="0" height="427" hspace="5" width="640"></a>
こんな感じです。

②複数の画像にrel="lightbox"タグを加えるのは面倒ですが、最後にまとめて、HTMLタグ編集で「jpg" title=」を「jpg" rel="lightbox[group]" title=」に置換すると、一括で全部の画像にタグが加わります。
多分少しは楽になるかと思います。

まとめ

ってなわけで、livedoor BlogでLightboxを使う方法でした。
一回設定すれば、以降はrelを加えるだけなので簡単ですね。

以上、誰かの参考になれば。