2020年4月9日にリリースした Movable Type のプラグイン「MT-Thumbnail」の利用方法をご紹介いたします。

Movable Type でサイトを構築するとき、トップページや一覧ページ、記事の下に関連記事など、様々なページから記事への導線を作ります。

その場合、シンプルなデザインであれば、一つの画像を使い回すことが多いと思いますが、画像をたくさん登録できるようにカスタムフィールドを作ることも多いですよね。

構築する立場からだと要件通りに作るとこれだけのカスタムフィールドが必要になりますという感じではあるのですが、実際の運用を考えるとなかなか大変。。

レスポンシブやリキッドにするために、CSSで画像をトリミングする場合もありますが、必ずしもイメージ通り出力されないことも多いのがサイト制作者の悩みの種です。WIMEDIAで採用しているテーマ「REMO」のトップページなどはまさにそうですね。 （いずれこのプラグインを使って、直すつもり。。）

記事作成者のスキルがすごくあって、画角を揃えた画像を毎回登録できればもちろん良いのですが、スキルがあっても手間もかかるし実際のところ、なかなか難しい問題です。

また、SNSにシェアするようの画像のサイズもサービスによってまちまちだったりします。
ある程度はサービス側が良きにやってくれますが、できれば推奨されたサイズでそれぞれ表示させたいですよね。

そんなときに、 記事作成者が意識することなく、MT側で最適な画像を作成できるのが「MT-Thumbnail」です。

もちろん画像によっては美味しいところがトリミングされちゃったりすることもあるのですが、
X軸、Y軸のトリミング起点を設定できるので、あらかじめどのようにトリミングされるかが共有されていれば、違和感の少ない画像を選ぶことができます。

例えば上記のような画像だと画角によっては美味しくないわけですが、

こういう画像を使えばそんなに厳密なトリミングじゃなくてもデザイン性を損ないません。

例えばこの画像で人の流れを表現（強調）したいとします。
その際には、トリミングの起点を左の真ん中あたりに設定することで、人の流れの部分を多くトリミングさせることもできます。

デモページの紹介

それでは試してみましょう。今回は1枚のインデックステンプレートに1つの画像を様々な画角で表示させてみます。
実際にはブログで使うことが多いと思いますので、カスタムフィールドに登録すると仮定してサンプルコードを記載しています。

サンプル1

1. 画像の中央を起点に600px X 200pxのサムネイルを作成
2. 画像の中央を起点に350px X 350pxのサムネイルを作成
3. 画像の左上を起点に350px X 350pxのサムネイルを作成
4. 画像の中央を起点に1200px X 630pxのサムネイルを作成

サンプル２

1. 画像の中央を起点に600px X 200pxのサムネイルを作成
2. 画像の中央を起点に350px X 350pxのサムネイルを作成
3. 画像の左下を起点に350px X 350pxのサムネイルを作成
4. top="800"を指定し1200px X 630pxのサムネイルを作成

実際に出力したページとサンプルコードはこちらから
https://www.wim.jp/demo/mt-thumbnail.html

サンプル１のような画像は画像自体に意味があるので、どの画角で切り出すのか注意が必要ですが、サンプル２のようなイメージ画像の場合は、どこでトリミングしても画像の意味を損なわないので、使いやすいと思います。地味に便利!!　と思ってます。

注意点としては、"top"を指定する時、"left"のサイズが足りていないとその分小さくトリミングされてしまいます。
"left" "top"のモディファイアはあくまで補佐的なものなので、通常は何も指定しないか（センター起点）、left="0" top="0"（左上起点）と指定するのが良いと思います。

コンテンツタイプと組み合わせれば、データとしてはマスター用の画像だけを管理して、様々な場所へ様々なサイズで出力することができます。

Content Hub Platform としてのMovable Type の活用の参考になれば幸いです。

製品について

MT-Thumbnail の製品ページはこちらから
https://www.wim.jp/plugins/mt-thumbnail.html

MT-Thumbnail の販売ページはこちらから
https://mtplugins.stores.jp/items/5e8d90d8e20b0415e8d7801c

MT-Thumbnail の評価利用をご希望の方はこちらから
https://www.wim.jp/contact/

ご贔屓ください。