nasu web note site

　Movable Type 4のエディタ機能である、画像の挿入をポップアップオプションで行うと、タイトルバーだけしか無いウィンドウが表示されて、さらに位置が左上固定という不便なものである。かといって、サムネイルと元画像のリンクだけでも寂しい。
　何か一工夫欲しいということで、Lightbox JS v2.0をブログに組み込んでみました。Lightbox JS v2.0は、表示の仕方が格好いい。ブログの記事に挿入した画像が、それとなく良く見える。

　Lightbox JS v2.0をMovable Type 4に組み込むには、ググれば、簡単に設置できることが分かると思う。本記事は、画像を挿入したら自動的にLightboxが適用されるようにMovable Type4を修正することも説明する。しかし、Movable Type4の修正はPlugInでは無く、直接ソースを修正することとなる。多分、このやりかたは邪道であると思う。参考程度にして欲しい。

1.Lightbox JS v2.0のパスを修正する。

このブログを例に持って説明する。このブログのパスは、"/blog"なので

修正前：

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

修正後：

<script type="text/javascript" src="/blog/js/prototype.js"></script>
<script type="text/javascript" src="/blog/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/blog/js/lightbox.js"></script>
<link rel="stylesheet" href="/blog/css/lightbox.css" type="text/css" media="screen">

headタグに記述するパスを絶対パスに修正する。さらにlightbox.jsをエディタで開き、下記のように修正する。

修正前(65行目当たり)：

var fileLoadingImage = "images/loading.gif";		
var fileBottomNavCloseImage = "images/closelabel.gif";

修正後：

var fileLoadingImage = "/blog/images/loading.gif";		
var fileBottomNavCloseImage = "/blog/images/closelabel.gif";

これで、lightboxは機能するようになる。CSSは相対パスが合っていれば良いので修正する必要は無い。

2.画像挿入時に自動的にLightboxを適用するようにする

画像挿入時に自動的にrel="lightbox[roadtrip]"を付加するには、lib/MT/Asset/Image.pmを修正する。

 修正前(245行目当たり)：

$text = sprintf(
'<a href="%s"><img alt="%s" src="%s" %s %s"/></a>',
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style,
);

修正後：

$text = sprintf(
'<a %s href="%s"><img alt="%s" src="%s" %s %s"/></a>',
"rel=\"lightbox[roadtrip]\"" ,
MT::Util::encode_html( $asset->url ),
MT::Util::encode_html( $asset->label ),
MT::Util::encode_html( $thumb->url ),
$dimensions,
$wrap_style,
);

このようにsprintfを修正することで、サムネイル有り、ポップアップ無しの画像挿入で自動的に付加されるようになる。ただし、注意して欲しいのは、全てのブログでこれが、自動的に付加してしまうことである。

本来であれば、PlugInで対応すべきだが、残念ながら自分にはPerlを記述するスキルが無いので、こういう小手先で対応した。

エントリーの公開時間によって絵やエントリーの色を変化させる簡単な方法があります。やりかたは以下の通り。

 <span class="color<$MTDate format="%S" regex_replace="/[0-9]$/","" $>">hoge</span>

エントリーの公開する時間によって、CSSのクラス名が"color1"."color2"･･･"color5"となります。クラス別に色を用意することで変化することができます。

このブログは、この方法でエントリーと右サイドの絵を公開時間によって変化させています。