この記事では、画像の表示スタイルのサンプルをご紹介します。

MovableType.net の編集画面のツールバーの中にある [画像の挿入] ボタンから、下記のスタイルの画像を追加できますのでお試しください。

1. [画像の挿入] ボタンを押す

2. 画像を選んで、スタイルを指定

上の画面の左側にならぶ画像のサムネイルから、表示したい画像を選び、右側の表示設定項目を指定します。

• 代替テキスト（alt）：画像の代替となるテキスト情報です。画像を表示できない読み上げ専用のブラウザなどで利用されます。
• キャプション（figcaption）：画像下の灰色エリアに表示される画像の説明分です。
• 横幅：画像の幅を指定します。例えば640pxを選ぶと、画像が幅640pxで表示されます。
• 配置：4種類あります。下記のパターンをご参照ください。

では、ここからは画像の表示方法のパターンをいくつか紹介します。

横幅指定

挿入モーダルから横幅(width)を640pxに指定すると、画像サイズが幅640pxで表示されます。

本文幅いっぱいに指定

画像埋め込みコードの横幅(width)を100%に指定すると、本文エリアの横幅いっぱいに表示されます。このとき、高さ（height）の指定は削除してください。

中央寄せ

配置を中央寄せにすると、下のように画像が本文エリアの中央に配置されます。

左寄せ

配置を左寄せにすると、下のように画像が本文エリアの左側に配置されます。

右寄せ

配置を右寄せ回り込みにすると、下のように画像が本文エリアの右側に配置されます。

画像を二つ横に並べる

小さな画像を二つ横に並べる場合は、以下のコードを参照してマークアップしてください。

	<div class="imgflex">
		<img src="画像のURL"/>
		<img src="画像のURL"/>
	</div>

画像箇所を編集画面のモーダルから挿入する際は、一番右の「左寄せ（回り込みなし）」を選択してください。
３つ以上の場合も同じように並べることができます。

ヒント：画像をアップロードするときはファイルサイズに注意

画像サイズが大きいと、記事の読み込みに時間がかかります。記事に画像を追加するときには、画像の縦横サイズとファイル容量に気を配りましょう。

TIPS

画像のリサイズとファイル容量圧縮には、Google 社が公開しているWebサービス「Squoosh」が便利です。