機能の概要
記事で利用可能な「複数枚画像」ブロックは、画像をリスト形式で並べて表示することが可能です。
それぞれの画像は、通常の画像と同じように角丸加工・枠線表示が可能なほか、オプションで以下の装飾が可能となっています。
- 画面幅によるレイアウト調整
- カラムの高さ制御
- このブロックは初期状態では「ウェブページ」で使用できないようになっています。
ウェブページで同様の表示を実現する場合は「複数カラム(2カラム/3カラム)」を利用してください。
入力欄
このブロックを利用すると、1行に掲載する画像枚数が2〜4枚のブロックを追加できるようになります。
以下は、複数枚画像ブロックの中で「画像を追加(3枚)」を選択した場合の状態です。
なお、基本的な画像のアップロード方法は、MovableType.net標準の画像ブロックと同様です。
「画像を追加」ブロックは、枚数が異なるブロックでも、同じ「複数枚画像」ブロックの中で使用できます。
出力されるHTML
上記のように作成した場合も、HTMLはリスト形式( ul > li > div > img )で画像が並びます。
オプション機能
画面幅によるレイアウト調整
このオプションは以下の3つから選択でき、選択した内容によって幅の狭いデバイスでの列数をコントロールできます。
- 調整しない
- 1列で表示
- 2列で表示
出力イメージ
オプション:調整しない
オプション:1列で表示
オプション:2列で表示
カラムの高さ制御
このオプションは以下より選択可能で、同一カラム内に並ぶ画像の高さを調整することができます。
- 揃えない
- 行ごとに高さを揃える
出力イメージ
高さを揃えない場合
高さを揃える場合
行ごとに高さを揃える場合、同じカラム内の一番大きな画像にあわせ、その他の画像を拡大します。
ただし、その際はカラム幅にあわせて左右がトリミングされることにご留意ください。