ヘルプ:画像の表示

テンプレート:HJ:h このページでは各ページ上で画像を表示させる方法について説明します。

表示させることのできる画像は、ウィキペディア日本語版またはウィキメディア・コモンズにアップロードされた画像のみです。アップロードの方法などについては「Help:画像などのファイルのアップロードと利用」を参照してください。ここでは既にファイルがアップロードされていることを前提として、それを表示する方法を説明します。どのような場合にどのような表示方法を採るべきかのガイドラインについては「Wikipedia:画像利用の方針」を参照してください。

要点

ウィキペディアでは、XHTML (HTML) について知らない人にも画像を扱うことができるように独自の簡単なマークアップを採用しています。その代わり、XHTMLのIMGタグは無効化されています。

• 書式：オプション （内部リンクのマークアップと同じ）
• オプションは、縦棒（|）で区切って複数指定可能です。順序は不問ですが、矛盾するものを同時に指定した場合は原則として後ろにあるものが優先されます。指定できるオプションの種類をまとめると [[ファイル:{ファイル名}|{表示形式}|{配置}|{サイズ}|{リンク}|{代替文}|{キャプション}]]のようになります。

  表示形式 

  thumb, frame, border または frameless が指定できます。画像を決まった表示形式で表示します。

  配置 

  right, left, center または none が指定できます。ページ中の画像の配置位置を指定します。 thumb または frame を用いている時には、 right が既定値です。このほか、垂直方向の配置も指定できます。

  サイズ 

  {幅}px または {幅}x{高さ}px で指定します。画像の縦横比は保持されます。

  画像リンク

  画像からリンクするページを指定します。

  キャプション 

  上記のいずれかに当てはまらない要素はすべてキャプション用の文字列と認識されます。

  代替文

  読み上げブラウザなどのための代替文をキャプションとは別指定する際に使用します。

  開始ページ指定

  DjVuファイルの場合、 page="ページ番号"で開始ページを指定できます。

ウィキメディア・コモンズにあるファイルを表示するときも、日本語版にあるファイルを表示するときと同じ書き方が使用できます。コモンズからウィキペディアに表示されている画像はファイルページにその旨が自動的に表示されます。

一番簡単な方法

最も簡単な方法はファイル:ファイル名と記述するものです。この場合、アップロードされた画像のサイズのまま表示されます。また表示される位置は、通常の文字と同じようにテキストの中に挿入された形で表示されます。

[[ファイル:Fuji mt s.jpg]]
文章の先頭に置いた場合はこのように表示されます。
なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。

ファイル:Fuji mt s.jpg 文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。

文章で挿むと
[[ファイル:Fuji mt s.jpg]]
このように表示されます。

文章で挿むと ファイル:Fuji mt s.jpg このように表示されます。

ファイル名では、アルファベットの大文字と小文字が区別されます。一方、半角の空白はアンダーバー（_）を使っても同一のものと扱われます。

キャプションをつける

オプションのうち、できるだけ付けるようにしたいのはどのような画像なのかを簡潔に表したキャプション（説明文）です。キャプションとします。

[[ファイル:Fuji_mt_s.jpg|本栖湖から眺めた富士山]]

本栖湖から眺めた富士山

このキャプションは、生成されるXHTMLソースコード中で "a" 要素の "title" 属性として使用されます。この属性はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。

alt= により、"img" 要素の "alt" 属性を指定できます。これは、画像を表示できないブラウザや画像を非表示に設定している場合に画像の代わりに表示したり、音声ブラウザで読み上げたりする代替テキストを指定する属性ですので、画像を言葉で説明する内容が含まれるべきです。インターネット・エクスプローラーなど一部のブラウザではマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。指定がなければ、"alt" 属性は設定されません。

[[ファイル:Fuji_mt_s.jpg|alt=富士山|本栖湖から眺めた富士山]]

XHTML出力文

<a href="/wiki/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Fuji_mt_s.jpg" class="image" title="本栖湖から眺めた富士山"><img alt="富士山" src="http://upload.wikimedia.org/wikipedia/ja/4/41/Fuji_mt_s.jpg" width="431" height="269" border="0" /></a>

なお、ファイル挿入のマークアップの閉じ括弧の直前にパイプ記号 ("|") を置かないように注意してください。パイプ付きリンクの機能のために、閉じ括弧の直前にパイプ記号があると、指定してあるキャプションは無視され、ファイル名がキャプションとして使用されてしまいます。

[[ファイル:tst.png|abc]]
[[ファイル:tst.png|abc|]]

abc ファイル:Tst.png

オプション

キャプションの他に、画像の表示サイズを変えたり表示する位置を決めたり、額縁のように画像の周りに枠をつけたりすることができます。これらのオプションは、縦棒（|）で区切って複数使用できます。順序は自由です。規定されていないオプションはキャプションとして扱われます。複数のキャプションがある場合や rightと left のような矛盾するオプションが同時に使われた場合は、後ろにあるものが優先されます。ただしframeが指定された場合は、指定の順序に関わらず thumb やサイズ指定は無視されます（後述）。

配置指定

画像をページの左右または中央に置きたい場合に指定します。これは同時に文章と画像の位置関係（テキストの回り込みの有無）を決めるものでもあります。right, left, center, none の4種類があります。この中から2つ以上同時に指定された場合は、後ろで指定されたものが優先されます。

right

[[ファイル:Toudaiji_daibutsuden_1.jpg|right|東大寺大仏殿]]

東大寺大仏殿

画像を右寄せして、それに続いて書かれているテキストを、画像の左側に配置します。rightのかわりに右も使えます。 テンプレート:-

複数の画像を右側に縦1列で並べたいときは下記のように並べるだけでOKです。Template:右などを使う必要はなくなりました。

[[ファイル:Toudaiji_daibutsuden_1.jpg|right|東大寺大仏殿]]
[[ファイル:Kinkaku.jpg|right|金閣寺]]

left

[[ファイル:Toudaiji_daibutsuden_1.jpg|left|東大寺大仏殿]]

東大寺大仏殿

画像を左寄せして、それに続いて書かれているテキストを画像の右側に配置します。leftのかわりに左も使えます。 テンプレート:-

center

[[ファイル:Toudaiji_daibutsuden_1.jpg|center|東大寺大仏殿]]

東大寺大仏殿

画像を中央寄せして、それに続いて書かれているテキストを画像の下側に配置します。 テンプレート:-

none

[[ファイル:Toudaiji_daibutsuden_1.jpg|none|東大寺大仏殿]]

東大寺大仏殿

画像を左寄せして、それに続いて書かれているテキストを画像の下側に配置します。 この場合の none（なし）は、テキストの回り込みをさせないことを意味しています。 テンプレート:-

指定なし

このオプションを指定しない場合は、画像は文中に挿入されます。一番簡単な方法を参照。Unicodeでは規定されていない文字や記号を文章中で使用したい場合に利用できます。

会話ページでこんな感じで使用している人もいますね
[[ファイル:Smiley.png|16px|Smiley Face]] 推奨しませんけども。

会話ページでこんな感じで使用している人もいますね Smiley Face 推奨しませんけども。

垂直方向の指定

以下のオプションがそれぞれ指定できます。

baseline

まっかな[[ファイル:Red-square.gif|baseline]]四角形

まっかなファイル:Red-square.gif四角形

sub

まっかな[[ファイル:Red-square.gif|sub]]四角形

まっかなファイル:Red-square.gif四角形

super

まっかな[[ファイル:Red-square.gif|super]]四角形

まっかなファイル:Red-square.gif四角形

top

まっかな[[ファイル:Red-square.gif|top]]四角形

まっかなファイル:Red-square.gif四角形

text-top

まっかな[[ファイル:Red-square.gif|text-top]]四角形

まっかなファイル:Red-square.gif四角形

middle

デフォルトの状態。

まっかな[[ファイル:Red-square.gif|middle]]四角形

まっかなファイル:Red-square.gif四角形

bottom

まっかな[[ファイル:Red-square.gif|bottom]]四角形

まっかなファイル:Red-square.gif四角形

text-bottom

まっかな[[ファイル:Red-square.gif|text-bottom]]四角形

まっかなファイル:Red-square.gif四角形

サイズ指定

表示させたいサイズの横幅をピクセル数で指定します。縦横比を保持したままアップロードされた画像を縮小または拡大して表示します。

元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく（"img" 要素の "width" 属性で指定したときはこのようになります）、MediaWikiがその指定された縮小サイズの画像を自動生成して表示します。これは無駄な送受信を省くための仕組みです。

[[ファイル:Kinkaku.jpg|200px]]

200px テンプレート:-

[[ファイル:Kinkaku.jpg|100px]]

100px テンプレート:- 元の画像よりも大きい値を指定して拡大表示されるのは表示形式用オプションのうち thumb, frame, frameless をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても元の画像サイズのまま表示されます。なお拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。

2つの異なるサイズを指定した場合、後で指定したものが優先されます。

[[ファイル:Kinkaku.jpg|50px|200px]]

200px テンプレート:- このオプションを指定しない場合は、アップロードされた画像のサイズそのままで表示されます。

縦横上限値指定

また、幅と高さのそれぞれの上限値を指定する方法もあります。例えば、横幅 300px以下、高さ150px以下と指定する場合、300x150px と指定します。

[[ファイル:Kinkaku.jpg|300x150px]]

300x150px

この画像の場合、元のサイズは横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、このように横幅が200px、高さが150pxに縮小されて表示されます。つまり指定した横幅以下、かつ高さ以下で最大になるように、縦横比を変えずに縮小されます。表示される横幅と高さを自由に指定できるわけではありません。縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。

応用として、x150pxのようにすることで高さだけを指定することができます。

[[ファイル:Kinkaku.jpg|x200px]]

x200px テンプレート:-

表示形式

画像の周りに灰色の枠をつけるオプションとしてサムネイル形式（thumb オプション）とフレーム形式（frame オプション）があります。ボーダー方式（border オプション）は画像の周りを細い線で囲みます。 frameless オプションは枠なしのままサムネイル形式と同じサイズを使用することを指定します。

thumb

[[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]

ファイル:Tokyotower.jpg

東京タワーと増上寺本堂

画像をサムネイル形式で表示します。thumbnail と指定しても同じ働きをします。

left、center、none のいずれかが指定されない場合は right を選択した場合と同じになります（右寄せになり、テキストが画像の左側に回り込みます）。したがって、right は省略可能です。そして、画像の下の枠内にキャプションと「拡大」アイコンが表示されます。アイコンにマウスカーソルをのせると、「拡大」と書かれたツールチップが表示されます。拡大アイコンと画像はそれぞれのファイルページにリンクされており、どちらかをクリックすると本来のサイズの画像を見ることができます。

あわせてサイズを指定することで任意の大きさに縮小可能です。サイズ指定がない場合、横幅が220px以下の画像はそのままの大きさで表示されますが、220pxよりも大きい画像は220pxに縮小されます。サイズ指定がないときの横幅の数値は、ログイン利用者ならば個人設定 - 「表示」 - 「ファイル」 - 「サムネイルの大きさ」の設定で変更することができます（既定値は220px）。 逆に画像のもとのサイズ以上に拡大表示することはできません。拡大表示したい場合は thumb を外してください。 テンプレート:-

縦長の画像で周りの画像に比べて大きすぎてしまう時には、uprightオプションを追加することで改善されるかもしれません。

[[ファイル:Tokyotower.jpg|thumb|upright|東京タワーと増上寺本堂]]

ファイル:Tokyotower.jpg

東京タワーと増上寺本堂

キャプションにはリンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意してください。

[[ファイル:Tokyotower.jpg|thumb|left|100px|[[東京タワー]]と[[増上寺]]本堂]]

ファイル:Tokyotower.jpg

東京タワーと増上寺本堂

[[ファイル:Tokyotower.jpg|thumb|left|[[東京タワー|Tokyo Tower]]]]

ファイル:Tokyotower.jpg

Tokyo Tower

キャプション中のリンクには、パイプ（|）を使ってリンク先の記事と表示される文字を変えることもできます。 テンプレート:-

複数のサムネイル形式の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。

[[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
[[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]

代替画像の指定

thumb=代替画像名とすると、「拡大」アイコンファイル:Magnify-clip.pngからリンクされる画像をサムネイル表示の画像と別のファイルにできます。別のファイルにできるのは拡大アイコンからのリンクのみで、サムネイル画像のクリックには対応していません（次の例では東大寺が出ます）。

[[ファイル:Tokyotower.jpg|thumb=Toudaiji_daibutsuden_1.jpg|サムネイルは東大寺大仏殿、拡大先は東京タワー]]

ファイル:Tokyotower.jpg

サムネイルは東大寺大仏殿、拡大先は東京タワー

frame

[[ファイル:Tokyotower.jpg|frame|[[東京タワー]]と[[増上寺]]本堂]]

ファイル:Tokyotower.jpg

東京タワーと増上寺本堂

framed または enframed と指定しても同じ働きをします。画像のサイズ変更をせずに、サムネイルと同じ感じの枠をつけます。サイズを指定しても無視され、拡大も縮小もされません。画像サイズが元画像のままですから、拡大アイコンも出ません。 テンプレート:-

[[ファイル:Tokyotower.jpg|frame|thumb|center|40px|[[東京タワー]]と[[増上寺]]本堂]]

ファイル:Tokyotower.jpg

東京タワーと増上寺本堂

サイズ指定してもこの通りです。thumb と frame を重ねて指定した場合は、frame が優先されます。 テンプレート:-

その他は thumb と同じです。left、center、none のいずれかが指定されない場合は右寄せになり、テキストが画像の左側に回り込みます。そして、キャプションが画像の下側枠内に表示されます。また、キャプションにはリンクをつけることができます。

border

1px幅のグレーの線で画像を囲みます。日本の国旗のような白地の画像を、白地のページで使用したいときなどに役立ちます。あわせてサイズを指定することで任意の大きさに拡大・縮小が可能です（ thumb や frame と異なり、元の画像サイズよりも大きく表示できます）。

borderなし→ [[ファイル:Flag of Japan.svg|50px|日本の国旗]] ,
borderあり→ [[ファイル:Flag of Japan.svg|border|50px|日本の国旗]]

borderなし→ 日本の国旗 , borderあり→ 日本の国旗

frameless

表示形式を指定していない状態とよく似ていますが、個人設定での設定にあわせたサイズに自動的に縮小して表示します（既定値および非ログイン状態では 幅220px）。

[[ファイル:Tokyotower.jpg|frameless|東京タワーと増上寺本堂]]

東京タワーと増上寺本堂 テンプレート:-

画像リンク

通常は画像からはファイルページにリンクされますが、link= を使うことで別のページをリンク先にしたり、リンクをさせないようにすることができます。

重要な注意

ウィキペディアではファイルページを利用してアップロードされたファイルのライセンス（著作権）を表示しているため、画像などのファイルからファイルページへのリンクは非常に重要です。使用している画像が著作権の帰属表示を必要としていない場合（パブリックドメインなど）を除き、この機能を使用しないでください。著作権の帰属表示義務のある画像の場合、画像からファイルページへリンクしていないと著作権侵害になります。

[[ファイル:Alchemy fire symbol.svg|link=三角形]]

ファイル:Alchemy fire symbol.svg

外部リンクやウィキ間リンクを指定することもできます。リンク先を空にするとどこにもリンクしません。

リンクなし

[[ファイル:Alchemy fire symbol.svg|link=]]ファイル:Alchemy fire symbol.svg

言語間リンク

[[ファイル:Alchemy fire symbol.svg|link=en:Triangle]]ファイル:Alchemy fire symbol.svg

外部リンク

[[ファイル:Alchemy fire symbol.svg|link=http://wikipedia.org/]]ファイル:Alchemy fire symbol.svg

なお、thumb および frame とは併用できません。

回り込みの解除

画像を複数使用したいときに、例えば

[[ファイル:Coton de Tular 2.jpg|thumb|left|100px|白犬]]
ここにこの犬の紹介文を書きます。
[[ファイル:Catyawn.jpg|thumb|right|100px|あくびをするネコ]]
ここではネコのあくびについて書いてみます。

と書くと、下のように階段状に表示されてしまいます。

ファイル:Coton de Tular 2.jpg

白犬

ここにこの犬の紹介文を書きます。

ファイル:Catyawn.jpg

あくびをするネコ

ここではネコのあくびについて書いてみます。 テンプレート:-

このように、最初の画像の右側に2つ目の文章（画像）が回り込むのをやめさせるためには

{{-}}

を画像と画像の間に置きます。

[[ファイル:Coton de Tular 2.jpg|thumb|left|100px|白犬]]
ここにこの犬の紹介文を書きます。
{{-}}
[[ファイル:Catyawn.jpg|thumb|right|100px|あくびをするネコ]]
ここではネコのあくびについて書いてみます。

ファイル:Coton de Tular 2.jpg

白犬

ここにこの犬の紹介文を書きます。 テンプレート:-

ファイル:Catyawn.jpg

あくびをするネコ

ここではネコのあくびについて書いてみます。 テンプレート:- この テンプレート:Tl テンプレートと同種の機能を持ったテンプレートとして、テンプレート:Tl（似ているが技術的に異なる）、テンプレート:Tl（左側のカラムが終わるまで待つ）、テンプレート:Tl（右側のカラムが終わるまで待つ）があります。

SVGファイルの表示について

現在のところ、SVGファイルはそのままブラウザで表示させずにサーバ上で指定サイズのPNGファイルを自動生成して、それを使って表示をする方法がとられています。このPNGファイルの生成に失敗することが、しばしば起きています。PNGファイルはサイズ毎に生成されるので、指定する数値を変えればうまく表示されることもあります。しかし、どうしても特定のサイズで表示させたい場合は以下の方法を試してください。

1. まず、ウィキメディア・コモンズのファイルページを開きます。空白（透明）画像が占めている部分をクリックして表示される日本語版のファイルページから、「コモンズのページ」へのリンクを使ってたどりつくことが可能です。もちろん、直接行っても構いません。
2. ブラウザのURLアドレス欄で、ファイルページのアドレスの後につづけて?action=purgeを付け足し、エンターキー（リターンキー）を押します。
3. 日本語版に戻って、表示させたい記事をリロードします。これでも表示されなければ、2.を繰り返します。通常は1回、多くても2回で成功するようです。

それでもうまくいかない、または、この説明を読んでもわからない場合は、Wikipedia:利用案内へ、どの画像をどのサイズで表示させたいのかを明記して、助けを求めてください。

ギャラリー

ギャラリー・タグはサムネイル画像を並べて表示させる手軽な方法です。全ての画像が同一の幅で表示されます。

<gallery>
ファイル:Fuji_mt_s.jpg
ファイル:Kinkaku.jpg|キャプションをいれられます。
ファイル:Catyawn.jpg|キャプション中で[[ネコ|リンク]]もできます。
セルにテキストを入れることもできます。|テキスト
</gallery>

• Fuji mt s.jpg
• Kinkaku.jpg

  キャプションをいれられます。

• Catyawn.jpg

  キャプション中でリンクもできます。

• セルにテキストを入れることもできます。

  テキスト

各エントリ（セル）の書き方は ファイル:ファイル名 または ファイル:ファイル名|リンクも付加可能なキャプション となります。各画像の先頭と末尾に大括弧（[[と]]）が不要であることに注意してください。キャプションをつけるかどうかは自由です。個々の画像サイズを指定してもキャプションとみなされ、表示サイズを変えることはできません。

このタグでは、XHTMLソース中に、表全体にclass="gallery" を、各セルに class="gallerybox"を指定した表が生成されています。画像用のセルには画像などのファイルだけでなく、テキストを入れることもできます。キャプション部分はキャプションの長さに応じて高さが自動的に調整されます。キャプションが長い場合は、文を折り返して表示するので、枠が縦長になります（ブラウザによっては、横幅を広げるものもあるようです）。各行の高さは行中の最大高さを持つ画像およびキャプションの高さに合せたものとなります。

オプション

ギャラリー・タグにはいくつかのオプションがあります。

caption="タイトル"

ギャラリーのタイトル（表のキャプション）を指定します。

perrow="整数"

各行のセル数を指定します。既定値は4です。

widths="数値" と heights="数値"

各セルに配置する画像の幅および高さを指定します。既定値は各120ピクセルです。

<gallery caption="サンプル・ギャラリー「オランダの各州」" widths="50px" heights="80px" perrow="6">
ファイル:Noord_Holland-Position.png
ファイル:Friesland-Position.png|[[w:ja:フリースラント州|フリースラント州]]には湖が多い
ファイル:Groningen-Position.png
ファイル:Drenthe-Position.png|[[w:ja:ドレンテ州|ドレンテ州]]は一番人口密度の低い地域
ファイル:Flevoland-Position.png
ファイル:Overijssel-Position.png
ファイル:Gelderland-Position.png
ファイル:Zuid_Holland-Position.png|[[w:ja:南ホラント州|南ホラント州]]は人口密度のもっとも高い地域
ファイル:Zeeland-Position.png
ファイル:Noord_Brabant-Position.png 
ファイル:Limburg-Position.png
</gallery>

• サンプル・ギャラリー「オランダの各州」
• Noord Holland-Position.png
• Friesland-Position.png

  フリースラント州には湖が多い

• Groningen-Position.png
• Drenthe-Position.png

  ドレンテ州は一番人口密度の低い地域

• Flevoland-Position.png
• Overijssel-Position.png
• Gelderland-Position.png
• Zuid Holland-Position.png

  南ホラント州は人口密度のもっとも高い地域

• Zeeland-Position.png
• Noord Brabant-Position.png
• Limburg-Position.png

カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられているファイルが自動的にギャラリー形式で表示されます。キャプション部分にはファイル名の最初の20文字分（1バイト文字換算）が示され、表示しきれない場合には省略符号が末尾につきます。またファイル本体だけでなく、ファイル名部分もファイルページにリンクしています。代替テキストや、他のリンクをつけることはできません。ファイルサイズも示されます。

カテゴリページのギャラリーと通常ページのギャラリーの比較例としては、 commons:Category:William-Adolphe Bouguereauとcommons:William-Adolphe Bouguereauを参照してください。

表中の画像表示

表のマークアップを使い、各セルに画像を埋め込むことで、サイズやレイアウト、キャプションなどをより細かく設定したギャラリーを作ることができます。

画像表の例：

{| class="wikitable"
|+'''オランダの州'''
|-
| style="vertical-align: top"|
[[ファイル:Drenthe-Position.png|thumb|left|150px|[[w:ja:ドレンテ州|ドレンテ州]]：人口密度最小の州]]
| style="vertical-align: top"|
[[ファイル:Flevoland-Position.png|thumb|left|100px|]]
| style="vertical-align: top"|
[[ファイル:Friesland-Position.png|thumb|left|100px|]]
|-
|
|-
| style="vertical-align: top"|
[[ファイル:Gelderland-Position.png|thumb|left|100px|]]
| style="vertical-align: top"|
[[ファイル:Zuid_Holland-Position.png|thumb|left|100px|[[w:ja:南ホラント州|南ホラント州]]：人口密度最大の州]]
| style="vertical-align: top"|
[[ファイル:Utrecht-Position.png|thumb|left|50px|]]
|}

オランダの州

ファイル:Drenthe-Position.png ドレンテ州：人口密度最小の州	ファイル:Flevoland-Position.png	ファイル:Friesland-Position.png
ファイル:Gelderland-Position.png	ファイル:Zuid Holland-Position.png 南ホラント州：人口密度最大の州	ファイル:Utrecht-Position.png

この方法では、各画像の幅はサイズオプションで指定されており、高さはキャプションの有無およびその長さによって決定しています。セルの幅は画像の幅に依存しており、行の高さは最大高の画像に依存しています。

クリッカブル画像

ウィキテキストでは<area> のXHTMLタグは使えませんが、下のようないくつかの方法で類似の結果を得ることができます。

• ImageMap (MW 1.9+) を使えば、画像中の領域を指定してウィキページへリンクさせることができます。
• EasyTimeline（簡易経時グラフ）を使うと、画像とその画像を埋め込んだページが生成されます。
• やや強引な方法ですが画像をあらかじめ矩形に分割、または画像を合成し、画像リンクを使用することができます。

ImageMapを使った例

Online Image Map Editor（OutputをWiki imagemapに指定）やImage map editorを使うと簡単に ImageMap を使ったクリッカブル画像のソースが作れます。

例1

<imagemap>
ファイル:Sudoku dot notation.png|300px
circle  320  315 165 [[1]]
circle  750  315 160 [[2]]
circle 1175  315 160 [[3]]
circle  320  750 160 [[4]]
circle  750  750 160 [[5]]
circle 1175  750 160 [[6]]
circle  320 1175 160 [[7]]
circle  750 1175 160 [[8]]
circle 1175 1175 160 [[9]]
default [[整数]]
</imagemap>

例2

<imagemap>
ファイル:Sasago Pass 01-2.jpg|thumb|left|280px|[[高川山]]より見た[[笹子峠]]
rect 996 668 1848 836 [[笹子峠|笹子峠（ささごとうげ）]]
rect 1892 492 3284 652 [[笹子雁ヶ腹摺山|笹子雁ヶ腹摺山（ささごがんがはらすりやま）]]
circle 1565 1021 81 [[笹子峠|笹子峠（ささごとうげ）]]
poly 2376 892 2196 804 2076 792 1952 900 1856 912 1816 1044 2436 1040 [[笹子雁ヶ腹摺山|笹子雁ヶ腹摺山（ささごがんがはらすりやま）]]
</imagemap>

EasyTimelineを使った例

<area>で定義される矩形の画像を生成します。矩形のサイズは調整できず、リンクラベルの長さとフォントサイズに依存します。画像領域が重なってしまった場合、ステータスバーやポップアップを利用しないとリンク先がわかりません。あまりに重複が激しいと、リンクの一部がクリックできなくなる可能性があります。外部ページへのリンクのリンクラベルにはドメイン名のみしか使えません。Unicode 非対応なので漢字などは使えません。

例1

<timeline>
ImageSize  = width:400 height:150
PlotArea   = width:400 height:150 left:0 bottom:0
TimeAxis  = orientation:vertical # dummy, required
Period    = from:0 till:1 # dummy, required
Define $s = fontsize:L # [SML]
TextData  =
  pos:(50,120) $s text:[[ライデン|o ライデン]]
  pos:(10,80) $s text:[[デン・ハーグ|o デン・ハーグ]]
  pos:(80,40) $s text:[[ロッテルダム|o Rotterdam]]
</timeline>

<timeline> ImageSize = width:400 height:150 PlotArea = width:400 height:150 left:0 bottom:0 TimeAxis = orientation:vertical # dummy, required Period = from:0 till:100 # dummy, required Define $s = fontsize:L # [SML] TextData =

 pos:(50,120) $s text:o ライデン
 pos:(10,80) $s text:o デン・ハーグ
 pos:(80,40) $s text:o Rotterdam

</timeline>

関連項目

• mw:Help:Images
• Category:画像関連のテンプレート
• クリッカブル画像関連
  • m:Help:Composite images - 画像とリンクテキストの合成を可能にする。
  • m:地図の作成
  • m:Maps' clickability