小粋空間  -  a cheap joke and a play on words site

CommentCustomField プラグイン + HighSlide JS

Movable Type のコメントにカスタムフィールドを追加する CommentCustomField プラグインと HighSlide JS を組み合わせて、アップロードした画像をズームアップするカスタマイズを紹介します。

以下のサンプルページで画像をクリックして動作を確認してください。

ここでは CommentCustomField プラグインの解説にしたがって、ブログ記事ページにアップロード画像を表示するカスタマイズを行なっていることを前提に説明を進めます。

１．HighSlide JS の設定

HighSlide JS の設定方法は、「Highslide JS でサムネイル画像を拡大表示する 」を参照してください。本エントリーでの解説は省略します。

２．テンプレートの修正

ブログ管理画面の「デザイン」→「テンプレート」をクリックし、「既定のブログ」の場合は「コメント」テンプレートモジュールをクリック、当ブログの配布テンプレートの場合は「コメント詳細」テンプレートモジュールをクリックし、赤色部分を青色の内容に変更します。

変更前

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <mt:AssetThumbnailLink width="200" />
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

変更後

...前略...
<mt:Comments>
...中略...
    <div class="comment-content">
        <$mt:CommentBody$>
        <mt:if tag="CommentCustomFieldAsset">
            <p>
            <mt:CommentCustomFieldAsset>
                <a href="<mt:AssetURL />" class="highslide" onclick="return hs.expand(this)"><img src="<mt:AssetThumbnailURL width="100" />" /></a>
            </mt:CommentCustomFieldAsset>
            </p>
        </mt:if>
...中略...
    </div>
</mt:Comments>
...後略...

ズーム前のサイズを変更する場合は、width="100" の部分を書き換えてください。