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

This template creates a box with two to ten images arranged vertically or horizontally with captions for the entire box and each image.

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

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

パラメーター		説明	型	状態
Alignment	align	Sets text-wrapping around image box, where "none" places the box on the left edge with no text-wrapping, "center" places the box at center with no text-wrapping and "left" and "right" refer to position of box on screen with text-wrapping. 値の候補 left center right none 既定 right 例 left/right/center/none	文字列	省略可能
Direction	direction	Direction in which to tile the images. 値の候補 horizontal vertical 既定 horizontal 例 horizontal/vertical	文字列	推奨
Frame width	total_width	Use to scale the images to the same height and this total width. Do not use both total_width and width. Integer width in pixels; no "px" suffix 例 400	数値	推奨
Row layout	perrow	Create an array of images, with multiple rows. The value passed to may be a single number or a list of numbers with each row delimited by /. Can be combined with total_width for automatic sizing of images. 例 1 / 2 / 1	文字列	省略可能
Image width	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	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	文字列	省略可能
Caption alignment	caption_align	説明なし 値の候補 left center right 既定 left 例 left/right/center	文字列	省略可能
Image 1	image1	Image 1 is name of first image. Similarly for Image 2, etc. File name only; no "File:" or "Image:" prefix. 例 example.jpg	ファイル	必須
CSSクラス1	class1	画像1のCSSクラス。主にダークモードテーマオプションに使用されます。skin-invert-imageを指定すると画像1で色反転などダークモード機能が有効になります。ダークモードで化学構造などを適切に表示するために必要になります。(半角空白で区切る) 例 skin-invert-image / bg-transparent	文字列	省略可能
Width 1	width1	Width 1 is width of first image. Similarly for Width 2, etc.	数値	省略可能
Alt text 1	alt1	The [[alt text]] of first image (see [[WP:ALT]]). Similarly for Alt text 2, etc.	行	推奨
Caption 1	caption1	Caption 1 is caption of first image. Similarly for Caption 2, etc.	内容	推奨
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.	文字列	省略可能
Image 2	image2	説明なし 例 example.jpg	ファイル	推奨
Class 2	class2	説明なし	文字列	省略可能
Width 2	width2	説明なし	数値	省略可能
Alt text 2	alt2	説明なし	行	推奨
Caption 2	caption2	説明なし	内容	推奨
Link 2	link2	説明なし	ページ名	省略可能
Thumbtime 2	thumbtime2	説明なし	文字列	省略可能
Image 3	image3	説明なし 例 example.jpg	ファイル	省略可能
Class 3	class3	説明なし	文字列	省略可能
Width 3	width3	説明なし	数値	省略可能
Alt text 3	alt3	説明なし	行	省略可能
Caption 3	caption3	説明なし	内容	省略可能
Link 3	link3	説明なし	ページ名	省略可能
Thumbtime 3	thumbtime3	説明なし	文字列	省略可能
Image 4	image4	説明なし 例 example.jpg	ファイル	省略可能
Class 4	class4	説明なし	文字列	省略可能
Width 4	width4	説明なし	数値	省略可能
Alt text 4	alt4	説明なし	行	省略可能
Caption 4	caption4	説明なし	内容	省略可能
Link 4	link4	説明なし	ページ名	省略可能
Thumbtime 4	thumbtime4	説明なし	文字列	省略可能
Image 5	image5	説明なし 例 example.jpg	ファイル	省略可能
Class 5	class5	説明なし	文字列	省略可能
Width 5	width5	説明なし	数値	省略可能
Alt text 5	alt5	説明なし	行	省略可能
Caption 5	caption5	説明なし	内容	省略可能
Link 5	link5	説明なし	ページ名	省略可能
Thumbtime 5	thumbtime5	説明なし	文字列	省略可能
Image 6	image6	説明なし 例 example.jpg	ファイル	省略可能
Class 6	class6	説明なし	文字列	省略可能
Width 6	width6	説明なし	数値	省略可能
Alt text 6	alt6	説明なし	行	省略可能
Caption 6	caption6	説明なし	内容	省略可能
Link 6	link6	説明なし	ページ名	省略可能
Thumbtime 6	thumbtime6	説明なし	文字列	省略可能
Image 7	image7	説明なし 例 example.jpg	ファイル	省略可能
Class 7	class7	説明なし	文字列	省略可能
Width 7	width7	説明なし	数値	省略可能
Alt text 7	alt7	説明なし	行	省略可能
Caption 7	caption7	説明なし	内容	省略可能
Link 7	link7	説明なし	ページ名	省略可能
Thumbtime 7	thumbtime7	説明なし	文字列	省略可能
Image 8	image8	説明なし 例 example.jpg	ファイル	省略可能
Class 8	class8	説明なし	文字列	省略可能
Width 8	width8	説明なし	数値	省略可能
Alt text 8	alt8	説明なし	行	省略可能
Caption 8	caption8	説明なし	内容	省略可能
Link 8	link8	説明なし	ページ名	省略可能
Thumbtime 8	thumbtime8	説明なし	文字列	省略可能
Image 9	image9	説明なし 例 example.jpg	ファイル	省略可能
Class 9	class9	説明なし	文字列	省略可能
Width 9	width9	説明なし	数値	省略可能
Alt text 9	alt9	説明なし	行	省略可能
Caption 9	caption9	説明なし	内容	省略可能
Link 9	link9	説明なし	ページ名	省略可能
Thumbtime 9	thumbtime9	説明なし	文字列	省略可能
Image 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	image_gap	Override the distance between adjacent images. Integer width in pixels; no "px" suffix 既定 5 例 20	数値	省略可能
Image style	image_style	Override the default styling of the image frame.	文字列	省略可能
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	footer	Caption that spans the entire box, as opposed to individual images. Avoid "left" and "right" if possible, since mobile devices may display the images vertically.	内容	省略可能
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のサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。