隠居の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>' - 背景色を変えるなどその他の細かいカスタマイズは、以下のページを参考にさせてもらった。
コメントする
(初めてのコメントの時は、コメントが表示されるためにこのブログのオーナーの承認が必要になることがあります。承認されるまでコメントは表示されませんのでしばらくお待ちください)