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年]]発表の[[水彩画]]。
}}

関連項目

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

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