以前、lightboxについての記事を書きましたが、MovableTyleでは画像を挿入する場合、通常1枚を left center right の何れかに設置するようになっています。

せっかく、lightboxのスライドショーの機能として写真を順番に表示させることが出来るので、画像のサムネイルを一覧表示させられるかやってみました。

画像挿入時のファイルオプションの設定

• ブログ記事に画像を表示するにチェックする
• サムネイルを利用にチェックする（幅：　160　ピクセル）
• 位置は、左寄せ

※ポップアップウィンドウで元の大きさを画像にリンクには、チェックしない

始めは画像の位置を中央にしたり、横幅を代えてみましたが、私の環境では、「幅160px」の「左寄せ」に統一することで、キレイにうまく回り込ませることが出来ました。

左寄せの標準状態では、CSSで上0,右10px,下10px,左0の余白が設定されてますので、右寄せよりレイアウト的には良いのではないでしょうか。

ところで、MovableTypeは特別CSSをいじらなくても、勝手に回り込んでくれるのですね。

知りませんでした。

サムネイル表示まではうまくいきましたので、今度は、lightboxで表示させた際に、同一グループでスライドショー表示をさせられるか試してみました。

htmlモードのおまじない方法

予めブログ記事に写真を貼り付けたあと、htmlモードで「おまじない」を記入してやればすぐに出来てしまします。

a href="http://・・・・・/" rel="lightbox"

a href="http://・・・・・/" rel="lightbox[group]"

rel="lightbox" の後ろに半角で　[group]　と記載するだけで出来てしまいます。

もし、これが面倒であれば、lightboxの設定の際に、上記[group]を入れてしまっても支障ないと思います。 

※[　]内は何を入れても機能します。今回はgroupとしました

それでは、実際に設置したところをご紹介します。

写真を表示させて、写真の右半分側でマウスをクリックすると次のページに行きます。

逆に、左半分側でマウスをクリックすると戻ります。