データのアップロード

[MovableType本体]の設置場所に、[javascript]フォルダを作り、その中に、さらに [lightbox]フォルダを作り設置することにした。

<[MovableType本体]>
 　　└[javascript]
　　　　　　├[lightbox]
　　　　　　│　├[css]
　　　　　　│　│└lightbox.css
　　　　　　│　│
　　　　　　│　├[images]
　　　　　　│　│├blank.gif
　　　　　　│　│├close.gif
　　　　　　│　│├・・・ 
　　　　　　│　│
　　　　　　│　├[js]
　　　　　　│　│├effects.js
　　　　　　│　│├lightbox.js
　　　　　　│　│├prototype.js
　　　　　　│　│└scriptaculous.js
　　　　　　│　└index.html
 

そのまま、[MovableType本体]に設置してもいいのだが、今後もjavascriptのプラグインを設置するかもしれないので、このように整理してみた。

既存ファイル(Image.pm)の修正

ブログ投稿を行う際、自動的にlightboxが適用されるようにするには、「Image.pm」を修正する。

<[MovableType本体]>
 　　└[lib]
　　　　├[MT]
　　　　│　├[Asset]
　　　　│　│　├image.pm
　　　　│　│　├・・・
 

このファイルは、ftp等にて修正を行う。

修正前(MovableType4だと247行目)
'<a href="%s"><img alt="%s" src="%s" %s %s /></a>', 

修正後
'<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',

修正前
'<img alt="%s" src="%s" %s %s/>',
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $asset->url ),

追加修正後(MovableType4だと256～271行目を追加修正)
my $thumb_width = $param->{thumb_width}; my $scale = $asset->image_width / $thumb_width; $dimensions = sprintf( 'width="%s" height="%s"', (( $asset->image_width / $scale, $asset->image_height / $scale )) );
$text = sprintf(
#'<img alt="%s" src="%s" %s %s/>',
# MT::Util::encode_html( $asset->label ),
# MT::Util::encode_html( $asset->url ),
'<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>', MT::Util::encode_html( $asset->url ), MT::Util::encode_html( $asset->label ), MT::Util::encode_html( $asset->url ),
$dimensions, $wrap_style, );

赤部分は削除せずにコメントアウトとし、その前後に追加する。

スタイルシートを読み込む設定

スタイルシートを読み込む設定を行うには、テンプレートモジュール「ヘッダ」内に下記を追加する。

修正前
<$MTInclude identifier="styles" trim_to="0"$>
<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />

修正後
<$MTInclude identifier="styles" trim_to="0"$>
<script type="text/javascript" src="/[MovableType本体]/javascript/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/[MovableType本体]/javascript/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/[MovableType本体]/javascript/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/[MovableType本体]/javascript/lightbox/css/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />

自分の環境に合わせて、ヘッダー内の[/head]より上であればどこでも良いが、順番をかえると読み込まれない場合があるようなので、上記「修正前」のデフォルトの項(黒字)の間に埋め込むことにした。

ウィジェットテンプレートの「フォト」の修正

記事内の写真以外に、サイドバー内のサムネイルにも自動的に反映させるため、ウィジェットテンプレートの「フォト」にも修正を加えておく。

修正を行う前に、バックアップを行っておくのだが、通常のバックアップは出来ないため、新規に「フォト」を作成し、既存の「フォト」の名前を変えて選別することにする。

変更を加える箇所は、下記の部分とする。

修正前
<a class="asset-image" href="<$MTAssetURL$>">

修正後
<a class="asset-image" rel="lightbox" href="<$MTAssetURL$>">