ツールボックス
Help:画像の表示
このページは日本語版ウィキペディアのヘルプページです。
このページでは各ページ上で画像を表示させる方法について説明します。
表示させることのできる画像は、ウィキペディア日本語版またはウィキメディア・コモンズにアップロードされた画像のみです。アップロードの方法などについては「Help:画像などのファイルのアップロードと利用」を参照して下さい。ここでは既にアップロードがされていることを前提として、それを表示する方法を説明します。どのような場合にどのような表示方法を採るべきかのガイドラインについては「Wikipedia:画像利用の方針」を参照して下さい。
目次 |
[編集] 要点
ウィキペディアでは、HTMLについて知らない人にも画像を扱うことができるように独自の簡単なマークアップを採用しています。その代わり、HTMLのIMGタグは無効化されています。
- 書式：[[画像:ファイル名|オプション]] （内部リンクのマークアップと同じ）
- オプションは、縦棒（|）で区切って複数指定可能です。順序は不問ですが、矛盾するものを同時に指定した場合は原則として後ろにあるものが優先されます。指定できるオプションの種類をまとめると [[画像:{ファイル名}|{枠付け}|{配置}|{サイズ}|{キャプション}]]のようになります。
- 枠付け
- 'thumb' , 'frame' または 'border' が指定できます。画像を決まったフォーマットで表示します。
- 配置
- 'right', 'left', 'center' または 'none' が指定できます。ページ中の画像の配置位置を指定します。 'thumb' または 'frame' を用いている時には、 'right' が既定値です。
- サイズ
- {幅}px または {幅}x{高さ}px で指定します。画像の縦横比は保持されます。
- キャプション
- 上記のいずれかに当てはまらない要素はすべてキャプション用の文字列と認識されます。
ウィキメディア・コモンズにあるファイルを表示するときも、日本語版にある画像を表示するときと同じ書き方が使用できます。コモンズからウィキペディアに表示されている画像は画像ページにその旨が自動的に表示されます。
[編集] 一番簡単な方法
最も簡単な方法は[[画像:ファイル名]]と記述するものです。この場合、アップロードされた画像のサイズのまま表示されます。また表示される位置は、通常の文字と同じようにテキストの中に挿入された形で表示されます。
[[画像:Fuji mt s.jpg]] 文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章で挿むと [[画像:Fuji mt s.jpg]] このように表示されます。
文章で挿むと このように表示されます。
ファイル名では、アルファベットの大文字と小文字が区別されます。一方、半角の空白はアンダーバー（_）を使っても同一のものと扱われます。
[編集] キャプションをつける
オプションのうち、できるだけ付けるようにしたいのはどのような画像なのかを簡潔に表した説明文（キャプション）です。[[画像:ファイル名|説明文]]とします。
このキャプションは、画像を表示できないブラウザや画像を非表示に設定している場合に画像の代わりに表示する代替テキストとなります（具体的には生成されるHTMLソースコード中で、"img"要素の"alt"属性に設定されます）。この文章は音声ブラウザで読み上げられ、インターネット・エクスプローラーなど一部のブラウザでマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
同様に、"a"要素の"title"属性としても同じ内容の文章が設定されます。この文章はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されるなど、画像を言葉で説明する内容が含まれます。
本来"alt"属性と"title"属性とは別の目的のためにつけられ、従ってそのテキストも異なるべきです。しかしウィキペディアの現在のバージョンでは、同一の文章しか設定できません（これに関しては議論中です[1]）。
[[画像:Fuji_mt_s.jpg|本栖湖から眺めた富士山]]
なお、ファイル挿入のマークアップの閉じ括弧の直前にパイプ記号 ("|") を置かないように注意してください。パイプ付きリンクの機能のために、閉じ括弧の直前にパイプ記号があると、指定してあるキャプションは無視され、ファイル名がキャプションとして使用されてしまいます。
[[image:tst.png|abc]] [[image:tst.png|abc|]]
[編集] オプション
キャプションの他に、画像の表示サイズを変えたり表示する位置を決めたり、額縁のように画像の周りに枠をつけることができます。これらのオプションは、縦棒（|）で区切って複数使用できます。順序は自由です。規定されていないオプションはキャプションとして扱われます。複数のキャプションがある場合やrightとleftのような矛盾するオプションが同時に使われた場合は、後ろにあるものが優先されます。ただし"frame"が指定された場合は、指定の順序に関わらず"thumb"やサイズ指定は無視されます（後述）。
[編集] 配置指定
画像をページの左右または中央に置きたい場合に指定します。これは同時に文章と画像の位置関係（テキストの回り込みの有無）を決めるものでもあります。right, left, center, noneの4種類があります。この中から2つ以上同時に指定された場合は、後ろで指定されたものが優先されます。
[編集] right
[[画像:Toudaiji_daibutsuden_1.jpg|right|東大寺大仏殿]]
画像を右寄せして、それに続いて書かれているテキストを、画像の左側に配置します。
複数の画像を右側に縦1列で並べたいときは下記のように並べるだけでOKです。Template:右などを使う必要はなくなりました。
[[画像:Toudaiji_daibutsuden_1.jpg|right|東大寺大仏殿]] [[画像:Kinkaku.jpg|right|金閣寺]]
[編集] left
[[画像:Toudaiji_daibutsuden_1.jpg|left|東大寺大仏殿]]
画像を左寄せして、それに続いて書かれているテキストを画像の右側に配置します。
[編集] center
[[画像:Toudaiji_daibutsuden_1.jpg|center|東大寺大仏殿]]
画像を中央寄せして、それに続いて書かれているテキストを画像の下側に配置します。
[編集] none
[[画像:Toudaiji_daibutsuden_1.jpg|none|東大寺大仏殿]]
画像を左寄せして、それに続いて書かれているテキストを画像の下側に配置します。 この場合の"none"（なし）は、テキストの回り込みをさせないことを意味しています。
[編集] 指定なし
このオプションを指定しない場合は、画像は文中に挿入されます。一番簡単な方法を参照。Unicodeでは規定されていない文字や記号を文章中で使用したい場合に利用できます。
会話ページでこんな感じで使用している人もいますね [[画像:Smiley.png|16px|Smiley Face]] 推奨しませんけども。
会話ページでこんな感じで使用している人もいますね 
推奨しませんけども。
[編集] サイズ指定
表示させたいサイズの横幅をピクセル数で指定します。縦横比を保持したままアップロードされた画像を縮小または拡大して表示します。
元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく（IMGタグの"width"属性で指定したときはこのようになります）、メディアウィキがその指定された縮小サイズの画像を自動生成して表示します。これは無駄な送受信を省くための仕組みです。
[[画像:Kinkaku.jpg|200px]]
[[画像:Kinkaku.jpg|100px]]
元の画像よりも大きい値を指定して拡大表示されるのは枠付け用オプションのうち"thumb", "frame"をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても元の画像サイズのまま表示されます。なお拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。
2つの異なるサイズを指定した場合、後で指定したものが優先されます。
[[画像:Kinkaku.jpg|50px|200px]]
このオプションを指定しない場合は、アップロードされた画像のサイズそのままで表示されます。
[編集] 縦横上限値指定
また新機能として、幅と高さのそれぞれの上限値を指定する方法もあります。例えば、横幅 300px以下、高さ150px以下と指定する場合、"300x150px"と指定します。
[[画像:Kinkaku.jpg|300x150px]]
この画像の場合、元のサイズは横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、このように横幅が200px、高さが150pxに縮小されて表示されます。つまり指定した横幅以下、かつ高さ以下で最大になるように、縦横比を変えずに縮小されます。表示される横幅と高さを自由に指定できるわけではありません。縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。
[編集] 枠付け
画像の周りに灰色の枠をつけるオプションには、サムネイル形式（"thumb"オプション）とフレーム形式（"frame"オプション）があります。また、画像の周りを細い線で囲むボーダー方式（"border"オプション）も追加されました。
[編集] thumb
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
画像をサムネイル形式で表示します。"thumbnail"と指定しても同じ働きをします。
left、center、noneのいずれかが指定されない場合はrightを選択した場合と同じになります（右寄せになり、テキストが画像の左側に回り込みます）。したがって、rightは省略可能です。そして、画像の下の枠内に説明文と「拡大」アイコンが表示されます。アイコンにマウスカーソルをのせると、「拡大」と書かれたツールチップが表示されます。拡大アイコンと画像はそれぞれの画像ページにリンクされており、どちらかをクリックすると本来のサイズの画像を見ることがてきます。
あわせてサイズを指定することで任意の大きさに縮小可能です。サイズ指定がない場合、横幅が180px以下の画像はそのままの大きさで表示されますが、180pxよりも大きい画像は180pxに縮小されます。なお、サイズ指定がないときの横幅の数値は、ログイン利用者ならばオプション - 「画像等」の設定で変更することができます（既定値は180px）。
逆に画像のもとのサイズ以上に拡大表示することはできません。拡大表示したい場合は "thumb"オプションを外して下さい。
説明文にはリンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意して下さい。
[[画像:Tokyotower.jpg|thumb|left|100px|[[東京タワー]]と[[増上寺]]本堂]]
[[画像:Tokyotower.jpg|thumb|[[東京タワー|Tokyo Tower]]]]
説明文中のリンクには、パイプ（|）を使ってリンク先の記事と表示される文字を変えることもできます。
複数のサムネイル形式の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]] [[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
[編集] frame
[[画像:Tokyotower.jpg|frame|[[東京タワー]]と[[増上寺]]本堂]]
"framed"または"enframed"と指定しても同じ働きをします。画像のサイズ変更をせずに、サムネイルと同じ感じの枠をつけます。サイズを指定しても無視され、拡大も縮小もされません。画像サイズが元画像のままですから、拡大アイコンも出ません。
[[画像:Tokyotower.jpg|frame|thumb|center|40px|[[東京タワー]]と[[増上寺]]本堂]]
サイズ指定してもこの通りです。"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あり→
[編集] 回り込みの解除
画像を複数使用したいときに、例えば
[[画像:Coton de Tular 2.jpg|thumb|left|100px|白犬]] ここにこの犬の紹介文を書きます。 [[画像:Catyawn.jpg|thumb|right|100px|あくびをするネコ]] ここではネコのあくびについて書いてみます。
と書くと、下のように階段状に表示されてしまいます。
ここにこの犬の紹介文を書きます。
ここではネコのあくびについて書いてみます。
このように、最初の画像の右側に2つ目の文章（画像）が回り込むのをやめさせるためには
{{-}}
を画像と画像の間に置きます。
[[画像:Coton de Tular 2.jpg|thumb|left|100px|白犬]]
ここにこの犬の紹介文を書きます。
{{-}}
[[画像:Catyawn.jpg|thumb|right|100px|あくびをするネコ]]
ここではネコのあくびについて書いてみます。
ここにこの犬の紹介文を書きます。
ここではネコのあくびについて書いてみます。
[編集] ギャラリー
ギャラリー・タグはサムネイル画像を並べて表示できる手軽な方法です。全ての画像は同一の幅で表示されます。セルに画像の代わりにテキストを入れることもできます。ギャラリー・タグを使うと、class="gallery" を指定した表がHTMLソース中に生成されます（書くセルのクラスは class="gallerybox"）。
各エントリの書き方は画像:画像名又は画像:画像名|リンクも付加可能なキャプションとなります。各画像の先頭と末尾に大括弧（[[と]]）が不要であることに注意して下さい。オプションで説明文をつけるかどうかは自由です。説明文が長い場合は、画像を囲む枠の横幅を広げないで、文を折り返して表示するので、枠が縦長になります（ブラウザによっては、横幅を広げるものもあるようです）。画像のサイズを指定しても、説明文とみなされ、表示サイズを変えることはできません。
"gallery caption" のパラメーターでギャラリーのタイトルを指定できます。各行のセル数は "perrow"で指定できます。既定値は4です。また各セルに配置する画像の幅及び高さも指定できます（"widths" と "heights"）。既定値は各120ピクセルです。高さと幅の双方とも120ピクセル未満の小さな画像は、そのままの大きさで表示されます。キャプション部分はキャプションの長さに応じて高さが自動的に調整されます。各行の高さは行中の最大高さを持つ画像およびキャプションの高さに合せたものとなります。
<gallery> 画像:Fuji_mt_s.jpg 画像:Kinkaku.jpg|説明文 画像:Tokyotower.jpg 画像:Coton de Tular 2.jpg 画像:Catyawn.jpg|説明文で[[ネコ|リンク]]もできます。 画像:Geographylogo.png </gallery>
|
|
説明文 |
|
|
|
説明文でリンクもできます。 |
 |
<gallery caption="サンプル・ギャラリー" widths="100px" heights="100px" perrow="6"> Image:Drenthe-Position.png|[[w:ja:ドレンテ州|ドレンテ州]]は一番人口密度の低い地域 Image:Flevoland-Position.png Image:Friesland-Position.png|[[w:ja:フリースラント州|フリースラント州]]には湖が多い Image:Gelderland-Position.png Image:Groningen-Position.png Image:Limburg-Position.png Image:Noord_Brabant-Position.png Image:Noord_Holland-Position.png Image:Overijssel-Position.png Image:Zuid_Holland-Position.png|[[w:ja:南ホラント州|南ホラント州]]は人口密度のもっとも高い地域 湖 Image:Zeeland-Position.png </gallery>
 ドレンテ州は一番人口密度の低い地域 |
 |
 フリースラント州には湖が多い |
 |
 |
 |
 |
 |
 |
 南ホラント州は人口密度のもっとも高い地域 |
湖
|
 |
実際に使用した例として、超高層ビルを参照して下さい。
また、カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられている画像が自動的にギャラリー形式で表示されます。キャプション部分にはファイル名の最初の20文字分（1バイト文字換算）が示され、表示しきれない場合には省略符号が末尾につきます。またファイル本体だけでなく、ファイル名部分も画像ページにリンクしています。代替テキストや、他のリンクをつけることはできません。ファイルサイズも示されます。
カテゴリページのギャラリーと通常ページのギャラリーの比較例としては、 commons:Category:William-Adolphe Bouguereauとcommons:William-Adolphe Bouguereauを参照してください。
[編集] 表中の画像表示
表のマークアップを使い、各セルに画像を埋め込むことで、サイズやレイアウト、キャプションなどをより細かく設定したギャラリーを作ることができます。
画像表の例：
{|border="1"
|+'''オランダの州'''
|-
| valign="top"|
[[Image:Drenthe-Position.png|thumb|left|150px|[[w:ja:ドレンテ州|ドレンテ州]]：人口密度最小の州]]
| valign="top"|
[[Image:Flevoland-Position.png|thumb|left|100px|]]
| valign="top"|
[[Image:Friesland-Position.png|thumb|left|100px|]]
|-
|
|-
| valign="top"|
[[Image:Gelderland-Position.png|thumb|left|100px|]]
| valign="top"|
[[Image:Zuid_Holland-Position.png|thumb|left|100px|[[w:ja:南ホラント州|南ホラント州]]：人口密度最大の州]]
| valign="top"|
[[Image:Utrecht-Position.png|thumb|left|50px|]]
|}
|
|
|
|
|
|
|
|
この方法では、各画像の幅はサイズオプションで指定されており、高さはキャプションの有無及びその長さによって決定しています。セルの幅は画像の幅に依存しており、行の高さは最大高の画像に依存しています。
[編集] SVGファイルの表示について
SVG形式の画像ファイルをサイズ指定して縮小表示させようとしても、何も表示されない（正確には指定サイズの透明画像になる）場合があることが報告されています（→bugzilla: 5463）。
現在のところ、SVGファイルはそのままブラウザで表示させずにサーバ上で指定サイズのPNGファイルを自動生成して、それを使って表示をする方法がとられています。このPNGファイルの生成に失敗することが、しばしば起きています。PNGファイルはサイズ毎に生成されるので、指定する数値を変えればうまく表示されることもあります。しかし、どうしても特定のサイズで表示させたい場合は以下の方法を試して下さい。
- まず、ウィキメディア・コモンズの画像ページを開きます。空白（透明）画像が占めている部分をクリックして表示される日本語版の画像ページから、「コモンズのページ」へのリンクを使ってたどりつくことが可能です。もちろん、直接行っても構いません。
- ブラウザのURLアドレス欄で、画像ページのアドレスの後につづけて
?action=purgeを付け足し、エンターキー（リターンキー）を押します。 - 日本語版に戻って、表示させたい記事をリロードします。これでも表示されなければ、2.を繰り返します。通常は1回、多くても2回で成功するようです。
それでもうまくいかない、または、この説明を読んでもわからない場合は、ノートへ、どの画像をどのサイズで表示させたいのかを明記して、助けを求めて下さい。
上記の方法でもうまくいかない画像
- 画像:Flag of OIC.svgの横幅22px →
← ここに表示されるはず。
[編集] クリッカブル・マップ
[2] のようなナビゲーション用の地図では、地図上の領域にウェブページをリンクさせています。ウィキテキストでは<area> のHTMLタグは使えませんが、下のようないくつかの方法で類似の結果を得ることができます。
- ImageMap (MW 1.9+) を使えば、画像中の領域を指定してウィキページへリンクさせることができます。
- EasyTimeline（簡易経時グラフ）を使うと、画像とその画像を埋め込んだページが生成されますが、その際に<area>で定義される矩形の地図領域を含みます。外部ページへのリンクのリンクラベルにはドメイン名のみしか使えません。また、矩形のサイズは調整できず、リンクラベルの長さとフォントサイズに依存します。地図領域が重なってしまった場合、ステータスバーやポップアップを利用しないとリンク先がわかりません。あまりに重複が激しいと、リンクの一部がクリックできなくなる可能性があります。ただし、unicode未対応のため、ウィキペディア日本語版では使えません。
- 画像をあらかじめ矩形に分割、または画像を合成し、リダイレクトを利用して各矩形部分の画像ページから目的のページへリンクさせる。
関連項目
- meta:Help:Composite images - 画像とリンクテキストの合成を可能にする。
- Map of Downtown Ottawa, w:en:Wellington Street.
[編集] ImageMapを使った例
<imagemap> Image:Sudoku dot notation.png|300px circle 320 315 165 [[w:1|1]] circle 750 315 160 [[w:2|2]] circle 1175 315 160 [[w:3|3]] circle 320 750 160 [[w:4|4]] circle 750 750 160 [[w:5|5]] circle 1175 750 160 [[w:6|6]] circle 320 1175 160 [[w:7|7]] circle 750 1175 160 [[w:8|8]] circle 1175 1175 160 [[w:9|9]] default [[w:Number|Number]] </imagemap>
関連項目
[編集] 代替例
以下に試みられているのは代替例です（ポップアップボックスに注意）。
| o | ||
| o | ||
| o |
都市の輪郭が示されておりクリック可能なラベルが付いたアスキーアートによる地図。
x
xxx Leiden
x
xx xxxx The Hague xxx
xx
xxxxx Rotterdam
xxxx
m:地図の作成, m:Maps' clickabilityも参照してください。
画像を他のページへのリンクのボタンとして利用したい場合は、meta:Help:Navigational imageを参照してください。
