Template:Multiple image
このテンプレートは2,400以上のページで使われています。 余計な混乱やサーバーへの負荷を避けるために、どんな変更でも最初はテンプレートのサンドボックス・サブページ、テストケース・サブページもしくはあなた自身の利用者スペースのページで試すべきです。そうすれば、試した変更を1度の編集でこのテンプレートに加えることができます。しかし、最初にあなたの提案した変更を、この項目のノートで議論するようにお願いします。 |
Luaモジュールを使用しています: |
このテンプレートはテンプレートスタイルを使用しています: |
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 = }}
使用例
画面幅720px以下では画像が複数段に表示される場合があるため、左・中・右といった言葉で画像を指示することは避け、キャプションに番号を振るなどして指示することが好ましいです。 |
{{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 = 市松模様の背景に色とりどりのサイコロ }}
{{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 }}
背景色を設定した使用例
{{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番目のラバの画像はFile:Juancito.jpgで、2番目のロバはFile:Donkey 1 arp 750px.jpgです。 |
参考:魚のマス
{{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を設定した使用例
その他の使用例
単独で使用しています。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}}