Template:Multiple image

テンプレートの解説表示編集履歴キャッシュを破棄

2枚から5枚までの画像をボックスで並べるテンプレートです。垂直にも水平にも説明付きで指定できます。

引数

• align　画像ボックスの位置を指定します。デフォルトは center です。
• direction　画像の並べ方を指定します。デフォルトは horizontal（水平）です。
• header　最上部に表示される文字入りの帯を形成しますので、画像ボックス全体に係る文字列（タイトルもしくは説明文）を記入します。無記の場合、帯は表示されません。
  • 表示したくない場合は、無記でもよいし、header 関連の引数を省いても問題ありません。
  • デフォルトでは無地（白地）に黒で文字が表示されますが、header_background の欄に色名を記入することにより header の地の色を変更できます。
  • また、header の文字を白抜きで表示することも可能です。白抜き文字（色が付いた地の中で、文字を白く抜いた文字修飾）の指定の実際は「その他の使用例」を参照のこと。なお、header_background で地の色を濃いものに指定しなければ白抜き文字を明確に表示することはできません。
• header_align　最上部の帯に表示する文字列を左右と中央のどこに寄せるかを指定します。デフォルトは center（中央寄せ）です。
• header_background　色名を記入することで header の地の色を指定できます。色名はウェブカラー名（redなど）と16進表記（#ED1A3Dなど）のいずれかで表します。header の文字を白抜きに指定した場合、こちらで濃い色名を指定することで表示環境が整います。
• caption_align　各画像のキャプション（説明文）を左右と中央のどこに寄せるかを一括で指定します。デフォルトは left（左寄せ）です。
• footer　最下部のキャプションを入力します。個々の画像ではなく全体に係るキャプションが必要な場合に使います。また、画像は画像だけで連続して表示し、全てのキャプションを最下部でまとめて入力したい場合に使います。
• footer_align　最下部のキャプションを左右と中央のどこに寄せるか指定します。デフォルトは left（左寄せ）です。
• total_width　全体の横サイズを指定します。各画像の縦サイズも自動で統一されます。
• width　全ての画像の統一サイズを指定します。画像ごとにサイズを指定する width1, width2, width3, width4, width5 よりも優先させます。したがって、画像ごとに異なったサイズを指定したい場合は width を指定しない、もしくは、引数ごと省きます。また、全て同じサイズであるなら width 以外は必要ありません。
• image1　1枚目に指定する画像のファイル名を（ファイル名のみで）入力します。以下、image2と続きます。
• width1　1枚目に指定した画像のサイズを（数字のみで）入力します。以下、width2と続きます。
• alt1　1枚目に指定した画像の代替テキスト。画像を表示しない環境を選択している場合や表示できない環境あるいは状況の下でのみ用いられる文字情報です。代替テキストというのは、画像を見ることができなかったり見づらかったりする視覚障害者、画像を表示しない設定にしている閲覧者、一時的に見えない状態に置かれた閲覧者などのために用意されている、音声読み上げ用テキストです。画像を表示できている一般的な設定や環境のもとでは表示されません。テキストの内容は、その画像がもつ情報のなかから"画像を見られない閲覧者が取得して意味のある情報"だけを抽出し、音声に変換しやすい平易かつ端的な文を理想とします。最下段にかなり説明を要する画像と例文がありますが、詳しくは「w:画像の代替テキスト」をご覧ください。以下、alt2と続きます。
• caption1　1枚目に指定した画像のキャプションを記します。画像の下に表示されます。以下、caption2と続きます。
• link1　1枚目に指定した画像をクリックした時に表示される記事名。以下、link2と続きます。指定しない場合（引数ごと省く場合）は、画像の詳細ページが表示されます。空白にした場合（ |link1= とのみ記述した場合）はクリックしても何も起こりません。リンクを設定した使用例を参照。ライセンスがパブリックドメインの画像にのみ、この機能を使用して下さい。「画像リンクの注意」を参照のこと。
• background color　画像ボックスの背景色を指定します。「背景色を設定した使用例」を参照のこと。
• 画像説明文欄 (header, footer, captions) は任意で入力します。

{{multiple image
 | align     = left/right/center
 | direction = horizontal/vertical
 | header    = 
 | header_align = left/right/center
 | header_background = 
 | footer    = 
 | footer_align = left/right/center
 | footer_background = 
 | width     = 

 | image1    = 
 | width1    = 
 | alt1      = 
 | caption1  = 

 | image2    = 
 | width2    = 
 | alt2      = 
 | caption2  = 

 | image3    = 
 | width3    = 
 | alt3      = 
 | caption3  = 

 | image4    = 
 | width4    = 
 | alt4      = 
 | caption4  = 

 | image5    = 
 | width5    = 
 | alt5      = 
 | caption5  = 
}}

使用例

イエローカードで警告、レッドカードで退場となります。

{{multiple image
 | footer    = [[イエローカード]]で[[警告]]、[[レッドカード]]で[[退場]]となります。
 | width     = 60
 | image1    = Yellow card.svg
 | alt1      = イエローカード
 | image2    = Red card.svg
 | alt2      = レッドカード
}}

{{multiple image
 | align     = left
 | direction = vertical
 | header    = [[透明チャネル]]を含む[[Portable Network Graphics|PNG]]画像
 | width     = 200
 | image1    = PNG transparency demonstration 1.png
 | alt1      = 白の背景に色とりどりのサイコロ
 | caption1  = 8ビット透明チャネルを含むPNG画像
 | image2    = PNG transparency demonstration 2.png
 | caption2  = 同じ画像を[[市松模様]]の背景の上に重ねたもの
 | alt2      = 市松模様の背景に色とりどりのサイコロ
}}

透明チャネルを含むPNG画像

8ビット透明チャネルを含むPNG画像

同じ画像を市松模様の背景の上に重ねたもの

2から始まる数の順番

{{multiple image
 | footer   = 2から始まる数の順番
 | width    = 60
 | image1   = Ribbon numeral 2.png
 | alt1     = 2
 | image2   = Ribbon numeral 3.png
 | alt2     = 3
 | image3   = Ribbon numeral 4.png
 | alt3     = 4
}}

背景色を設定した使用例

レンプクソウ (Adoxa moschatellina)

{{multiple image
 | image1=Adoxa_moschatellina_210406.jpg
 | alt1=緑色のハーブと、黄色と白の小さな花。

 | image2=Adoxa_moschatellina_210406a.jpg
 | alt2=緑色の葉っぱに囲まれた、黄色と白の小さな花3輪。

 | image3=adoxa_moschatellina_blatt.jpeg
 | alt3=3枚の葉っぱそれぞれに3つの裂片（れつへん）

 | footer=[[レンプクソウ]] (''Adoxa moschatellina'')
 | footer_background=#BD9
 | background color=#BD9
 | footer_align=center
 | width=160
}}

リンクを設定した使用例

参考：魚のマス

1. ラバ

2. ロバ

3. マス

ラバ（1）の画像をクリックするとラバの記事が表示されます。ロバ（2）の画像の場合クリックしても何も起こりません。マス（3）の画像をクリックすると画像の詳細ページが表示されます。

{{multiple image
 | footer    = ラバ（左）の画像をクリックすると[[ラバ]]の記事が表示されます。ロバ（中）の画像の場合クリックしても何も起こりません。マス（右）の画像をクリックすると画像の詳細ページが表示されます。
 | align     = left
 | caption_align = center

 | image1    = Juancito.jpg
 | width1    = 143
 | alt1      = ラバ
 | caption1  = 1. ラバ
 | link1     = ラバ

 | image2    = Donkey 1 arp 750px.jpg
 | width2    = 150
 | alt2      = ロバ
 | caption2  = 2. ロバ
 | link2     =

 | image3    = Rainbow_trout.png
 | width3    = 91
 | alt3      = マス（サカナの鱒）
 | caption3  = 3. マス
}}

total_widthを設定した使用例

1. ラバ

2. ロバ

3. マス

total_width を使用すると全体の横サイズが指定でき、自動で画像の縦サイズも統一されます。この例は350に設定しています。

その他の使用例

ブラウニー

古い家に棲み着いている精霊・ブラウニーが、台所の床のごみと汚れを取り除こうと箒を使って掃除している。

---

描き手はイングランドの挿絵画家アーサー・ラッカム。1910年発表の水彩画。

単独で使用しています。header に白抜き文字を使った例でもあります。白抜き文字には Font color とウェブカラーを使っています。ウェブカラーについて、ここでは英語名を使いましたが、HTML色名の場合は #191970 と入力します。

{{multiple image
 | align     = right
 | header    = {{font color|white|ブラウニー}}
 | header_background = midnightblue
 | image1    = Illustration of a brownie by Arthur Rackham.jpg
 | width1    = 230
 | alt1      = アーサー ラッカムの挿絵。自らの背丈の倍近くある長いエダボウキ（ゴワゴワした木の枝で出来ている箒）を使って台所の床の汚れを取りのぞこうとしているブラウニーを描いた水彩画。赤黒い頭巾をかぶっている。
 | caption1  = 古い[[家]]に棲み着いている[[精霊]]・[[ブラウニー]]が、[[台所]]の床の[[ごみ]]と汚れを取り除こうと[[箒]]を使って[[掃除]]している。<hr />描き手は[[イングランド]]の[[挿絵]]画家[[アーサー・ラッカム]]。[[1910年]]発表の[[水彩画]]。
}}

TemplateData

これはビジュアルエディターやテンプレートウィザードにより使用されるテンプレートのためのTemplateData文書です。

Multiple image

2つ以上の写真を縦や横に並べることができるテンプレートです。

テンプレートパラメーター[テンプレートデータを編集]

このテンプレートはカスタムの書式を採用します。

パラメーター		説明	型	状態
配置	align	周囲のテキスト折り返しや配置を設定します。「none」はテキストを折り返さないでボックスを左端に配置します。「center」はテキストを折り返さずボックスを中央に配置し、「left」と「right」はテキストを折り返した上で画面のそれぞれ左と右に配置します。 値の候補 left center right none 既定 right 例 left/right/center/none	文字列	推奨
並べ方	direction	画像の並べ方を指定します。デフォルトは horizontal（水平）です。verticalを選ぶと縦に並びます。 値の候補 horizontal vertical 既定 horizontal 例 horizontal/vertical	文字列	推奨
フレーム幅	total_width	画像フレーム全体の幅（水平方向の長さ）を指定します。pxは入れないでください。 例 400	数値	推奨
画像配列	perrow	画像配列を作成します。単一の数値、または各行を/で区切った数値リストを入力します。total_widthと組み合わせて画像のサイズを自動調整することもできます。 例 1 / 2 / 1	文字列	省略可能
画像幅	width	Width overrides Width 1, Width 2, Width 3, etc. If you want the images to be different sizes, do not provide the width parameter. Integer width in pixels; no "px" suffix 例 200	数値	省略可能
背景色	background color	Defines the background color between the border of the box and the images. Changing the background can be bad for accessibility, avoid when possible. 例 #EEFFGG or red	文字列	省略可能
CSSクラス	class	テンプレートのCSSクラス。主にダークモードテーマオプションに使用されます。skin-invert-imageを指定すると全ての画像で色反転などダークモード機能が有効になります。ダークモードで化学構造などを適切に表示するために必要になります。このパラメータは日本語版Wikipediaの独自パラメータです。(半角空白で区切る) 例 skin-invert-image / bg-transparent	文字列	省略可能
最下部キャプション	footer	最下部のキャプションを入力します。個々の画像ではなく全体に係るキャプションが必要な場合に使います。また、画像は画像だけで連続して表示し、全てのキャプションを最下部でまとめて入力したい場合に使います。	内容	省略可能
最下部キャプション寄せ	caption_align	最下部のキャプションを左右と中央のどこに寄せるか指定します。デフォルトは left（左寄せ）です。 値の候補 left center right 既定 left 例 left/right/center	文字列	省略可能
画像1	image1	1つ目の画像を指定します。「File:」は入れないでください。image2以降も同様です。 例 example.jpg	ファイル	必須
CSSクラス1	class1	画像1のCSSクラス。主にダークモードテーマオプションに使用されます。skin-invert-imageを指定すると画像1で色反転などダークモード機能が有効になります。ダークモードで化学構造などを適切に表示するために必要になります。(半角空白で区切る) 例 skin-invert-image / bg-transparent	文字列	省略可能
幅1	width1	1つ目の画像の幅です。	数値	省略可能
代替テキスト1	alt1	1枚目に指定した画像の代替テキスト。画像を表示しない環境を選択している場合や表示できない環境あるいは状況の下でのみ用いられる文字情報です。代替テキストというのは、画像を見ることができなかったり見づらかったりする視覚障害者、画像を表示しない設定にしている閲覧者、一時的に見えない状態に置かれた閲覧者などのために用意されている、音声読み上げ用テキストです。画像を表示できている一般的な設定や環境のもとでは表示されません。テキストの内容は、その画像がもつ情報のなかから"画像を見られない閲覧者が取得して意味のある情報"だけを抽出し、音声に変換しやすい平易かつ端的な文を理想とします。最下段にかなり説明を要する画像と例文がありますが、詳しくは「w:画像の代替テキスト」をご覧ください。以下、alt2と続きます。	短いテキスト	推奨
説明1	caption1	画像1の説明です。caption2以降も同様です。	内容	推奨
Link 1	link1	Where the first page links to. Similarly for Link 2, etc. If not specified, image links to the image description page as usual. If specified to the empty value, the image does not link anywhere; this should be used for purely decorative images as per [[WP:ALT]]. Important: If the image is under a free license like the GFDL or a CC license, you must not use this parameter as the terms of those licenses require the license, or a link to it, to be reproduced with the image. The image must, therefore, link to its image page. Public domain and (theoretically) non-free use images are not subject to this restriction.	ページ名	省略可能
Thumbtime 1	thumbtime1	If image1 is an Ogg Theora file, sets the time within the video that is used for the initial display. Either a number of seconds or hours:minutes:seconds. Similarly for Thumb time 2, etc.	文字列	省略可能
画像2	image2	説明なし 例 example.jpg	ファイル	推奨
Class 2	class2	説明なし	文字列	省略可能
Width 2	width2	説明なし	数値	省略可能
Alt text 2	alt2	説明なし	短いテキスト	推奨
Caption 2	caption2	説明なし	内容	推奨
Link 2	link2	説明なし	ページ名	省略可能
Thumbtime 2	thumbtime2	説明なし	文字列	省略可能
画像3	image3	説明なし 例 example.jpg	ファイル	省略可能
Class 3	class3	説明なし	文字列	省略可能
Width 3	width3	説明なし	数値	省略可能
Alt text 3	alt3	説明なし	短いテキスト	省略可能
Caption 3	caption3	説明なし	内容	省略可能
Link 3	link3	説明なし	ページ名	省略可能
Thumbtime 3	thumbtime3	説明なし	文字列	省略可能
画像4	image4	説明なし 例 example.jpg	ファイル	省略可能
Class 4	class4	説明なし	文字列	省略可能
Width 4	width4	説明なし	数値	省略可能
Alt text 4	alt4	説明なし	短いテキスト	省略可能
Caption 4	caption4	説明なし	内容	省略可能
Link 4	link4	説明なし	ページ名	省略可能
Thumbtime 4	thumbtime4	説明なし	文字列	省略可能
画像5	image5	説明なし 例 example.jpg	ファイル	省略可能
Class 5	class5	説明なし	文字列	省略可能
Width 5	width5	説明なし	数値	省略可能
Alt text 5	alt5	説明なし	短いテキスト	省略可能
Caption 5	caption5	説明なし	内容	省略可能
Link 5	link5	説明なし	ページ名	省略可能
Thumbtime 5	thumbtime5	説明なし	文字列	省略可能
画像6	image6	説明なし 例 example.jpg	ファイル	省略可能
Class 6	class6	説明なし	文字列	省略可能
Width 6	width6	説明なし	数値	省略可能
Alt text 6	alt6	説明なし	短いテキスト	省略可能
Caption 6	caption6	説明なし	内容	省略可能
Link 6	link6	説明なし	ページ名	省略可能
Thumbtime 6	thumbtime6	説明なし	文字列	省略可能
画像7	image7	説明なし 例 example.jpg	ファイル	省略可能
Class 7	class7	説明なし	文字列	省略可能
Width 7	width7	説明なし	数値	省略可能
Alt text 7	alt7	説明なし	短いテキスト	省略可能
Caption 7	caption7	説明なし	内容	省略可能
Link 7	link7	説明なし	ページ名	省略可能
Thumbtime 7	thumbtime7	説明なし	文字列	省略可能
画像8	image8	説明なし 例 example.jpg	ファイル	省略可能
Class 8	class8	説明なし	文字列	省略可能
Width 8	width8	説明なし	数値	省略可能
Alt text 8	alt8	説明なし	短いテキスト	省略可能
Caption 8	caption8	説明なし	内容	省略可能
Link 8	link8	説明なし	ページ名	省略可能
Thumbtime 8	thumbtime8	説明なし	文字列	省略可能
画像9	image9	説明なし 例 example.jpg	ファイル	省略可能
Class 9	class9	説明なし	文字列	省略可能
Width 9	width9	説明なし	数値	省略可能
Alt text 9	alt9	説明なし	短いテキスト	省略可能
Caption 9	caption9	説明なし	内容	省略可能
Link 9	link9	説明なし	ページ名	省略可能
Thumbtime 9	thumbtime9	説明なし	文字列	省略可能
画像10	image10	説明なし 例 example.jpg	ファイル	省略可能
Class 10	class10	説明なし	文字列	省略可能
Width 10	width10	説明なし	数値	省略可能
Alt text 10	alt10	説明なし	短いテキスト	省略可能
Caption 10	caption10	説明なし	内容	省略可能
Link 10	link10	説明なし	ページ名	省略可能
Thumbtime 10	thumbtime10	説明なし	文字列	省略可能
画像間隔	image_gap	Override the distance between adjacent images. Integer width in pixels; no "px" suffix 既定 5 例 20	数値	省略可能
スタイル	image_style	フレーム全体の画像のスタイルを指定します。	文字列	省略可能
Header	header	A header text to place above the entire frame.	内容	省略可能
Header background	header_background	Defines the background color of the header field. Changing the background can be bad for accessibility, avoid when possible 例 #EEFFGG or red	文字列	省略可能
Header alignment	header_align	説明なし 既定 center 例 left/right/center	文字列	省略可能
Footer background	footer_background	Defines the background color of the footer field. Changing the background can be bad for accessibility, avoid when possible 例 #EEFFGG or red	文字列	省略可能
Footer alignment	footer_align	説明なし 値の候補 left center right 既定 left 例 left/right/center	文字列	省略可能
Show or hide border	border	Use value "infobox" to hide the border when using the template within an infobox. 値の候補 infobox	不明	省略可能

関連項目

• {{Double image aside}}
• {{Double image stack}}
• {{Triple image}}
• {{Vertical images list}}

この解説は、Template:Multiple image/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (編集 | 差分)とテストケース (編集)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。