Movable Typeでカスタムフィールド画像を直接表示する方法—サムネイル画像とリンク処理の使い方
作成日:2011.04.27
Movable Typeのカスタムフィールドで画像を設定した場合、通常は画像へのリンクが表示されてしまいます。この記事では、テンプレートタグを使用して画像を直接表示する方法を紹介します。サムネイル画像を表示する方法や、サイズを変更するためのモディファイアの使い方を具体的なコードと共に解説します。また、リンクを解除して画像だけを表示する方法も説明しています。
error この記事は最終更新日から13年以上が経過しています。
Movable Type のカスタムフィールド機能で、フィールドの種類を「画像」にした場合、テンプレート内で、自分でカスタムフィールドに設定したテンプレートタグを書いても、そのまま画像は表示されず、その画像へのリンクが出力されてしまいます。
画像へのリンクではなく、直接画像を表示したい場合は、以下のように指定します。
※以下、カスタムフィールドに指定したテンプレートタグが <MTEntryImage> という仮定での記述です。
<MTEntryImageAsset>
<$MTAssetThumbnailLink$>
</MTEntryImageAsset>
上記のように、「設定したテンプレートタグ+Asset」というタグ内で「MTAssetThumbnailLink」を使用することで、カスタムフィールド画像のサムネイルが出力され、さらにアップロードした画像そのものにリンクします。
サムネイル画像のサイズを変更したい場合は、以下のモディファイアを使用します。
<!-- サムネイル画像の最大横幅を100pxに指定 -->
<$MTAssetThumbnailLink width="100"$>
<!-- サムネイル画像の最大縦幅を100pxに指定 -->
<$MTAssetThumbnailLink height="100"$>
<!-- サムネイル画像を実際の画像の50%の大きさに指定 -->
<$MTAssetThumbnailLink scale="50"$>
なお、前述の通り MTAssetThumbnailLink では、「サムネイル画像の出力」と「元画像へのリンク」の二つを自動的にやってしまいます。
画像の出力だけがしたい(元画像へのリンクは要らない)という場合は、MTAssetThumbnailURL というテンプレートタグを使用できます。
こちらは、サムネイル画像のURLのみを出力するためのテンプレートタグです。
<MTEntryImageAsset>
<img src="<$MTAssetThumbnailURL$>" />
</MTEntryImageAsset>
このように書けば、サムネイル画像だけを出力できます。
ちなみに、MTAssetThumbnailURL タグにも、width、height、scale のモディファイアが使用可能なので、サムネイル画像のサイズ調整も行なえます。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。
これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。
【制作会社・企業様向けサポート】
Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。
ぜひ、プロフィールやWeb制作会社様向け業務案内、一般企業様向け業務案内もご覧くださいね。
Movable Typeプラグイン入門:MT::Author で実現するロール付与の手法
2025.03.26
本記事では、Movable Type のプラグイン開発において、MT::Author オブジェクトを利用したユーザーへのロール付与手法を詳しく解説します。具体的なコード例とともに、ユーザー、ブログ、ロールの各オブジェクトの取得方法や、add_role メソッドを活用したロール付与処理の流れを紹介。実務に直結する実装ポイントを分かりやすく解説しています。
Movable Typeプラグイン入門:MT::Authorを活用した新規ユーザー作成の実例解説
2025.03.21
本記事では、Movable Typeプラグインの実装において、MT::Authorオブジェクトを活用したユーザーの新規作成処理の具体例を解説します。コードサンプルを通して、ユーザーの存在確認から新規作成、各種プロパティの設定手順やログ出力まで、実践的なポイントを詳述しています。
Movable Typeプラグイン開発入門:第七回 Transformerプラグインで管理画面UIをカスタマイズする
2025.03.19
この記事では、Movable Type 管理画面の見た目を変更するために、Transformerプラグインで設定フォームをカスタマイズする方法を解説しています。具体的な文字列置換の実装例と、実運用時に考慮すべきポイントをわかりやすくまとめています。
Movable Typeプラグイン開発入門:第六回 ローカライゼーションの実装方法
2025.03.13
第六回では、Movable Typeプラグインのローカライゼーションに焦点を当て、多言語対応の具体的な手法を紹介します。多言語対応の実装方法を学び、プラグインの利用者層を広げましょう。