【記事テンプレート】画像とキャプション

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

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

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

編集画面の[画像を挿入]ボタン
編集画面の[画像を挿入]ボタン

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

画像の挿入ウィンドウ
画像の選択と表示指定

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

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

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

横幅指定

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

ゆるふわ手書きトフ イラスト
横幅(width)を640pxに指定すると、画像の幅が640pxになります。高さは画像の比率を保ちます。

本文幅いっぱいに指定

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

おやすみトフイラスト
width="100%" と指定すると、本文エリアの横幅いっぱいに表示されます。

中央寄せ

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

ゆるふわ手書きトフ イラスト
中央寄せにしています

左寄せ

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

ゆるふわ手書きトフ イラスト
左寄せにしています

右寄せ

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

ゆるふわ手書きトフ イラスト
右寄せにしています

画像を二つ横に並べる

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


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

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

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

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

TIPS

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

関連記事

前の記事へ

【記事のテンプレート】見だし・段落・強調・区切り線・箇条書き