ヘルプ:画像の表示

提供: Yourpedia
移動: 案内、 検索

このページではYourpediaの各ページ上で画像を表示させる方法について説明します。表示させることのできる画像は、ウィキペディア日本語版またはユアメディア・コモンズにアップロードされた画像のみです。アップロードの方法などについては、一番下の関連項目を参照して下さい。ここでは既にアップロードがされていることを前提として、それを表示する方法を説明します。なお、どのような場合にどのような表示方法を採るべきかのガイドラインも関連項目を参照して下さい。

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

要点

  • 書式：オプション
  • オプションは、縦棒（|）で区切って複数指定可能。順序は不問だが、矛盾するものを同時に指定した場合は原則として後ろにあるものが優先される。
  • オプションの種類
    • 説明文（代替テキスト）
    • 配置指定：right, left, center, none
    • サイズ指定：横幅をピクセル数で指定。xxpx
    • 枠付け指定：thumb, frame

一番簡単な方法

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

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

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

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

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

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

説明文をつける

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

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

同様に、"a"要素の"title"属性としても同じ内容の文章が設定されます。この文章はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されるなど、画像を言葉で説明する内容が含まれます。

本来"alt"属性と"title"属性とは別の目的のためにつけられ、従ってそのテキストも異なるべきです。しかしウィキペディアの現在のバージョンでは、同一の文章しか設定できません（これに関しては議論中です[1]）。 

[[画像: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]] 推奨しませんけども。

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

サイズ指定

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

200px

元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく（IMGタグの"width"属性で指定したときはこのようになります）、ウィキペディアのソフトウェアがその指定された縮小サイズの画像を自動生成してユーザーに提供します。これは無駄な送受信を省くための仕組みです。

[[画像:Kinkaku.jpg|left|200px]]
100px
[[画像:Kinkaku.jpg|left|100px]]

元の画像よりも大きい値を指定して拡大表示されるのは枠付け用オプション（"thumb", "frame"）をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても元の画像サイズのまま表示されます。なお拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。

200px

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

[[画像:Kinkaku.jpg|right|50px|200px]]

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

縦横上限値指定

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

300x150px
[[画像:Kinkaku.jpg|right|300x150px]]

右のように横幅が200px、高さが150pxに縮小されて表示されます。つまり指定した横幅以下、かつ高さ以下で最大になるように、縦横比を変えずに縮小されます。この画像の場合、元のサイズは横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、こちらのサイズで表示されることになります。

※表示される横幅と高さを自由に指定できるわけではありません。

縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。
使用例：Template:Flagicon

枠付け

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

画像の周りに灰色の枠をつけるオプションには、サムネイル形式（"thumb"オプション）とフレーム形式（"frame"オプション）があります。

thumb

"thumbnail"と指定しても同じ働きをします。あわせてサイズを指定することで任意の大きさに縮小可能です。サイズ指定がない場合、横幅が180px以下の画像はそのままの大きさで表示されますが、180pxよりも大きい画像は180pxに縮小されます。

  • 注1：サイズ指定がないときの横幅の数値は、ログインユーザならばオプション - 「画像等」の設定で変更することができます（既定値は180px）。
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]] →

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

説明文にはリンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意して下さい。

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

説明文中のリンクには、パイプ（|）を使ってリンク先の記事と表示される文字を変えることもできます。

← [[画像:Tokyotower.jpg|thumb|[[東京タワー|Tokyo Tower]]]]
  • "thumb"オプションをつけた場合は、元画像サイズ以上に拡大表示することができなくなりました。拡大表示したい場合はこのオプションを外して下さい。
  • 複数の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
[[画像:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]

frame

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

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

[[画像:Tokyotower.jpg|frame|[[東京タワー]]と[[増上寺]]本堂]] →

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

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

サイズ指定してもこの通りです。"thumb"と"frame"を重ねて指定した場合は、frameが優先されます。

↑ [[画像:Tokyotower.jpg|frame|thumb|center|40px|[[東京タワー]]と[[増上寺]]本堂]]

"thumb"と"frame"のオプションがウィキペディアのソフトウェアで実装される以前には、画像表示のマークアップをDIVタグで囲ってそこに画像の説明文を置く方法が推奨されていました。

  • 古い方法
<div style="float:center">
[[画像:Fuji mt s.jpg|本栖湖から眺めた富士山]]<br/>
[[本栖湖]]から眺めた[[富士山]]
</div>

本栖湖から眺めた富士山
本栖湖から眺めた富士山

  • 新しい方法
[[画像:Fuji mt s.jpg|frame|center|[[本栖湖]]から眺めた[[富士山]]]]
ファイル:Fuji mt s.jpg
本栖湖から眺めた富士山

なお、説明文には何の図なのかを示すだけでなく、委任統治の記事のように図表の注釈を入れるという使い方もできます。

回り込みの解除

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

[[画像:Coton de Tular 2.jpg|thumb|left|100px|[[コトン・ド・テュレアール]]]]
ここにこの犬の紹介文を書きます。
[[画像:Catyawn.jpg|thumb|right|100px|あくびをするネコ]]
ここではネコのあくびについて書いてみます。

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

ファイル:Coton de Tular 2.jpg
コトン・ド・テュレアール

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

ファイル:Catyawn.jpg
あくびをするネコ

ここではネコのあくびについて書いてみます。

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

<br style="clear:both"/>

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

[[画像:Coton de Tular 2.jpg|thumb|left|100px|[[コトン・ド・テュレアール]]]]
ここにこの犬の紹介文を書きます。
<br style="clear:both"/>
[[画像:Catyawn.jpg|thumb|right|100px|あくびをするネコ]]
ここではネコのあくびについて書いてみます。
ファイル:Coton de Tular 2.jpg
コトン・ド・テュレアール

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

ファイル:Catyawn.jpg
あくびをするネコ

ここではネコのあくびについて書いてみます。

ギャラリー

この方法はたくさんの画像を並べて表示するのに役立ちます。各画像の高さと幅を、縦横比を変えずに各120ピクセルで収まるように縮小して、横に4つずつ順に並べます。高さと幅の双方とも120ピクセル未満の小さな画像は、そのままの大きさで表示されます。 

<gallery>
画像:Fuji_mt_s.jpg
画像:Kinkaku.jpg|説明文
画像:Tokyotower.jpg
画像:Coton de Tular 2.jpg
画像:Catyawn.jpg|説明文で[[ネコ|リンク]]もできます。
画像:Geographylogo.png
</gallery>

各画像の先頭と末尾に大括弧（'''と'''）が不要であることに注意して下さい。オプションで説明文をつけるかどうかは自由です。説明文が長い場合は、画像を囲む枠の横幅を広げないで、文を折り返して表示するので、枠が縦長になります（ブラウザによっては、横幅を広げるものもあるようです）。画像のサイズを指定しても、説明文とみなされ、表示サイズを変えることはできません。

  • Fuji mt s.jpg
  • Kinkaku.jpg

    説明文

  • Tokyotower.jpg
  • Coton de Tular 2.jpg
  • Catyawn.jpg

    説明文でリンクもできます。

  • Geographylogo.png

実際に使用した例として、超高層ビルを参照して下さい。

また、カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられている画像が自動的にギャラリー形式で表示されます。

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

SVG形式の画像ファイルをサイズ指定して縮小表示させようとしても、何も表示されない（正確には指定サイズの透明画像になる）場合があることが報告されています（→bugzilla: 5463）。

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

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

それでもうまくいかない、またはこの説明を読んでもわからない場合はノートへ、どの画像をどのサイズで表示させたいのかを明記して助けを求めて下さい。

上記の方法でもうまくいかない画像

関連項目

「http://ja.yourpedia.org/mediawiki/index.php?title=ヘルプ:画像の表示&oldid=23128」から取得