Movable Typeの画像に関するエトセトラ for Movable Type Advent Calendar 2017

Movable Typeの画像に関するエトセトラ for Movable Type Advent Calendar 2017

Movable Type | | 2017/12/19更新 | 2nose

この記事は、Movable Type Advent Calendar の19日目の記事です。2017年は画像最適化に関していろいろと調べているので、今回はMovable Typeの画像に関する情報をまとめていきます。

画像処理ライブラリを指定する

Movable Typeでは、画像処理ライブラリを選ぶことができます。利用できる画像処理ライブラリは、以下の4つです。

  1. ImageMagick (初期値)
  2. NetPBM
  3. GD
  4. Imager

システムの 設定>全般 で、アップロード画像の画質を設定する

2017-12-17-mtadvent07.jpg

システム設定として、JPGおよびPNGの画像の品質を設定します。LightFile CoreJPEGminiなどでアップロード前に画像最適化を行っている場合は、自動変換はOFFにするのがオススメです。

  • 画像品質の自動変換 ON/OFF(初期値はON)
  • JPEG画像の品質 75
  • PNG画像の品質 7

ウェブサイト/ブログの設定>全般 で画像のアップロード設定をする

2017-12-17-mtadvent02.jpgアップロードした際にどのような処理を行うかを設定します。ディレクトリが汚れないために、アップロード先は設定しましょう。拡張子ごとにアップロード先を変更したい場合は、UploadDirプラグインがおすすめです。

  • アップロード先 ディレクトリを指定する
  • 日本語ファイル名の変更
  • 既存ファイルの処理(上書きの可否など)
  • 画像向きの修正

ウェブサイト/ブログの 設定>投稿 で画像の挿入に関する設定をする

2017-12-17-mtadvent03.jpg本文・続きの入力フィールドで、画像挿入時の初期設定を指定します。サムネイルの横幅は、デザインに合わせて指定しておくと便利です。

  • サムネイルの利用 サムネイルのサイズ指定
  • 位置
  • ポップアップウィンドウへのリンク

画像をアップロードする

画像のアップロード方法は、3つあります。用途によって使い分けるのがよいです。

  1. アイテムのアップロード
  2. 記事/ページの本文&追記フィールド
  3. カスタムフィールド

アイテムのアップロード

2017-12-17-mtadvent01.jpg

複数の画像をアップロードすることが可能です。アップロードは、ドラッグアンドドロップで行うこともできます。エクスプローラやFinderからファイルを選択し、ぐいっと放り込みましょう。

記事/ページの本文&追記フィールド

2017-12-17-mtadvent04.jpg本文・続きのリッチテキストエディタで、画像挿入ボタンを押下して画像をアップロード・選択します。ブログを書くときなど、フリーレイアウトでの文章作成に向いています

カスタムフィールド

2017-12-17-mtadvent06.jpgブログやカテゴリ、記事やページなど、さまざまな項目に対して画像フィールドを追加できます。複数の画像をまとめたい場合などは、FlexFieldプラグインや、FreeLayout CustomFieldプラグインがおすすめです。

アップロードできる画像の拡張子を設定する

アップロードできる画像やファイルは、設定ファイル(mt-config.cgi)で設定します。ブラックリストとホワイトリストがあり、優先されるのはブラックリストです。利用する環境変数は以下のとおりです。

使い方としては、DeniedAssetFileExtensions はそのままにし、AssetFileExtensions に必要な拡張子を追加していきます。ブラックリストの初期値は、"ascx, asis, asp, aspx, bat, cfc, cfm, cgi, cmd, com, cpl, dll, exe, htaccess, htm, html, inc, jhtml, js, jsb, jsp, mht, mhtml, msi, php, php2, php3, php4, php5, phps, phtm, phtml, pif, pl, pwml, py, reg, scr, sh, shtm, shtml, vbs, vxd, pm, so, rb, htc" です。

画像に関するMTタグ

画像を含むアイテムのMTタグは、オンラインマニュアルにまとまっています。Movable Typeはオンラインマニュアルがとても充実しており、ググるとすぐに答えが見つかるのも本当に助かりますね。

画像に関するMTプラグイン

画像に関するMTプラグインは、プラグインディレクトリから探すことができます。

その中でも透かしを入れたり、PDFの一枚目を画像として抽出してくれるなどの機能をもつ ImageUploadUtility(Pro) は高機能でおすすめです。

One More Things

一枚の画像からサムネイルをたくさん出力するテンプレートの場合、再構築が遅くなることがあります。そんな時は、この黒魔術的なプラグインを入れると再構築が速くなります。

詳細はリンク先を見ていただくとして、ポイントは「画像データチェックの省略」です。MTAssetThumbnailURL を多用しているサイトでは、再構築の高速化が期待できます。

明日は、H.Fujimoto大先生です。最近はヒカリモノがトレンドですが、さらにトレンドのスマートスピーカーに関するものになるとかならないとか。

※本記事に記載されている内容をお試しする場合は、自己責任にてお願いいたします。

日記とか雑記とかメモとか

2018年も画像最適化をガリガリとやっていきます、たぶん。あとカメラをやり直すかどうか。いやー、やりたいこと多いけど、ぜんぜんできてない。

SHARE:

前後の記事

同じカテゴリの記事

このサイトは、エックスサーバー で運営しています。

About

Web系のWebデザイナー/ディレクター/PL/PM が気付いたことを取りとめもなくつづるブログです。ECとMovable Typeが中心です。MT東京でコミュニティやってます。MTDDC Meetup TOKYO 2016実行委員長。

管理人: 2nose
URL: https://2nose.com/
Blog: https://2nose.com/blog/
E-mail: info@2nose.com

スポーツ情報まとめサイト: sports55.net

Social Links

Other Links

MT東京
MTDDC Meetup TOKYO 2016

Our Bunker

ITABASHI-KU TOKYO
JAPAN.

© 2nose.com All Right Reserved.