View source for Help:Images/ja

<languages/>
{{PD Help Page}}
このページでは、ウィキを編集する際の'''画像'''の構文を説明します。
ページで画像を使用するには、通常、あなたまたは別の利用者が[[Special:MyLanguage/Help:Managing files|画像をアップロード]]する必要があります。

MediaWiki サーバーに保存された画像は、通常、<code>File:</code> 名前空間接頭辞を使用して (ただし、古い <code>Image:</code> 名前空間接頭辞も、同様の役割を果たすものとしてサポートされています)、MediaWiki のページへのリンクターゲットとして表示されます。
変種、<code>Media:</code>名前空間接頭辞は、元のメディアファイルの中身を参照するのに使えます（そのファイルを別に表示またはダウンロードする、MediaWIki ページ以外のため）。

<span id="Requisites"></span>
== 必要条件 ==
利用者は自分のページで画像を使用する前に、ウィキのシステム管理者から[[Special:MyLanguage/Manual:Configuring file uploads|画像アップロード権限を受け]]、[[Special:MyLanguage/Help:Managing files|画像のアップロード]] を行います。
システム管理者はまた、[http://commons.wikimedia.org/wiki/Main_Page ウィキメディア・コモンズ]など[[Special:MyLanguage/Manual:Image Administration#Foreign Repositories|外部サイトのリポジトリ]]からウィキにファイルを受け入れる設定ができます。
サーバ側で画像のリサイズをするには、（[[:ja:GD Graphics Library|GD2]]や[[:ja:ImageMagick|ImageMagick]]など）スケーラを構成する必要があります。

<span id="Supported_media_types_for_images"></span>
== 対応している画像のメディアの種類 ==

既定では以下のファイル形式に対応しています:

* <code>.jpg</code> または <code>.jpeg</code> - 標準 JPEG 形式で圧縮されたビットマップ画像 (この非可逆形式は、写真に最も適しています)
* <code>.png</code> - ''[[:ja:Portable Network Graphics|Portable Network Graphics]]''形式のビットマップ画像 ("W3 Consortium"で指定されています)
* <code>.gif</code> - レガシーの''[[:ja:Graphics Interchange Format|グラフィック インターチェンジ形式]]''のビットマップ画像
* <code>.webp</code> - <span lang="en" dir="ltr" class="mw-content-ltr">[[w:WebP|WebP]] supports both lossy and lossless compression while reducing image size by up to 45%.</span>

Wikimediaで使われ、それ以外のどこでも一般的に有効な形式（これらはデフォルトで有効な分に加え、特別な設定が必要な場合があります）

* <code>.svg</code> - ''[[:ja:Scalable Vector Graphics|Scalable Vector Graphics]]''形式のベクター画像（「''[[:ja:World Wide Web Consortium|W3 Consortium]]''」で策定） [[Special:MyLanguage/Manual:Image Administration#SVG|Manual:画像の管理#SVG]] を参照してください。
* <code>.tiff</code> - [[:ja:Tagged Image File Format|タグ付けされた]]画像書式 しばしば、資料保存のための高画質な写真に用いられます。 しばしば、{{ll|Extension:PagedTiffHandler}} と一緒に用いられます。
* <code>.ogg</code>, <code>.oga</code>, <code>.ogv</code> - Ogg マルチメディア (音声または動画) 画像形式ではありませんが、同様に扱われます。 しばしば、{{ll|Extension:TimedMediaHandler}} と一緒に用いられます。(訳注: Extension:OggHandler は廃止済み)
* <code>.pdf</code> - ''[[:ja:Portable Document Format|Portable Document Format]]''形式の複数ページドキュメント（当初は “''Adobe''” によって策定されていました） しばしば、{{ll|Extension:PdfHandler}} と一緒に用いられます。
* <code>.djvu</code> - ''[[:ja:DejaVu|DjVu]]'' 形式の複数ページのビットマップ文書 (ほとんどの場合、書籍のスキャンに使われます)。 {{ll|Manual:How to use DjVu with MediaWiki}} を参照してください
*: 一度に表示できる <code>.pdf</code> / <code>.djvu</code> ファイルは 1 点のみです。

他のメディアタイプもサポートできますが、インラインに表示できないかも知れません。

<span id="Rendering_a_single_image"></span>
== 単純な画像の処理 ==

<span id="Syntax"></span>
=== 構文 ===

画像を表示するための完全な構文は以下の通りです:
 <nowiki>[[</nowiki>File:''filename.extension''|''options''|''caption'']]

ただし ''オプション'' は、以下のいずれかを 0 個以上並べてパイプ記号 ('''|''') で区切ったものです。

* ''[[#Format|書式]]'' オプション: '''border''' (余白) および/または '''frameless''' (枠なし)、'''frame''' (枠あり)、'''thumb''' (サムネイル、'''thumbnail''' も可)。 Note: '''border''' can be used in combination with '''frameless''' but will be ignored if used with one of the other options.
*: ページ内で画像を描写する書式と埋め込みの方式を決めます。
* ''[[#Size and frame|サイズ調整]]''のオプション：以下のいずれか
** ''{width}'''''px''' — ピクセル単位で幅を上限に合わせる。高さは無調整。 (整数画素の値のみサポートされます。 幅の指定値と「px」のあいだに空白スペースが入っても問題ありません。)
** '''x'''''{height}'''''px''' — ピクセル単位で幅は無調整、高さは上限 整数画素の値のみサポートされます。 高さの値と"px"の間に空白文字があってもよい。
** ''{width}'''''x'''''{height}'''''px''' — ピクセル単位で幅も高さも上限値 整数画素の値のみサポートされます。 幅の指定値と「px」のあいだに空白スペースが入っても問題ありません。
** '''upright''' — <span lang="en" dir="ltr" class="mw-content-ltr">Resizes an image to a multiple of the user's thumbnail size preferences – or the default thumbnail size, for logged-out users or logged-in users who have not changed their preferences – to fit within reasonable dimensions.</span> <span lang="en" dir="ltr" class="mw-content-ltr">This option is often useful for images whose height is larger than their width.</span> <span lang="en" dir="ltr" class="mw-content-ltr">Requires either '''thumb''' or '''frameless'''.</span> <code>|upright=1.0|</code>の設定により、画像は利用者の既定の画像幅で表示。 <code>|upright=2.0|</code> により、幅は利用者の既定の2倍で画像を表示。
*: 画像の縦横比は常に再現されます。
*: スケーラブルではない画像の縮小可能ですが、拡大はできません。たとえばビットマップ画像がこれに該当。
*: <code>upright</code>の設定は等号不要です。<code>|upright 2.0|</code>と記すだけで<code>|upright=2.0|</code>と同じ指定になります。
*: 数値もしくは等号がない場合 (例えば<code>|upright|</code>のみ)、既定で<code>|upright=0.75|</code>になります (ただし<code>|upright=|</code>は<code>|upright=1.0|</code>と同等になる)
*: 既定の最大サイズは''format''要素と内部の画像サイズ指定に依存（メディアの種類別に異なります）。
* ''[[#Horizontal alignment|水平位置]]''オプション：'''left'''、 '''right'''、'''center'''、'''none'''のいずれかひとつ。 複数のオプションを記述した場合、1番目のみ採用
*: 画像と文章の水平方向の位置関係（テキストの回り込みの有無）を決めます（既定値なし）。
* ''[[#Vertical alignment|垂直位置]]オプション''：  '''baseline'''、'''sub'''、'''super'''、'''top'''、'''text-top'''、'''middle'''、'''bottom'''のいずれかひとつ。
*: 同じブロック内の前後のテキストに対して、非浮動インライン画像の垂直方向の配置を決めます（既定の垂直方向の配置は '''middle'''）。
* ''[[#Altering the default link target|リンク]] オプション'': 以下のいずれか
** '''link='''''{target}'' — 生成されたリンクのリンク先を (任意のページ名または URL に) 変更できるようにする。レンダリングされた画像上で使用できる。例: <code><nowiki>[[File:Example.jpg|20px|link=http://www.wikipedia.org]]</nowiki></code> は [[File:Example.jpg|20px|link=http://www.wikipedia.org]] (外部リンク) として、<code><nowiki>[[File:Example.jpg|20px|link=MediaWiki]]</nowiki></code> は [[File:Example.jpg|20px|link=MediaWiki]] (内部リンク) としてレンダリングされる。
** '''link=''' (値が空の場合) —  ([[rev:41727|MediaWiki 1.14+]]) リンクをつけない画像表示。例　<code><nowiki>[[</nowiki>File:Example.jpg|20px|link=]]</code>は[[File:Example.jpg|20px|link=]]として処理。
*:もし<code>link</code>と等号のあいだに空白スペースが入ると、リンクはキャプションとして表示されます。
*:<code>"</code>に対して<code>%22</code>を使用するなど、幾つかのHTML文字に相当するものを含めると、リンク文が説明文として扱われることがあります（[[phabricator:T306216]]をご覧ください）。
<!--*** '''!''' Link does '''not''' work with thumb, thumbnail or frame. (This works for external and internal links)-->
*: '''!''' MW 1.24以前の場合：<code>|link=|</code> (empty) に設定すると<code>title</code>は処理されません。（[[phabricator:T23454]]参照。）
* その他の固有のオプション:
** '''alt='''''{alternative text}'' — ([[rev:41837|MediaWiki 1.14+]]) 特定の画像の代替テキストを指定 (作成された {{tag|img|single}} 要素に対するHTML属性として<code>alt="..."</code>を呼び出し)、指定した画像のダウンロードと埋め込みに失敗した場合や、サポートメディアが代替の説明文を使用する必要がある状況 (点字リーダーの使用中または利用者がブラウザーのアクセシビリティのオプションを設定) で表示します。
*:もし<code>alt</code>と等号のあいだに空白スペースが入ると、代替文はキャプションとして表示されます。
** '''page='''''{number}'' — 特定のページ番号を表示（現状では.djvuもしくは.pdf形式のファイルにのみ適用）。
** '''thumbtime='''''{number}'' — <span lang="en" dir="ltr" class="mw-content-ltr">Renders a thumbnail from the video at the specified timestamp in seconds or MM:SS or HH:MM:SS format (only applicable when showing a video file).</span>
** '''start='''''{number}'' — <span lang="en" dir="ltr" class="mw-content-ltr">When video playback is started it will start at the specified timestamp in seconds or MM:SS or HH:MM:SS format (only applicable when showing a video file).</span>
** '''muted''' — <span lang="en" dir="ltr" class="mw-content-ltr">When media playback is started, audio will be muted.</span>
** '''loop''' — <span lang="en" dir="ltr" class="mw-content-ltr">Media will loop continuously. (only applies to audio and video)</span>
** '''lossy='''''{false}'' — ({{ll|Extensions:PagedTiffHandler|PagedTiffHandler}}) <span lang="en" dir="ltr" class="mw-content-ltr">For using PNG instead of JPG thumbnails for Tiff images</span>
** '''class='''''{html class}'' — (MediaWiki 1.20+)クラスを定義します (生成された {{tag|span}} 要素の周りにラップされた {{tag|img|single}} 要素の HTML 属性 <code>class="..."</code> にマップします)。
{{note|1=<span lang="en" dir="ltr" class="mw-content-ltr">Default behavior since MediaWiki 1.40, optional since MediaWiki 1.36.</span><ref>{{ll|Manual:$wgParserEnableLegacyMediaDOM}}</ref>
<span lang="en" dir="ltr" class="mw-content-ltr">Previously the class was applied directly to the {{tag|img|single}} element.</span><ref>{{ll|Parsoid/Parser Unification/Media structure/FAQ#The %7Cclass{{=}} media option is now applied to the wrapper|<span lang="en" dir="ltr" class="mw-content-ltr">The {{!}}class{{=}} media option is now applied to the wrapper</span>}}</ref>}}
** '''lang='''''{language code}'' — (MediaWiki 1.22+) SVGファイルに[http://www.w3.org/TR/SVG/struct.html#SwitchElement &lt;switch&gt;]文を含む場合に''システム言語''属性に依存してファイルを解析する言語を選択します。 既定値はページの言語です (既定値は多くのプロジェクトでプロジェクトの既定の言語です)。

属性に適合するものが全くない場合は、キャプションの文章と見なされます。
パラメータではない文字列を2個以上記入すると、最後の非パラメータ文字列をキャプションとして表示。
キャプションの文章とは、'''thumb'''および'''frame'''モードで画像の下部に表示され、その他の書式だとツールチップに表示されます。
'''thumb'''および'''frame'''モードで表示するキャプションの文章には、ウィキリンクその他の書式を含むことができます。
MediaWiki の拡張機能が追加的なオプションを追加する場合があります。

'alt'を指定しないままキャプションを付けると、代替文はキャプションから書式を削除して自動生成されます。例外として''thumb''もしくは''frame''モードではスクリーンリーダーで読み取りが可能なため、この処理の対象から除外します。

{{note|1=実際のデフォルトの動作は、マルチメディアファイルをフルサイズで表示します。 このため、ファイル幅がページより大きい場合、レスポンシブに問題が発生することがあります。 詳しくは[[phab:T113101]]のタスクをご覧ください。}}


<span id="Format"></span>
=== 書式 ===

次の表は、使用可能な全ての効果を示しています。

{|class="wikitable plainlinks"
|-
!説明
!入力内容
!出力結果
{{Help:Images/frame|frame=|ex='''未指定'''|float=no|inline=yes|render caption=no}}
{{Help:Images/frame|frame=border|ex='''border'''は余白をごく狭くする|float=no|inline=yes|render caption=no}}
{{Help:Images/frame|frame=frameless|ex='''frameless'''はサムネイル画像など、画像の幅は個人設定に合わせ、枠線はなし、右の回りこみはしない。|float=no|inline=yes|render caption=no}}
{{Help:Images/frame|frame=frameless|2=border|ex='''frameless''' および '''border'''|float=no|inline=yes|render caption=no}}
{{Help:Images/frame|frame=frame|ex='''frame'''|float=yes|inline=no|render caption=yes}}
{{Help:Images/frame|frame=thumb|ex='''thumb''' または '''thumbnail'''|float=yes|inline=no|render caption=yes}}
|}

サムネイルが横長ではなく縦長で表示サイズが大きすぎる場合、<code>upright=N</code>を設定できます。「N」は画像の縦横比（幅÷高さ）で、既定値は0.75。
その代わりに、希望する画像の高さに上限（ピクセル単位）を指定することができます。

<code>thumb={filename}</code>を指定すると、サムネイルに別画像を利用できます。

<span id="Size_and_frame"></span>
=== サイズとフレーム ===

サイズ属性の効果は、書式が変わると下記のように異なることがあります。

* サイズを指定しなかった場合の表示は、上記[[#Format|書式]]節を参照してください。
* 書式が未指定、もしくは<code>border</code>付きとだけ指定した場合、画像は任意の大きさに縮小も拡大もできます。
* 下記のサンプル画像のサイズは本来、400 × 267 ピクセルです。
<div lang="en" dir="ltr" class="mw-content-ltr">
* An image with <code>frame</code> always '''ignores''' the size specification; the original image will be reduced if it exceeds the maximum size defined in user preferences, and the page information will display a Linter error.
</div>
* <code>thumb</code> および <code>frameless</code> の画像は、縮小はできますが、画像の元のサイズを超えて拡大することはできません。

{|class="wikitable"
|-
! 書式
! 縮小
! 拡大
{{Help:Images/size|frame=}}
{{Help:Images/size|frame=border}}
{{Help:Images/size|frame=frame}}
{{Help:Images/size|frame=thumb}}
{{Help:Images/size|frame=frameless}}
|}

<span id="Horizontal_alignment"></span>
=== 水平位置 ===

<code>frame</code>または<code>thumb[nail]</code>書式を使う場合、デフォルトの水平位置は左から右への言語では ''right'' となり、右から左への言語では ''left'' となることに注意してください。

{|class="wikitable"
|-
!説明
!入力内容
!出力結果
{{Help:Images/frame|2=100px|frame=|ex='''水平位置は未指定'''もしくは既定|inline=yes|float=no}}
{{Help:Images/frame|2=100px|frame=none|ex=水平位置の指定: '''なし'''|inline=no|float=no}}
{{Help:Images/frame|2=100px|frame=center|ex=水平位置の指定: '''センター'''|inline=no|float=no}}
{{Help:Images/frame|2=100px|frame=left|ex=水平位置の指定: '''左'''|inline=no|float=yes}}
{{Help:Images/frame|2=100px|frame=right|ex=水平位置の指定: '''右'''|inline=no|float=yes}}
|}

<span id="Vertical_alignment"></span>
=== 垂直位置 ===
水平位置の指定オプションが有効になる条件とは、画像がインラインの要素として'''解析され'''、なおかつ浮動ブロック'''ではない'''場合です。
インラインの画像は、同じブロック内にある前後のテキストと同時に解析し、このオプションによって垂直の位置合わせが決まります。

注意事項として、右記の配置制約に従い行間を広げると、画像を挿入した解析済みのテキスト行（ならびに現在の行に続いて解析するテキスト行）を下に移動し、インライン画像を完全に表示できることに注意してください（フォントサイズが可変の文字列、上付き文字や下付き文字の使用でも同様に行間を広げることが可能です）。

<div class="mw-collapsible mw-collapsed">
<div class="mw-collapsible-toggle toccolours" style="float:none;text-align:center">'''{{Blue|1=ソースコード表示の切り替え}}'''</div>
<div class="mw-collapsible-content">
<syntaxhighlight lang="html4strict">
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>
</syntaxhighlight></div></div>

位置指定の結果をより明確に示すには、文字高さの上下を罫線で示し、フォントのサイズは200%に拡大、段落ブロックを細い枠線で囲んであります。さらに異なるサイズの画像を配置しました。

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>'''super:'''</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]] [[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:''' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>

注記:

# 通常、画像の位置指定で垂直方向の"middle"（既定の中央の配置）とは、テキストの高さxとベースラインの中心（ここに画像の高さの中心を合わせ文字の中心を[[:ja:打ち消し線|横切る]]）であって、"text-top"と "text-bottom"の間の空間を示すフォント高さの行高さの中心ではありません。フォント高さは以下を除外します。
#* 行と行の間に補完する空白で、通常はフォント高さの上下に、行余白2箇所に均等に配分されます（このサンプルは200%拡大してあるため0.5em）。
#* 行と行の間に補完する空白で、上付き文字と下付き文字によって追加されます。
# しかしながら画像の高さが原因で、画像の上辺または下辺がテキストの正常な行の全高より上もしくは下に位置する場合は、画像が収まって正しい位置になるように上または下の行マージンを増やして中心の位置を調整し、すべての画像（高さが低いものを含め）を調節後の中心の位置に配置します（コンピュータ処理上は有効な行の高さ、解析した列ごとに高さが大きめのフォントを考慮に入れます）。
# "text-top"と"text-bottom"位置の配置はやはり上付き文字や下付き文字によって追加された分の行間を除外するものの、行高さの指定で増えた行間は含めます。
# "top"と"bottom"位置の配置では、あらゆる行間を増やす要素（解析した行スパン内の上付き文字と下付き文字を含む）を考慮に入れます。 画像の配置指定が原因で、画像が正常の行間より上または下にはみ出さないために画像の位置が正しく配置されない場合には、"top"と"bottom"の配置は（まるで上付き文字と下付き文字のように）画像の影響を受け、解析したテキスト行の有効な行高さは大きくなります。
# 文字装飾の"underline"と"overline"、"overstrike"の位置はこれら2つの制限範囲内に収まるべきで、使用するフォントの種類や高さの影響を受ける''こともあります'' (ブラウザーによっては上付き文字と下付き文字のスタイルが考慮されるものの、通常はそれらのスタイルは無視され装飾は位置の調整を受けません)。このように装飾文字はテキストに対するのとは異なり、通常、画像の垂直方向の配置に影響を与えません。

<span id="Stopping_the_text_flow"></span>
=== 回り込みの解除 ===
ときにはテキスト（あるいはその他のインラインの浮動しない画像）が浮動画像を回り込みしないようにするほうがよい場合があります。
テキストを画像の右側へ流し込むと、節見出し (例えば <nowiki>== 私の見出し ==</nowiki>) がウェブ ブラウザーの画像解像度その他の条件により、本来は利用者が画像の下にあると期待しているのに、画面右側に表示されることがあります。
回り込んだ画像の下にテキストを表示するには、そのテキストの前に'''<syntaxhighlight lang=html inline><br clear=all></syntaxhighlight>'''（好みにより<syntaxhighlight lang=html inline><div style="clear: both"></div></syntaxhighlight>でも可能）を置くと、回り込みを解除できます。
（空行を使わず同じ効果を得るには、回り込みをする画像を含む節を<syntaxhighlight lang=html inline><div style="overflow: hidden">…</div></syntaxhighlight>で挟み、<code>div</code>要素の内部の画像回り込みをすべて解除できます。）

ブロック内で解析した画像（回り込みをせず'''中央'''（center）か'''左'''（left）に配置したり'''右'''（right）に回り込んだ、つまり'''framed'''や'''thumbnail'''モードの回り込みをする画像）はすべて、表面上はそうは見えないものの、周囲のテキスト行を区切っています（現在の画像の前のテキストブロックを終わらせて、その後ろに新しい段落を作成しテキストを流し込むからです）。
それら画像は次に、左右の位置合わせマージン（または'''中央'''に置いた画像のマージンの中心線）に沿って、上下に積み重なります。

<span id="Altering_the_default_link_target"></span>
=== 既定のリンク ターゲットの変更 ===
リンクターゲットの変更と削除の方法を以下のテーブルに示します（既定は画像の説明ページ）。
リンクだけ変えても、上記の節で説明したフォーマットは変更できません。

{|class="wikitable plainlinks"
|-
!説明
!入力内容
!出力結果
{{Help:Images/frame|2=link=Main Page|ex=内部リンク}}
{{Help:Images/frame|2=link=http://wikipedia.org/wiki/Test|ex=外部リンク}}
{{Help:Images/frame|2=link=|ex=リンクなし（外部リンク、ファイルページ）}}
|}

'''警告:'''
: ご利用のウィキによっては、ライセンス要件として著者の帰属、著作権に関する記述、適用されるライセンス条項、あるいはまたレンダリングされた画像の詳細な（修正の履歴を含む）説明を表示する説明ページへの必要なリンクは、一切削除が許可されません。
: もし特定の画像のターゲットリンクを変更または削除する場合、ページの別の場所にこの説明ページへの明示的なリンクを提供するか、または画像を埋め込んだページ自体に該当する要素と異なる場合は、著作権と著者の記述ならびに該当するライセンスへのリンクを表示する必要があります。
: ご利用のウィキの方針によっては、代替のリンク属性の使用を制限したり、埋め込みメディアファイルに代替リンク属性を強く禁止することもあり（この場合にはリンク属性は無視）あるいはまた、権限を与えられたユーザーまたは管理者による検証後のみ、それらを受け入れます。

<span id="Rendering_a_gallery_of_images"></span>
== 画像のギャラリー表示の処理 ==

<span id="Gallery_syntax"></span>
=== ギャラリーの構文 ===
{{tag|gallery|open}}タグを使用し、画像のギャラリー表示を簡単に指定できます。
構文は以下の通りです:

<syntaxhighlight lang=html>
<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>
</syntaxhighlight>

ギャラリータグ内では、画像のコードを大カッコ（[[]]）に入れない点に注意してください。 

キャプションを付けて、ウィキリンクその他の書式指定ができます。
{{note|1=キャプションとして使用されている「center」「left」「right」といった単語は、Linter エラーの誤検出を引き起こします。 詳細は {{phab|T275074}} を参照してください。}}
サムネイルの表示を決める変数のうち、具体的にファイルを変更するものを使用できます。(ページ内に表示する画像の位置指定はしません。)
<span class="mw-translate-fuzzy">一例として、pdfなど複数ページで構成されるメディアの場合は$code（訳注：表示するページの指定）が使えます。</span>

<code>File:</code> 接頭辞は省略可能。
しかしながら省略せずに残しておくと、ウィキ文から画像識別子を探しやすくなります（たとえばページのレイアウトを刷新するときなどに便利）。

例:

<syntaxhighlight lang="moin">
<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
File:Example.jpg|Links to external website|link=https://example.com
File:Example.jpg|link=w:Main_Page|Internal link
Example.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>
</syntaxhighlight>

上記の表示は次のとおりです。

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
File:Example.jpg|Links to external website|link=https://example.com
File:Example.jpg|link=w:Main_Page|Internal link
Example.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>

<span id="mode_parameter"></span>
==== mode パラメーター ====
{{MW 1.22|and after}}
1.22 以降、<code>mode</code> パラメーターの利用が始まり、以下のオプションを使用できます:

* <code>traditional</code> は MediaWiki の既定のギャラリー表示です。(訳注: 枠線あり)
* <code>nolines</code> は <code>traditional</code> に似ていますが、枠線がありません。
* <code>packed</code> は画像の高さのみ統一し、幅は元のサイズに比例します。画像の間にわずかな隙間があります。 この[[:ja:レスポンシブウェブデザイン|レスポンシブウェブデザイン]]（下図）では、列幅は画面の幅に合わせて自動的に調整します。
* <code>packed-overlay</code> は画像の上に半透明の白いボックスを重ね、キャプションを表示します。
* <code>packed-hover</code> は <code>packed-overlay</code> に似ていて、マウスオーバーしたときのみ、半透明のボックスにキャプションを表示します。
* <code>slideshow</code> では画像のスライドショーを作成します。

例:

<syntaxhighlight lang="tid">
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>
</syntaxhighlight>

上記の表示は次のとおりです（<code>packed-hover</code>モード）

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

その他のモードの例:

<code>mode="traditional"</code>
<gallery mode="traditional">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

<code>mode="nolines"</code>
<gallery mode="nolines">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

<code>mode="packed"</code>
<gallery mode="packed">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

<code>mode="packed-overlay"</code>
<gallery mode="packed-overlay">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

<code>mode="packed-hover"</code>
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
</gallery>

{{MW 1.28|and after}}
<code id="slideshow-demo">mode="slideshow"</code>
<gallery mode="slideshow">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

<span id="Optional_gallery_attributes"></span>
=== ギャラリーのその他の属性 ===

ギャラリーのタグ自体、その他の属性をいくつか備えており、それぞれ属性名と値のペアとして表します。

<syntaxhighlight lang=html>
<gallery {parameters}>
{images}
</gallery>
</syntaxhighlight>

* <code>caption="{caption}"</code>：キャプション（2単語以上の文を欧文の半角二重引用符で挟んで指定）をギャラリーの上辺に中央揃えで配置します。キャプションの文は、書式指定やテンプレートその他のマークアップは無効です。
* <code>widths={width}px</code>：画像の幅（最大値）を指定。[[Special:MyLanguage/Manual:$wgGalleryOptions|既定値]]は120px。 <span lang="en" dir="ltr" class="mw-content-ltr">(It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.)</span> ''複数形の width'''s''' であることにご注意ください''.
* <code>heights={heights}px</code>: ：画像の高さ（最大値）を指定。既定値は120px。 <span lang="en" dir="ltr" class="mw-content-ltr">(It has no effect if mode is set to slideshow.)</span>
* <code>perrow={integer}</code>：1列の画像の点数を設定。 <span lang="en" dir="ltr" class="mw-content-ltr">(It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.)</span> 0 にすると、画面の幅に合わせて自動で調整。
* <code>showfilename={anything}</code>：画像1点ごとのキャプションにファイル名を表示（1.17以降）。
* <code>mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}</code>：上記の節を参照（1.22以降。"slideshow"は1.28以降）。
* <code>showthumbnails</code>: 「スライドショー」モード限定で、スライドショー下部に既定で帯状に画像のサムネイルを表示 (1.29以降)。

{{note|1=幅と高さの変数は余白なしで画像の間隔を詰めた"packed"（およびその応用形）モードの絶対値ではなく、推奨値として解釈されます。 "packed"モードでは複数の列の横幅が等しくなるように、画像1点ごとの幅を自動で調整します。}}

; 例 1

構文:

<syntaxhighlight lang=html>
<gallery widths=300px heights=200px>
File:Example.jpg|Lorem ipsum
File:Example.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>
</syntaxhighlight>

結果:

<gallery widths="300px" heights="200px">
File:Example.jpg|Lorem ipsum
File:Example.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>

; 例2

構文:

<syntaxhighlight lang=html>
<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>
</syntaxhighlight>

結果:

<gallery widths="60px" heights="60px" perrow="7" caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

<span id="Row_of_images_that_will_wrap_to_browser_width"></span>
== ブラウザー画面の幅に合わせ画像が次の列に折り返す ==
幅が異なる複数の画像を並べるには、"thumb"、"left"あるいは"none"モードではうまくいきません。
"thumb"モードを使用しない場合 (つまりキャプションなし) は、画像はブラウザー画面の幅に合わせ、次の列に折り返して表示されます。
画像が次の列に折り返すかどうか確かめたい場合は、ブラウザー画面を縮小してみます。

<pre>
[[File:Example.jpg|220px]]
[[File:Example.jpg|100px]]
[[File:Example.jpg|150px]]
[[File:Example.jpg|250px]]
[[File:Example.jpg|200px]]
[[File:Example.jpg|50px]]
[[File:Example.jpg|220px]]
[[File:Example.jpg|175px]]
</pre>

[[File:Example.jpg|220px]]
[[File:Example.jpg|100px]]
[[File:Example.jpg|150px]]
[[File:Example.jpg|250px]]
[[File:Example.jpg|200px]]
[[File:Example.jpg|50px]]
[[File:Example.jpg|220px]]
[[File:Example.jpg|175px]]

'''キャプション付きで幅が異なる画像の列を折り返すには'''統一性のない一覧にdiv HTMLを用いる必要があります。<code>style="display: inline-block;"</code>と併用します。詳細ならびに考え方は、右記の外部リンクで参照できます：[http://www.sitepoint.com/give-floats-the-flick-in-css-layouts Give Floats the Flick in CSS Layouts]（CSSレイアウトで浮動表示に Flick を追加）。

<syntaxhighlight lang="html">
<div><ul> 
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>
</syntaxhighlight>

<div><ul> 
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

'''画像の上端を揃える'''には、vertical-alignコマンドを追加します。

<syntaxhighlight lang="html">
<div><ul> 
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>
</syntaxhighlight>

<div><ul> 
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

wikiファーム（wikiホスティングサービス）によっては、ギャラリー表示のオプションを一部しか備えていません（例："widths"）。
あるいはまた、ユーザーが同じ列に並べる画像それぞれの幅を変えようとすることもあります。
画像を並べるとブラウザーの画面の幅に合わせて自動的に配置するため、ギャラリー表示つまり div HTML を使用せずに、画像にひとつずつ個別のキャプションを付けることはできません。
実際に試してみましょう。ウィキ文を使っても、ギャラリー表示以外ではうまくキャプションを付けられません。画像は右側にある要素の上に重なってしまうか、強制的に水平のスクロールバーを表示してしまいます。

画像左側の回り込み（「left」）を複数の画像に用いるとき、いくつかの画像に「none」を設定した場合も、画像の右側にサイドバーがある場合は特に、挙動が一貫しません。
奇妙な現象も起こることがあります。
ブラウザーのウィンドウ幅またはモニター画面の幅が狭い場合、列幅からはみ出した画像はページのかなり下方の、右側のサイドバーの後に表示されます。

<span id="Link_behavior"></span>
== リンクの挙動 ==
画像の既定のリンク先は、その画像の解説ページになります。
「link=」オプションを使い、既定の挙動を変えさせてその他のページもしくは外部サイトにリンクさせたり、画像のリンク機能を無効にしたりできます。

あるいは別の方法として、文字列でリンクを記述し、ファイルの説明ページへ、あるいはファイルそれ自体へ飛ぶことができます。
{{ll|Help:Linking to files}} を参照してください。

<span id="Display_image,_link_it_to_another_page_or_website"></span>
=== 画像を表示し、他のページもしくは外部サイトにリンクさせる ===
<!--{{note|1=link '''does not work with''' thumb '''or''' frame.}}
(@note above: link worked fine using thumb and frame)
(reply: thanks for pointing this out, must have been a bug fix)
(Note that MediaWiki v. 1.16 fails to link with 'frame' or 'thumb')
-->

「link=」オプションを使い、画像を他のページもしくは外部サイトとリンクします。

下記の画像をクリックすると、[[MediaWiki]]へ飛びます:

 <nowiki>[[</nowiki>File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]

[[File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]

下記の画像をクリックすると、外部リンク''example.com'' へ飛びます:

 <nowiki>[[</nowiki>File:MediaWiki-2020-logo.svg|50px|link=http://example.com]]

[[File:MediaWiki-2020-logo.svg|50px|link=http://example.com]]

<span id="Display_image,_turn_off_link"></span>
=== リンクを隠して画像を表示する ===

「link=」オプションを使い、リンク非表示リンクの値は空に設定します。以下の画像はリンクではありません。

 <nowiki>[[</nowiki>File:MediaWiki-2020-logo.svg|50px|link=]]

[[File:MediaWiki-2020-logo.svg|50px|link=]]

<span id="Link_to_an_image"></span>
=== 画像にリンクする ===

作成するリンクに接頭辞として<code>:</code>を追加します。

 <nowiki>[[:</nowiki>File:MediaWiki-2020-logo.svg]]
[[:File:MediaWiki-2020-logo.svg]]
 <nowiki>[[:</nowiki>File:MediaWiki-2020-logo.svg|Wiki]]
[[:File:MediaWiki-2020-logo.svg|Wiki]]

<span id="Directly_linking_to_an_image"></span>
=== 画像への直接リンク ===
上記の例では、画像の説明ページにリンクしています。
画像に直接リンクするために、以下のMediaWikiのページで擬似名前空間である<code>Media:</code>を使用することができます。

<syntaxhighlight lang="moin">
[[Media:MediaWiki-2020-logo.svg]]
</syntaxhighlight>
[[Media:MediaWiki-2020-logo.svg]]

{{anchor|Direct image access}}
<span id="Direct_links_from_external_sites"></span>
====外部サイトからの直接リンク====
もう一つの可能性は、[[Special:Redirect/file]]ページ（又はそのエイリアスである[[Special:Filepath]]）を利用することです。
上記の例とは異なり、MediaWikiのページだけでなく、外部のWebサイトからもリンクすることができます。

<syntaxhighlight lang="moin">
[[Special:Redirect/file/Wikipedia.png]]
</syntaxhighlight>

また、<code>height</code>及び<code>width</code>のパラメータを追加することで、特定のサイズの画像を返すことも可能です。
画像の縦横比は常に維持されます。

<syntaxhighlight lang="moin">
https://www.mediawiki.org/w/index.php?title=Special:Redirect/file/Wikipedia.png&width=100&height=100
</syntaxhighlight>

{{anchor|Obtain a direct link to an image}}
<span id="Obtaining_the_full_URL_of_an_image"></span>
====画像の完全な URL の取得====

（上記のようにリダイレクトを通さずに）画像のフルパスを取得するには、幾つかの{{ll|Help:magic words|nsp=0}}を使用することができます。

 <nowiki>{{filepath:MediaWiki-2020-logo.svg}}</nowiki>

出力結果：

:{{filepath:MediaWiki-2020-logo.svg}}

これを実行したテンプレートから<code>File:</code>名前空間を削除する必要がある場合には、<code><nowiki>{{PAGENAME}}</nowiki></code> を使います。

 <nowiki>{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}</nowiki>

出力結果：

:{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}

<span id="Files_at_other_websites"></span>
== 外部サイトのファイル == 
オンラインで参照できる外部サイトのファイルにリンクするには、外部サイトへのリンクに使用する構文を流用できます。
その構文を介すると、当該の画像をレンダリングする代わりに、リンク先を示す文字列のみ表示します。

<pre>[http://url.for/some/image.png]</pre>

あるいは表示用に別の文言を代入します。

<pre>[http://url.for/some/image.png ここにリンクする文言を記入]</pre>

表示用の文言として、その他のMediaWikiマークアップあるいはHTML/CSS形式（インラインの要素）の使用も認められます（前後のリンクを壊す場合は埋め込みリンクを除外）。

<pre>[http://www.example.com/some/image.png サンプル'''<del>リッチな</del>''' ''<ins>リンクする文言</ins>''をここに記入。]</pre>

すると以下の表示になります。 [http://www.example.com/some/image.png サンプル'''<del>リッチな</del>''' ''<ins>リンクする文言</ins>''をここに記入。]

ご利用のウィキで利用可能にすると（{{ll|Manual:$wgAllowExternalImages}}を参照）、外部の画像の埋め込みも可能です。手順は画像のURLを記入するだけです。
<pre>http://url.for/some/image.png</pre>
現状では埋め込み画像のサイズ変更は不可能ですが、MediaWikiマークアップあるいはHTML/CSSコードで挟んで書式を決めることはできます。

もしこのウィキのオプションが無効な場合、画像は埋め込まれない代わりに外部サイトへの文字列のリンクとして、上記のように記述されます。

<span id="See_also"></span>
== 関連項目 ==

*[[w:Wikipedia:Extended image syntax|Wikipedia:Extended image syntax]] — 英語版ウィキペディアの編集のガイドライン
*[[w:Category:Wikipedia image help|Category:Wikipedia image help]] — 英語版ウィキペディアの画像関連ヘルプ
*[[:ja:Help:画像の表示|ウィキペディアの画像に関するチュートリアル]]
*[[Wikipedia:Help:Gallery tag]] — 英語版ウィキペディアの画像ギャラリーのリスト
*{{ll|Manual:Adding support for new filetypes}}
*[[phab:T113101]] - レスポンシブな問題
* <span lang="en" dir="ltr" class="mw-content-ltr">[[Special:MyLanguage/Extension:PageImages#Can I exclude certain page images?|Extension:PageImages#Can I exclude certain page images?]]</span>

[[Category:Help{{#translation:}}|Images]]