ウィキペディア日本語版のヘルプページです。
各ページにて画像を表示させる方法について説明します。そのためのマークアップの仕方や、また各種の引数の指定による表示の変化を説明します。表示できる画像は、ウィキペディア日本語版またはウィキメディア・コモンズに既にアップロードされた画像のみです。アップロードの方法などについては「Help:画像などのファイルのアップロードと利用」を参照してください。
どのような場合にどのような表示方法をとるべきかについては「Wikipedia:画像利用の方針#配置」を参照してください。
編集ツールバーによって入力を補助でき、ファイル名さえわかっていれば複雑なマークアップを覚える必要ありません。「埋め込みファイル」を押し、ファイル名や説明書きをキャプションに入力し、位置などを決定し「ファイル挿入」を押します。サイズ、配置、形式などについては以降の要点などを理解したほうが、うまく表示できるでしょう。
「上級」から複数の画像を表示する「ギャラリー」も選択できます。詳細は本文書の#ギャラリーです。これも理解しておいた方がうまく表示できるでしょう。
ウィキペディアでは、XHTML (HTML) について知らない人にも画像を扱うことができるように独自の簡単なマークアップを採用しています。その代わり、XHTMLのIMGタグは無効化されています。
]
(内部リンクのマークアップと同じ)File
でも機能します(]
)。]
のようになります。
thumb
, frame
, border
または frameless
が指定できます。画像を決まった表示形式で表示します。right
, left
, center
または none
が指定できます。ページ中の画像の配置位置を指定します。 thumb
または frame
を用いている時には、 right
が既定値です。このほか、垂直方向の配置も指定できます。thumb
を使うときは、upright
で画像の倍率を指定することもできます。 page="ページ番号"
で開始ページを指定できます。 lang="言語コード(小文字)"
で図中の表示文字の言語を指定できます。ウィキメディア・コモンズにあるファイルを表示するときも、日本語版にあるファイルを表示するときと同じ書き方が使用できます。コモンズからウィキペディアに表示されている画像はファイルページにその旨が自動的に表示されます。
最も簡単な方法は]
と記述するものです。この場合、アップロードされた画像のサイズのまま表示されます。また表示される位置は、通常の文字と同じようにテキストの中に挿入された形で表示されます。
] 文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章で挿むと ] このように表示されます。
ファイル名では、アルファベットの大文字と小文字が区別されます。一方、半角の空白はアンダーバー(_)を使っても同一のものと扱われます。
オプションのうち、できるだけ付けるようにしたいのはどのような画像なのかを簡潔に表したキャプション(説明文)です。]
とします。
]
このキャプションは、生成されるXHTMLソースコード中で "a" 要素の "title" 属性と、"img" 要素の "alt" 属性の2つに対して使用されます。この属性はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
XHTML出力文
<a href="https://wikious.com/ja/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Fuji_mt_s.jpg" class="image" title="本栖湖から眺めた富士山"><img alt="本栖湖から眺めた富士山" src="//upload.wikimedia.org/wikipedia/ja/4/41/Fuji_mt_s.jpg" width="431" height="269" data-file-width="431" data-file-height="269" /></a>
alt=
により、"img" 要素の "alt" 属性を上記とは別に強制的に指定できます。これは、画像を表示できないブラウザや画像を非表示に設定している場合に画像の代わりに表示したり、音声ブラウザで読み上げたりする代替テキストを指定する属性ですので、(画像の説明ではなく)画像の代替となる言葉であるべきです。インターネット・エクスプローラーなど一部のブラウザではマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
]
XHTML出力文
<a href="https://wikious.com/ja/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Fuji_mt_s.jpg" class="image" title="本栖湖から眺めた富士山"><img alt="富士山" src="//upload.wikimedia.org/wikipedia/ja/4/41/Fuji_mt_s.jpg" width="431" height="269" data-file-width="431" data-file-height="269" /></a>
なお、ファイル挿入のマークアップの閉じ括弧の直前にパイプ記号 ("|") を置かないように注意してください。パイプ付きリンクの機能のために、閉じ括弧の直前にパイプ記号があると、指定してあるキャプションは無視され、ファイル名がキャプションとして使用されてしまいます。
] ]
キャプションの他に、画像の表示サイズを変えたり表示する位置を決めたり、額縁のように画像の周りに枠をつけたりすることができます。これらのオプションは、縦棒(|)で区切って複数使用できます。順序は自由です。規定されていないオプションはキャプションとして扱われます。複数のキャプションがある場合や right
と left
のような矛盾するオプションが同時に使われた場合は、後ろにあるものが優先されます。ただしframe
が指定された場合は、指定の順序に関わらず thumb
やサイズ指定は無視されます(後述)。
画像をページの左右または中央に置きたい場合に指定します。これは同時に文章と画像の位置関係(テキストの回り込みの有無)を決めるものでもあります。right
, left
, center
, none
の4種類があります。この中から2つ以上同時に指定された場合は、後ろで指定されたものが優先されます。
]
画像を右寄せして、それに続いて書かれているテキストを、画像の左側に配置します。right
のかわりに右
も使えます。
複数の画像を右側に縦1列で並べたいときは下記のように並べるだけでOKです。Template:右などを使う必要はなくなりました。
] ]
]
画像を左寄せして、それに続いて書かれているテキストを画像の右側に配置します。left
のかわりに左
も使えます。
]
画像を中央寄せして、それに続いて書かれているテキストを画像の下側に配置します。
]
画像を左寄せして、それに続いて書かれているテキストを画像の下側に配置します。
この場合の none
(なし)は、テキストの回り込みをさせないことを意味しています。
このオプションを指定しない場合は、画像は文中に挿入されます。一番簡単な方法を参照。Unicodeでは規定されていない文字や記号を文章中で使用したい場合に利用できます。
会話ページでこんな感じで使用している人もいますね ] 推奨しませんけども。
会話ページでこんな感じで使用している人もいますね 推奨しませんけども。
以下のオプションがそれぞれ指定できます。
baseline
まっかな]四角形まっかな四角形
sub
まっかな]四角形まっかな四角形
super
まっかな]四角形まっかな四角形
top
まっかな]四角形まっかな四角形
text-top
まっかな]四角形まっかな四角形
middle
まっかな]四角形まっかな四角形
bottom
まっかな]四角形まっかな四角形
text-bottom
まっかな]四角形まっかな四角形
表示させたいサイズの横幅をピクセル数で指定します。縦横比を保持したままアップロードされた画像を縮小または拡大して表示します。表示形式にthumb
を使うときは、upright
で画像の倍率を指定することもできます。以下ではピクセル数指定の方法について説明します。upright
についてはサイズ指定 (upright)を参照ください。
元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく("img" 要素の "width" 属性で指定したときはこのようになります)、MediaWikiがその指定された縮小サイズの画像を自動生成して表示します。これは無駄な送受信を省くための仕組みです。
]
]
元の画像よりも大きい値を指定して拡大表示されるのは表示形式用オプションのうち thumb
, frame
, frameless
をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても元の画像サイズのまま表示されます。なお拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。
2つの異なるサイズを指定した場合、後で指定したものが優先されます。
]
このオプションを指定しない場合は、アップロードされた画像のサイズそのままで表示されます。
また、幅と高さのそれぞれの上限値を指定する方法もあります。例えば、横幅 300px以下、高さ150px以下と指定する場合、300x150px
と指定します。
]
この画像の場合、元のサイズは横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、このように横幅が200px、高さが150pxに縮小されて表示されます。つまり指定した横幅以下、かつ高さ以下で最大になるように、縦横比を変えずに縮小されます。表示される横幅と高さを自由に指定できるわけではありません。縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。
応用として、x150px
のようにすることで高さだけを指定することができます。
]
画像の周りに灰色の枠をつけるオプションとしてサムネイル形式(thumb
オプション)とフレーム形式(frame
オプション)があります。ボーダー方式(border
オプション)は画像の周りを細い線で囲みます。 frameless
オプションは枠なしのままサムネイル形式と同じサイズを使用することを指定します。
]
画像をサムネイル形式で表示します。thumbnail
と指定しても同じ働きをします。
left
、center
、none
のいずれかが指定されない場合は right
を選択した場合と同じになります(右寄せになり、テキストが画像の左側に回り込みます)。したがって、right
は省略可能です。そして、画像の下の枠内にキャプションと「拡大」アイコンが表示されます。アイコンにマウスカーソルをのせると、「拡大」と書かれたツールチップが表示されます。拡大アイコンと画像はそれぞれのファイルページにリンクされており、どちらかをクリックすると本来のサイズの画像を見ることができます。
あわせてサイズを指定することで任意の大きさに縮小可能です。サイズ指定がない場合、横幅が220px以下の画像はそのままの大きさで表示されますが、220pxよりも大きい画像は220pxに縮小されます。サイズ指定がないときの横幅の数値は、ログイン利用者ならば個人設定 - 「表示」 - 「ファイル」 - 「サムネイルの大きさ」の設定で変更することができます(既定値は220px)。
逆に画像のもとのサイズ以上に拡大表示することはできません。拡大表示したい場合は thumb
を外してください。
キャプションにはリンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意してください。
]と]本堂]]
]]]
キャプション中のリンクには、パイプ(|)を使ってリンク先の記事と表示される文字を変えることもできます。
複数のサムネイル形式の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。
] ]
thumb
形式で画像表示サイズを変更したいときは、上記のようにピクセル数を直接指定することもできますが、upright
オプションで表示サイズを変更することができます。upright
を追加すると、画像の横幅は、サムネイル横幅既定値220px(個人設定を行っている利用者が閲覧している場合はその設定値)の75%の大きさになります。
]
75%よりも大きくまたは小さくしたい場合は、upright=x.xx
の書式で好きな倍率を指定できます。既定値・個人設定値の125%にしたい場合はupright=1.25
、100%にしたい場合はupright=1
、50%にしたい場合はupright=0.5
となります。画像のもとのサイズ以上に拡大表示できない点はピクセル数指定と同じです。
]
thumb=代替画像名
とすると、「拡大」アイコンからリンクされる画像をサムネイル表示の画像と別のファイルにできます。別のファイルにできるのは拡大アイコンからのリンクのみで、サムネイル画像のクリックには対応していません(次の例では東大寺が出ます)。
]
]と]本堂]]
framed
または enframed
と指定しても同じ働きをします。画像のサイズ変更をせずに、サムネイルと同じ感じの枠をつけます。サイズを指定しても無視され、拡大も縮小もされません。画像サイズが元画像のままですから、拡大アイコンも出ません。
]と]本堂]]
サイズ指定してもこの通りです。thumb
と frame
を重ねて指定した場合は、frame
が優先されます。
その他は thumb
と同じです。left
、center
、none
のいずれかが指定されない場合は右寄せになり、テキストが画像の左側に回り込みます。そして、キャプションが画像の下側枠内に表示されます。また、キャプションにはリンクをつけることができます。
1px幅のグレーの線で画像を囲みます。日本の国旗のような白地の画像を、白地のページで使用したいときなどに役立ちます。あわせてサイズを指定することで任意の大きさに拡大・縮小が可能です( thumb
や frame
と異なり、元の画像サイズよりも大きく表示できます)。
borderなし→ ] , borderあり→ ]
表示形式を指定していない状態とよく似ていますが、個人設定での設定にあわせたサイズに自動的に縮小して表示します(既定値および非ログイン状態では 幅220px)。
]
表示された画像からは通常、ファイルページにリンクされますが、link=
を使うことで別のページをリンク先にしたり、リンクをさせないようにすることができます。
重要な注意
ウィキペディアではファイルページを利用してアップロードされたファイルのライセンス(著作権)を表示しているため、画像などのファイルからライセンス情報その他を記述したファイルページにリンクしていることは非常に重要です。使用している画像が著作権の帰属表示を必要としていない場合(パブリックドメインなど)を除き、この link=
オプションを使用しないでください。使用するのが著作権の帰属表示義務のある画像の場合、画像からファイルページへリンクしていないと著作権侵害になります。
]
外部リンクやウィキ間リンクを指定することもできます。リンク先を空にするとどこにもリンクしません。
なお、thumb
および frame
とは併用できません。
画像を複数使用したいときに、例えば
] ここにこの犬の紹介文を書きます。 ] ここではネコのあくびについて書いてみます。
と書くと、下のように階段状に表示されます。
ここにこの犬の紹介文を書きます。
ここではネコのあくびについて書いてみます。
このように、最初の画像の右側に2つ目の文章(画像)が回り込むのをやめさせるためには
{{-}}
を画像と画像の間に置きます。
] ここにこの犬の紹介文を書きます。 {{-}} ] ここではネコのあくびについて書いてみます。
ここにこの犬の紹介文を書きます。
ここではネコのあくびについて書いてみます。
この {{-}} テンプレートと同種の機能をもつテンプレートとしては、{{Clearleft}}(左側のカラムが終わるまで待つ)および{{Clearright}}(右側のカラムが終わるまで待つ)が、類似の機能をもつテンプレートとしては{{After float}}(続く文章などが設定値〈既定は5em〉より狭くなる場合のみ回り込みをやめさせる)があります。
現在のところ、SVGファイルはそのままブラウザで表示させずにサーバ上で指定サイズのPNGファイルを自動生成して、それを使って表示をする方法がとられています。このPNGファイルの生成に失敗することが、しばしば起きています。PNGファイルはサイズ毎に生成されるので、指定する数値を変えればうまく表示されることもあります。しかし、どうしても特定のサイズで表示させたい場合は以下の方法を試してください。
?action=purge
を付け足し、エンターキー(リターンキー)を押します。それでもうまくいかない、または、この説明を読んでもわからない場合は、Wikipedia:利用案内へ、どの画像をどのサイズで表示させたいのかを明記して、助けを求めてください。
ギャラリー・タグはサムネイル画像を並べて表示させる手軽な方法です。全ての画像が同一の幅で表示されます。
<gallery> ファイル:Fuji mt s.jpg ファイル:Kinkaku.jpg|キャプションをいれられます。 ファイル:Catyawn.jpg|キャプション中で]もできます。 セルにテキストを入れることもできます。|テキスト </gallery>
各エントリ(セル)の書き方は ファイル:ファイル名
または ファイル:ファイル名|リンクも付加可能なキャプション
となります。名前空間名:は必須です。各画像の先頭と末尾に大括弧(]
)が不要であることに注意してください。キャプションをつけるかどうかは自由です。個々の画像サイズを指定してもキャプションとみなされ、表示サイズを変えることはできません。
このタグでは、XHTMLソース中に、表全体にclass="gallery"
を、各セルに class="gallerybox"
を指定した表が生成されています。画像用のセルには画像などのファイルだけでなく、テキストを入れることもできます。キャプション部分はキャプションの長さに応じて高さが自動的に調整されます。キャプションが長い場合は、文を折り返して表示するので、枠が縦長になります(ブラウザによっては、横幅を広げるものもあるようです)。各行の高さは行中の最大高さを持つ画像およびキャプションの高さに合せたものとなります。
ギャラリー・タグにはオプションがあります。すべてのオプションはMediaWikiのヘルプを参照してください。ここではいくつか例を挙げます。
caption="タイトル"
perrow="整数"
widths="数値"
と heights="数値"
mode="表示モード"
packed
やpacked-hover
を指定すれば、サムネイルの枠線がなく、サイズの異なる画像も綺麗に並ぶギャラリーを作成できます。style="font-size:数値%"
<gallery caption="「オランダの各州」(ギャラリーの例)" widths="50px" heights="80px" perrow="6"> ファイル: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 </gallery>
<gallery caption="おさかな" mode="packed-hover" heights="120"> File:Astronotus_ocellatus.jpg|] File:Salmonlarvakils.jpg|] File:Georgia Aquarium - Giant Grouper.jpg|] File:Pterois volitans Manado-e.jpg|] File:Macropodus opercularis - front (aka).jpg|] File:Canthigaster valentini 1.jpg|] File:Pseudorasbora parva(edited version).jpg|] </gallery>
<gallery caption="ネコの仲間" mode="packed" heights="120"> File:Six weeks old cat (aka).jpg|] File:Panthera tigris5.jpg|] File:Felis silvestris silvestris.jpg|] File:Pallas cat.JPG|] File:Lynx kitten.jpg|] File:Caracal002.jpg|] File:Cheetah in Kent.jpg|] File:Eje.jpg|] </gallery>
カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられているファイルが自動的にギャラリー形式で表示されます。キャプション部分にはファイル名の最初の20文字分(1バイト文字換算)が示され、表示しきれない場合には省略符号が末尾につきます。またファイル本体だけでなく、ファイル名部分もファイルページにリンクしています。代替テキストや、他のリンクをつけることはできません。ファイルサイズも示されます。
カテゴリページのギャラリーと通常ページのギャラリーの比較例としては、 commons:Category:William-Adolphe Bouguereauとcommons:William-Adolphe Bouguereauを参照してください。
表のマークアップを使い、各セルに画像を埋め込むことで、サイズやレイアウト、キャプションなどをより細かく設定したギャラリーを作ることができます。
画像表の例:
{| class="wikitable" |+'''オランダの州''' |- | style="vertical-align: top"| ]:人口密度最小の州]] | style="vertical-align: top"| ] | style="vertical-align: top"| ] |- | |- | style="vertical-align: top"| ] | style="vertical-align: top"| ]:人口密度最大の州]] | style="vertical-align: top"| ] |}
この方法では、各画像の幅はサイズオプションで指定されており、高さはキャプションの有無およびその長さによって決定しています。セルの幅は画像の幅に依存しており、行の高さは最大高の画像に依存しています。
ギャラリーを表示するためのテンプレート{{Gallery}}も用意しています。このテンプレートを使用すれば、さらに見やすいギャラリーを作成できるかもしれません。詳細はテンプレートの解説ページをご覧ください。
ウィキテキストでは<area>
のXHTMLタグは使えませんが、下のようないくつかの方法で類似の結果を得ることができます(defaultに設定されるもの以外では、ポインタを合わせてもPopup拡張機能による記事のプレビューは表示されず、かわりにtitle属性で説明文がツールチップ表示されます)。
Online Image Map Editor(OutputをWiki imagemapに指定)やImage map editorを使うと簡単に ImageMap を使ったクリッカブル画像のソースが作れます。
例1(整数と1 - 9の数字の説明へリンク、数独について議論する画像)
<imagemap> ファイル:Sudoku dot notation.png|300px circle 320 315 165 ] circle 750 315 160 ] circle 1175 315 160 ] circle 320 750 160 ] circle 750 750 160 ] circle 1175 750 160 ] circle 320 1175 160 ] circle 750 1175 160 ] circle 1175 1175 160 ] 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>
<area>で定義される矩形の画像を生成します。矩形のサイズは調整できず、リンクラベルの長さとフォントサイズに依存します。画像領域が重なってしまった場合、ステータスバーやポップアップを利用しないとリンク先がわかりません。あまりに重複が激しいと、リンクの一部がクリックできなくなる可能性があります。外部ページへのリンクのリンクラベルにはドメイン名のみしか使えません。Unicode 非対応で漢字などは使えませんでしたが、method="svg2png" を補うことで漢字なども使える様になりました。
例1
<timeline method="svg2png">
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 #
TextData =
pos:(50,120) $s text:]
pos:(10,80) $s text:]
pos:(80,40) $s text:]
</timeline>