隠居のMovableType備忘録：MT5 で lightbox2.05 を動かしてみる
限定メンバー用に、新しいサイトを MovableType5（MT5) で作成してみることにした。MT5 は基本的には、MT4 と変わらない。MT5 では、ブログだけでなくウェブページも管理しやすくなっているらしい。早速、【基本からしっかりわかる Movable Type 5】という参考書を購入して、これに倣ってトライしてみた。
この本の Chapter 2 【Movable Type 5 のインストール】に書かれている通りに行うと、問題なくインストールできた。ただ、レンタル・サーバー（私の場合、xserver ）で用意してくれているデータベースMysql はバージョン４から５に上げる必要がある。ここでの注意点は、３月２７日の【隠居のMovableType：データベースをMySQL4 から MySQL5 へ】で記録した。
MT4 で愛用している サムネイル画像をクリックするとWebブラウザ画面上に拡大画像を背景をフェードアウトして表示するためのプラグインである Lightbox を、MT5 でも使いたかったのでインストールした。少々のカスタマイズもしたので備忘録として記録しておきたい。
この本の Chapter 2 【Movable Type 5 のインストール】に書かれている通りに行うと、問題なくインストールできた。ただ、レンタル・サーバー（私の場合、xserver ）で用意してくれているデータベースMysql はバージョン４から５に上げる必要がある。ここでの注意点は、３月２７日の【隠居のMovableType：データベースをMySQL4 から MySQL5 へ】で記録した。
MT4 で愛用している サムネイル画像をクリックするとWebブラウザ画面上に拡大画像を背景をフェードアウトして表示するためのプラグインである Lightbox を、MT5 でも使いたかったのでインストールした。少々のカスタマイズもしたので備忘録として記録しておきたい。
- MT4 では、lightbox2.04 はうまく動作しなかったのでlightbox2.03 を使っている。開発元の Lokesh Dhakar のページに訪ねると、バージョンは 2.05 がこの3月18日にリリースされていた。これを導入するとすんなりと動いてくれた。
- 導入の方法については、ググってみると最近は多くがヒットするが、前にもお世話になったページを参考に導入した。
- そのページにもあるように、.css .js ファイルを MT5 のヘッダー部に挿入しなければならない。MT5 でも MT4 と同じように、各ブログのモジュールテンプレートの【ヘッダー】の </head> 直前に挿入した。
<!-- lightbox2.05 --> <link rel="stylesheet" href="http://xxxxxxxxx.net/home/lightbox205/css/lightbox.css " type="text/css" media="screen" /> <script src="http://xxxxxxxxx.net/home/lightbox205/js/prototype.js" type="text/javascript"></script> <script src="http://xxxxxxxxx.net/home/lightbox205/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="http://xxxxxxxxx.net/home/lightbox205/js/lightbox.js" type="text/javascript"></script> - カスタマイズのひとつは、グループ表示するときに、拡大画像に表示される【PREV】【NEXT】【CLOSE X】ボタンを自分でデザインした
に変更したことである。
変えるのは、自分でデザインしたボタンを、lightbox2.05 の images フォルダーにある prevlabel.gif nextlabel.gif close.gif をファイル名をそのまま直接置き換えることでできる。 - MT で画像をアップロードする場合に Lightbox 使うためには、MT で生成されるコードに、title="" rel="lightbox[]" を挿入しなければならない。これをそのたびに挿入するのは面倒なので、MT の /cgi/mt/lib/MT/Asset フォルダーにある Image.pm ソース・プログラムの320行目あたりにある行を、青字のように変えた。これは、MT4 で実施した方法でうまくいった。これが、カスタマイズの2つ目である。
# '<a href="%s"><img alt="%s" src="%s" %s %s /></a>', '<a href="%s" title="" rel="lightbox[]"><img alt="%s" src="%s" %s %s /></a>' - 背景色を変えるなどその他の細かいカスタマイズは、以下のページを参考にさせてもらった。