Wikipedia:画像の表示
出典: フリー百科事典『ウィキペディア（Wikipedia）』
Wikipedia:プロジェクト関連文書 > スタイルと方法シリーズ > Wikipedia:画像の表示
このページでは、ウィキペディア日本語版の各ページ上で画像を表示させる方法について説明します。表示させることのできる画像は、ウィキペディア日本語版またはウィキメディア・コモンズにアップロードされた画像のみです。アップロードの方法などについては、一番下の関連項目を参照して下さい。ここでは、既にアップロードがされていることを前提として、それを表示する方法を説明します。なお、どのような場合にどのような表示方法を採るべきかのガイドラインも、関連項目を参照して下さい。
ウィキペディアでは、HTMLについて知らない人にも画像を扱うことができるように、独自の簡単なマークアップを採用しています。その代わり、HTMLのIMGタグは、無効化されています。
目次 |
[編集] 要点
- 書式: [[画像:ファイル名|オプション]]
- オプションは、縦棒 ( | ) で区切って、複数指定可能。順序は不問だが、矛盾するものを同時に指定した場合は、原則として後ろにあるものが優先される。
- オプションの種類
- 説明文（代替テキスト）
- 配置指定: right, left, center, none
- サイズ指定: 横幅をピクセル数で指定。xxpx
- 枠付け指定: thumb, frame
[編集] 一番簡単な方法
最も簡単な方法は、[[画像:ファイル名]]と記述するものです。この場合、アップロードされた画像のサイズのまま表示されます。また、表示される位置は、通常の文字と同じように、テキストの中に挿入された形で表示されます。
[[画像:Fuji mt s.jpg]] 文章の先頭に置いた場合はこのように表示されます。 なお、この例のように、編集画面での改行1つは、無視されて、1文として扱われます。
文章の先頭に置いた場合はこのように表示されます。 なお、この例のように、編集画面での改行1つは、無視されて、1文として扱われます。
文章で挿むと [[画像:Fuji mt s.jpg]] このように表示されます。
文章で挿むと このように表示されます。
ファイル名では、アルファベットの大文字と小文字が区別されます。一方、半角の空白は、アンダーバー ( _ ) を使っても同一のものと扱われます。
[編集] 説明文をつける
オプションのうち、できるだけ付けるようにしたいのは、どのような画像なのかを簡潔に表した説明文（キャプション）です。
[[画像:ファイル名|説明文]]
とします。
この説明文は、画像を表示できないブラウザや画像を非表示に設定している場合に、画像の代わりに表示する代替テキストとなります（具体的には"img"要素の"alt"属性で設定されます）。この文章は音声ブラウザで読み上げられ、インターネット・エクスプローラーなど一部のブラウザでマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
同様に、"a"要素の"title"属性としても同じ内容の文章が設定されます。この文章はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されるなど、画像を言葉で説明する内容が含まれます。
本来"alt"属性と"title"属性とは別の目的のためにつけられ、従ってそのテキストも異なるべきです。しかしウィキペディアの現在のバージョンでは、同一の文章しか設定できません（これに関しては議論中です。[1]）。また、適切な説明文の付け方については、Wikipedia:画像の代替テキストを参照して下さい。
[[画像:Fuji_mt_s.jpg|本栖湖から眺めた富士山]]
[編集] オプション
説明文の他に、画像の表示サイズを変えたり、表示する位置を決めたり、額縁のように画像の周りに枠をつけることができます。これらのオプションは、縦棒 ( | ) で区切って複数使用できます。順序は自由です。規定されていないオプションは、説明文として扱われます。複数の説明文がある場合や、right と left のような矛盾するオプションが同時に使われた場合は、後ろにあるものが優先されます。ただし、"frame" が指定された場合は、指定の順序に関わらず、"thumb" やサイズ指定は無視されます（後述）。
[編集] 配置指定
画像をページの左右または中央に置きたい場合に指定します。これは同時に、文章と画像の位置関係（テキストの回り込みの有無）を決めるものでもあります。right, left, center, noneの4種類があります。この中から2つ以上同時に指定された場合は、後ろで指定されたものが優先されます。
[編集] right
画像を右寄せして、それに続いて書かれているテキストを、画像の左側に配置します。例:
- [[画像:Kinkaku.jpg|right|200px|金閣寺]]
複数の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。Template:右などを使う必要はなくなりました。
[[画像:Kinkaku.jpg|right|200px|金閣寺]]
[[画像:Kinkaku.jpg|right|200px|金閣寺]]
[編集] left
画像を左寄せして、それに続いて書かれているテキストを、画像の右側に配置します。
- [[画像:Kinkaku.jpg|left|200px|金閣寺]]
[編集] center
画像を中央寄せして、それに続いて書かれているテキストを、画像の下側に配置します。
- [[画像:Kinkaku.jpg|center|200px|金閣寺]]
[編集] none
画像を左寄せして、それに続いて書かれているテキストを、画像の下側に配置します。
- [[画像:Kinkaku.jpg|none|200px|金閣寺]]
この場合の"none"（なし）は、テキストの回り込みをさせないことを意味しています。
[編集] 指定なし
このオプションを指定しない場合は、画像は文中に挿入されます。一番簡単な方法を参照。Unicodeでは規定されていない文字や記号を文章中で使用したい場合に利用できます。
会話ページで、こんな感じで使用している人もいますね [[画像:Smiley.png|16px|Smiley Face]] 推奨しませんけども。
会話ページで、こんな感じで使用している人もいますね 
推奨しませんけども。
[編集] サイズ指定
表示させたいサイズの横幅をピクセル数で指定します。縦横比を保持したままアップロードされた画像を縮小または拡大して表示します。
元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく（IMGタグの"width"属性で指定したときはこのようになります）、ウィキペディアのソフトウェアが、その指定された縮小サイズの画像を自動生成してユーザーに提供します。これは無駄な送受信を省くための仕組みです。
- [[画像:Kinkaku.jpg|left|200px]]
- [[画像:Kinkaku.jpg|left|100px]]
元の画像よりも大きい値を指定して拡大表示されるのは 枠付け用オプション（"thumb", "frame"） をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても、元の画像サイズのまま表示されます。なお、拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。
2つの異なるサイズを指定した場合、後で指定したものが優先されます。
- [[画像:Kinkaku.jpg|right|50px|200px]]
このオプションを指定しない場合は、アップロードされた画像のサイズそのままで表示されます。
[編集] 縦横上限値指定
また新機能として、幅と高さのそれぞれの上限値を指定する方法もあります。例えば、横幅 300px以下、高さ150px以下と指定する場合、"300x150px"と指定します。
- [[画像:Kinkaku.jpg|right|300x150px]]
右のように、横幅が200px、高さが150pxに縮小されて表示されます。つまり、
- 指定した横幅以下、かつ、高さ以下で最大になるように、縦横比を変えずに縮小されます。
この画像の場合、元のサイズは、横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、こちらのサイズで表示されることになります。
※表示される横幅と高さを自由に指定できるわけではありません。
縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。 使用例: Template:Flagicon
[編集] 枠付け
画像の周りに灰色の枠をつけるオプションには、サムネイル形式（"thumb"オプション）とフレーム形式（"frame"オプション）があります。
[編集] thumb
"thumbnail"と指定しても同じ働きをします。あわせてサイズを指定することで、任意の大きさに縮小可能です。サイズ指定がない場合、横幅が180px以下の画像はそのままの大きさで表示されますが、180pxよりも大きい画像は180pxに縮小されます。
- 注1: サイズ指定がないときの横幅の数値は、ログインユーザならばオプション - 「画像等」の設定で、変更することができます（既定値は180px）。
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]→
left、center、noneのいずれかが指定されない場合は、rightを選択した場合と同じになります（右寄せになり、テキストが画像の左側に回り込みます）。したがって、rightは省略可能です。そして、画像の下の枠内に説明文と、「拡大」アイコンが表示されます。アイコンにマウスカーソルをのせると、「拡大」と書かれたツールチップが表示されます。拡大アイコンと画像は、それぞれの画像説明ページにリンクされており、どちらかをクリックすると、本来のサイズの画像を見ることがてきます。
説明文には、リンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意して下さい。
- ←
[[画像:Tokyotower.jpg|thumb|left|100px|[[東京タワー]]と[[増上寺]]本堂]]
説明文中のリンクには、パイプ ( | ) を使って、リンク先の記事と表示される文字を変えることもできます。
- ←
[[画像:Tokyotower.jpg|thumb|[[東京タワー|Tokyo Tower]]]]
- "thumb"オプションをつけた場合は、元画像サイズ以上に拡大表示することができなくなりました。拡大表示したい場合は、このオプションを外して下さい。
- 複数の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
[編集] frame
"framed"と指定しても同じ働きをします。画像のサイズ変更をせずに、サムネイルと同じ感じの枠をつけます。サイズを指定しても無視され、拡大も縮小もされません。画像サイズが元画像のままですから、拡大アイコンも出ません。
[[画像:Tokyotower.jpg|frame|[[東京タワー]]と[[増上寺]]本堂]]→
その他は、"thumb" と同じです。left、center、noneのいずれかが指定されない場合は、右寄せになり、テキストが画像の左側に回り込みます。そして、説明文が、画像の下側枠内に表示されます。また、説明文には、リンクをつけることができます。
サイズ指定しても、この通りです。"thumb"と"frame"を重ねて指定した場合は、frameが優先されます。
- ↑
[[画像:Tokyotower.jpg|frame|thumb|center|40px|[[東京タワー]]と[[増上寺]]本堂]]
"thumb"と"frame"のオプションがウィキペディアのソフトウェアで実装される以前には、画像表示のマークアップを DIV タグで囲って、そこに画像の説明文を置く方法が推奨されていました。
- 古い方法
<div align="center"> [[画像:Fuji mt s.jpg|本栖湖から眺めた富士山]]<br /> [[本栖湖]]から眺めた[[富士山]] </div>
- 新しい方法
[[画像:Fuji mt s.jpg|frame|center|[[本栖湖]]から眺めた[[富士山]]]]
なお、説明文には、何の図なのかを示すだけでなく、委任統治の記事のように図表の注釈を入れるという使い方もできます。
[編集] 回り込みの解除
画像を複数使用したいときに、例えば、
[[画像:Coton de Tular 2.jpg|thumb|100px|left|[[コトン・ド・テュレアール]]]] ここに、この犬の紹介文を書きます。 [[画像:Catyawn.jpg|thumb|left|100px|あくびをするネコ]] ここでは、ネコのあくびについて書いてみます。
と書くと、下のように階段状に表示されてしまいます。
ここに、この犬の紹介文を書きます。
ここでは、ネコのあくびについて書いてみます。
このように、最初の画像の右側に2つ目の画像が回り込むのをやめさせるためには、
- <br clear="all" />
を画像と画像の間に置きます。スタイルシート (CSS) が好きな方は、
- <br style="clear:both" />
でも、同じ働きをします。どちらでも好きな方を使って下さい。
[[画像:Coton de Tular 2.jpg|thumb|100px|left|[[コトン・ド・テュレアール]]]] ここに、この犬の紹介文を書きます。 <br clear="all" /> [[画像:Catyawn.jpg|thumb|left|100px|あくびをするネコ]] ここでは、ネコのあくびについて書いてみます。
ここに、この犬の紹介文を書きます。
ここでは、ネコのあくびについて書いてみます。
[編集] ギャラリー
この方法は、たくさんの画像を並べて表示するのに役立ちます。各画像の高さと幅を、縦横比を変えずに、各120ピクセルで収まるように縮小して、横に4つずつ順に並べます。高さと幅の双方とも120ピクセル未満の小さな画像は、そのままの大きさで表示されます。
<gallery> 画像:Fuji_mt_s.jpg 画像:Kinkaku.jpg|説明文 画像:Tokyotower.jpg 画像:Coton de Tular 2.jpg 画像:Catyawn.jpg|説明文で[[ネコ|リンク]]もできます。 画像:Geographylogo.png </gallery>
各画像の先頭と末尾に大括弧（[[と]]）が不要であることに注意して下さい。オプションで説明文をつけるかどうかは自由です。説明文が長い場合は、画像を囲む枠の横幅を広げないで、文を折り返して表示するので、枠が縦長になります（ブラウザによっては、横幅を広げるものもあるようです）。画像のサイズを指定しても、説明文とみなされ、表示サイズを変えることはできません。
 |
 説明文 |
 |
 |
 説明文でリンクもできます。 |
 |
実際に使用した例として、超高層ビルを参照して下さい。
また、カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられている画像が、自動的にギャラリー形式で表示されます。
[編集] SVGファイルの表示について
SVG形式の画像ファイルをサイズ指定して縮小表示させようとしても、何も表示されない（正確には指定サイズの透明画像になる）場合があることが報告されています（→bugzilla: 5463）。
現在のところ、SVGファイルはそのままブラウザで表示させずに、サーバ上で指定サイズのPNGファイルを自動生成して、それを使って表示をする方法がとられています。このPNGファイルの生成に失敗することが、しばしば起きています。PNGファイルはサイズ毎に生成されるので、指定する数値を変えれば、うまく表示されることもあります。しかし、どうしても特定のサイズで表示させたい場合は、以下の方法を試して下さい。
- まず、ウィキメディア・コモンズの画像説明ページを開きます。空白（透明）画像が占めている部分をクリックして表示される日本語版の画像説明ページから、「コモンズのページ」へのリンクを使ってたどりつくことが可能です。もちろん、直接行っても構いません。
- ブラウザのURLアドレス欄で、画像説明ページのアドレスの後につづけて、
?action=purgeを付け足し、リターンキーを押します。 - 日本語版に戻って、表示させたい記事をリロードします。これでも表示されなければ、2. を繰り返します。通常は1回、多くても2回で成功するようです。
それでもうまくいかない、または、この説明を読んでもわからない場合は、ノートへ、どの画像をどのサイズで表示させたいのかを明記して、助けを求めて下さい。
上記の方法でもうまくいかない画像
- 画像:Flag of OIC.svgの横幅22px →
← ここに表示されるはず。
