ヘルプ:画像の表示
このページでは各ページ上で画像を表示させる方法について説明します。
表示させることのできる画像は、「すだちWiki」にアップロードされた画像のみです。ここでは既にファイルがアップロードされていることを前提として、それを表示する方法を説明します。
要点
MediaWiki について知らない人にも画像を扱うことができるように独自の簡単なマークアップを採用しています。その代わり、XHTMLのIMGタグは無効化されています。
- 書式:
[[ファイル:ファイル名|オプション]]
(内部リンクのマークアップと同じ) - オプションは、縦棒(|)で区切って複数指定可能です。順序は不問ですが、矛盾するものを同時に指定した場合は原則として後ろにあるものが優先されます。指定できるオプションの種類をまとめると
[[ファイル:{ファイル名}|{表示形式}|{配置}|{サイズ}|{画像リンク}|{キャプション}|{代替文}]]
のようになります。- 表示形式
thumb
,frame
,border
またはframeless
が指定できます。画像を決まった表示形式で表示します。- 配置
right
,left
,center
またはnone
が指定できます。ページ中の画像の配置位置を指定します。thumb
またはframe
を用いている時には、right
が既定値です。このほか、垂直方向の配置も指定できます。- サイズ
- {幅}px または {幅}x{高さ}px で指定します。画像の縦横比は保持されます。
- 画像リンク
- 画像からリンクするページを指定します。
- キャプション
- 上記のいずれかに当てはまらない要素はすべてキャプション用の文字列と認識されます。
- 代替文
- 読み上げブラウザなどのための代替文をキャプションとは別指定する際に使用します。
一番簡単な方法
最も簡単な方法は[[ファイル:ファイル名]]
と記述するものです。この場合、アップロードされた画像のサイズのまま表示されます。また表示される位置は、通常の文字と同じようにテキストの中に挿入された形で表示されます。
[[ファイル:Fuji mt s.jpg]] 文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章の先頭に置いた場合はこのように表示されます。 なおこの例のように、編集画面での改行1つは無視されて、1文として扱われます。
文章で挿むと [[ファイル:Fuji mt s.jpg]] このように表示されます。
ファイル名では、アルファベットの大文字と小文字が区別されます。一方、半角の空白はアンダーバー(_)を使っても同一のものと扱われます。
キャプションをつける
オプションのうち、できるだけ付けるようにしたいのはどのような画像なのかを簡潔に表したキャプション(説明文)です。[[ファイル:ファイル名|キャプション]]
とします。
[[ファイル:Fuji mt s.jpg|本栖湖から眺めた富士山]]
このキャプションは、生成されるXHTMLソースコード中で "a" 要素の "title" 属性と、"img" 要素の "alt" 属性の2つに対して使用されます。この属性はマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
alt=
により、"img" 要素の "alt" 属性を上記とは別に強制的に指定できます。これは、画像を表示できないブラウザや画像を非表示に設定している場合に画像の代わりに表示したり、音声ブラウザで読み上げたりする代替テキストを指定する属性ですので、(画像の説明ではなく)画像の代替となる言葉であるべきです。インターネット・エクスプローラーなど一部のブラウザではマウスカーソルを乗せたときに表示されるツールチップの文章としても使用されます。
[[ファイル:Fuji mt s.jpg|alt=富士山|本栖湖から眺めた富士山]]
なお、ファイル挿入のマークアップの閉じ括弧の直前にパイプ記号 ("|") を置かないように注意してください。パイプ付きリンクの機能のために、閉じ括弧の直前にパイプ記号があると、指定してあるキャプションは無視され、ファイル名がキャプションとして使用されてしまいます。
[[ファイル:Hana.jpg|花]] [[ファイル:Hana.jpg|花|]]
オプション
キャプションの他に、画像の表示サイズを変えたり表示する位置を決めたり、額縁のように画像の周りに枠をつけたりすることができます。これらのオプションは、縦棒(|)で区切って複数使用できます。順序は自由です。規定されていないオプションはキャプションとして扱われます。複数のキャプションがある場合や right
と left
のような矛盾するオプションが同時に使われた場合は、後ろにあるものが優先されます。ただしframe
が指定された場合は、指定の順序に関わらず thumb
やサイズ指定は無視されます(後述)。
配置指定
画像をページの左右または中央に置きたい場合に指定します。これは同時に文章と画像の位置関係(テキストの回り込みの有無)を決めるものでもあります。right
, left
, center
, none
の4種類があります。この中から2つ以上同時に指定された場合は、後ろで指定されたものが優先されます。
right
[[ファイル:Toudaiji daibutsuden 1.jpg|right|東大寺大仏殿]]
画像を右寄せして、それに続いて書かれているテキストを、画像の左側に配置します。right
のかわりに右
も使えます。
複数の画像を右側に縦1列で並べたいときは下記のように並べるだけでOKです。
[[ファイル: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]] 推奨しませんけども。
会話ページでこんな感じで使用している人もいますね 推奨しませんけども。
垂直方向の指定
以下のオプションがそれぞれ指定できます。
baseline
まっかな[[ファイル:Red-square.gif|baseline]]四角形
まっかな四角形sub
まっかな[[ファイル:Red-square.gif|sub]]四角形
まっかな四角形super
まっかな[[ファイル:Red-square.gif|super]]四角形
まっかな四角形top
まっかな[[ファイル:Red-square.gif|top]]四角形
まっかな四角形text-top
まっかな[[ファイル:Red-square.gif|text-top]]四角形
まっかな四角形middle
- デフォルトの状態。
まっかな[[ファイル:Red-square.gif|middle]]四角形
まっかな四角形 bottom
まっかな[[ファイル:Red-square.gif|bottom]]四角形
まっかな四角形text-bottom
まっかな[[ファイル:Red-square.gif|text-bottom]]四角形
まっかな四角形
サイズ指定
表示させたいサイズの横幅をピクセル数で指定します。縦横比を保持したままアップロードされた画像を縮小または拡大して表示します。
元の画像よりも小さい値を指定した場合、ブラウザの側で表示サイズを縮小させるのではなく("img" 要素の "width" 属性で指定したときはこのようになります)、MediaWikiがその指定された縮小サイズの画像を自動生成して表示します。これは無駄な送受信を省くための仕組みです。
[[ファイル:Kinkaku.jpg|200px]]
[[ファイル:Kinkaku.jpg|100px]]
元の画像よりも大きい値を指定して拡大表示されるのは表示形式用オプションのうち thumb
, frame
, frameless
をつけないときだけです。これらをつけた場合は、元の画像サイズより大きい値を指定しても元の画像サイズのまま表示されます。なお拡大表示される場合、指定サイズの画像は生成せずに元の画像をブラウザ側で引き延ばして表示します。
2つの異なるサイズを指定した場合、後で指定したものが優先されます。
[[ファイル:Kinkaku.jpg|50px|200px]]
このオプションを指定しない場合は、アップロードされた画像のサイズそのままで表示されます。
縦横上限値指定
また、幅と高さのそれぞれの上限値を指定する方法もあります。例えば、横幅 300px以下、高さ150px以下と指定する場合、300x150px
と指定します。
[[ファイル:Kinkaku.jpg|300x150px]]
この画像の場合、元のサイズは横600px、縦450pxですから、幅の指定値300pxに合わせると高さが225pxとなるので条件を満たしません。一方、高さの指定値150pxに合わせると幅は200pxとなるので条件に合います。よって、このように横幅が200px、高さが150pxに縮小されて表示されます。つまり指定した横幅以下、かつ高さ以下で最大になるように、縦横比を変えずに縮小されます。表示される横幅と高さを自由に指定できるわけではありません。縦横比の異なる複数の画像を、同じ大きさの枠内に収まるようにしたいときなどに使用します。
応用として、x150px
のようにすることで高さだけを指定することができます。
[[ファイル:Kinkaku.jpg|x200px]]
表示形式
画像の周りに灰色の枠をつけるオプションとしてサムネイル形式(thumb
オプション)とフレーム形式(frame
オプション)があります。ボーダー方式(border
オプション)は画像の周りを細い線で囲みます。 frameless
オプションは枠なしのままサムネイル形式と同じサイズを使用することを指定します。
thumb
[[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
画像をサムネイル形式で表示します。thumbnail
と指定しても同じ働きをします。
left
、center
、none
のいずれかが指定されない場合は right
を選択した場合と同じになります(右寄せになり、テキストが画像の左側に回り込みます)。したがって、right
は省略可能です。そして、画像の下の枠内にキャプションと「拡大」アイコンが表示されます。アイコンにマウスカーソルをのせると、「拡大」と書かれたツールチップが表示されます。拡大アイコンと画像はそれぞれのファイルページにリンクされており、どちらかをクリックすると本来のサイズの画像を見ることができます。
あわせてサイズを指定することで任意の大きさに縮小可能です。サイズ指定がない場合、横幅が220px以下の画像はそのままの大きさで表示されますが、220pxよりも大きい画像は220pxに縮小されます。サイズ指定がないときの横幅の数値は、ログイン利用者ならば個人設定 - 「表示」 - 「ファイル」 - 「サムネイルの大きさ」の設定で変更することができます(既定値は220px)。
逆に画像のもとのサイズ以上に拡大表示することはできません。拡大表示したい場合は thumb
を外してください。
縦長の画像で周りの画像に比べて大きすぎてしまう時には、upright
オプションを追加することで改善されるかもしれません。
[[ファイル:Tokyotower.jpg|thumb|upright|東京タワーと増上寺本堂]]
キャプションにはリンクを入れることもできます。この際は、開き括弧と閉じ括弧の数が一致するように注意してください。
[[ファイル:Tokyotower.jpg|thumb|left|100px|[[東京タワー]]と[[増上寺]]本堂]]
[[ファイル:Tokyotower.jpg|thumb|left|[[東京タワー|Tokyo Tower]]]]
キャプション中のリンクには、パイプ(|)を使ってリンク先の記事と表示される文字を変えることもできます。
複数のサムネイル形式の画像を右側に縦1列で並べたいときは、下記のように並べるだけでOKです。
[[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]] [[ファイル:Tokyotower.jpg|thumb|東京タワーと増上寺本堂]]
代替画像の指定
thumb=代替画像名
とすると、「拡大」アイコンからリンクされる画像をサムネイル表示の画像と別のファイルにできます。別のファイルにできるのは拡大アイコンからのリンクのみで、サムネイル画像のクリックには対応していません(次の例では東大寺が出ます)。
[[ファイル:Tokyotower.jpg|thumb=Toudaiji daibutsuden 1.jpg|サムネイルは東大寺大仏殿、拡大先は東京タワー]]
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|日本の国旗]]
frameless
表示形式を指定していない状態とよく似ていますが、個人設定での設定にあわせたサイズに自動的に縮小して表示します(既定値および非ログイン状態では 幅220px)。
[[ファイル:Tokyotower.jpg|frameless|東京タワーと増上寺本堂]]
画像リンク
通常は画像からはファイルページにリンクされますが、link=
を使うことで別のページをリンク先にしたり、リンクをさせないようにすることができます。
重要な注意
ファイルページを利用してアップロードされたファイルのライセンス(著作権)を表示しているため、画像などのファイルからファイルページへのリンクは非常に重要です。使用している画像が著作権の帰属表示を必要としていない場合(パブリックドメインなど)を除き、この機能を使用しないでください。著作権の帰属表示義務のある画像の場合、画像からファイルページへリンクしていないと著作権侵害になります。
[[ファイル:Alchemy fire symbol.svg|link=三角形]]
外部リンクやウィキ間リンクを指定することもできます。リンク先を空にするとどこにもリンクしません。
- リンクなし
[[ファイル:Alchemy fire symbol.svg|link=]]
- 言語間リンク
[[ファイル:Alchemy fire symbol.svg|link=en:Triangle]]
- 外部リンク
[[ファイル:Alchemy fire symbol.svg|link=http://wikipedia.org/]]
なお、thumb
および frame
とは併用できません。
回り込みの解除
画像を複数使用したいときに、例えば
[[ファイル: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|あくびをするネコ]] ここではネコのあくびについて書いてみます。
ここにこの犬の紹介文を書きます。
ここではネコのあくびについて書いてみます。
この テンプレート:tl テンプレートと同種の機能を持ったテンプレートとして、テンプレート:tl(似ているが技術的に異なる)、テンプレート:tl(左側のカラムが終わるまで待つ)、テンプレート:tl(右側のカラムが終わるまで待つ)があります。
SVGファイルの表示について
現在のところ、SVGファイルはそのままブラウザで表示させずにサーバ上で指定サイズのPNGファイルを自動生成して、それを使って表示をする方法がとられています。このPNGファイルの生成に失敗することが、しばしば起きています。PNGファイルはサイズ毎に生成されるので、指定する数値を変えればうまく表示されることもあります。しかし、どうしても特定のサイズで表示させたい場合は以下の方法を試してください。
- まず、ファイルページを開きます。空白(透明)画像が占めている部分をクリックして表示されるファイルページから、リンクを使ってたどりつくことが可能です。もちろん、直接行っても構いません。
- ブラウザのURLアドレス欄で、ファイルページのアドレスの後につづけて
?action=purge
を付け足し、エンターキー(リターンキー)を押します。 - 日本語版に戻って、表示させたい記事をリロードします。これでも表示されなければ、2.を繰り返します。通常は1回、多くても2回で成功するようです。
ギャラリー
ギャラリー・タグはサムネイル画像を並べて表示させる手軽な方法です。全ての画像が同一の幅で表示されます。
<gallery> ファイル:Fuji mt s.jpg ファイル:Kinkaku.jpg|キャプションをいれられます。 ファイル:Catyawn.jpg|キャプション中で[[ネコ|リンク]]もできます。 セルにテキストを入れることもできます。|テキスト </gallery>
キャプション中でリンクもできます。
- セルにテキストを入れることもできます。
テキスト
各エントリ(セル)の書き方は ファイル:ファイル名
または ファイル:ファイル名|リンクも付加可能なキャプション
となります。各画像の先頭と末尾に大括弧([[
と]]
)が不要であることに注意してください。キャプションをつけるかどうかは自由です。個々の画像サイズを指定してもキャプションとみなされ、表示サイズを変えることはできません。
このタグでは、XHTMLソース中に、表全体にclass="gallery"
を、各セルに class="gallerybox"
を指定した表が生成されています。画像用のセルには画像などのファイルだけでなく、テキストを入れることもできます。キャプション部分はキャプションの長さに応じて高さが自動的に調整されます。キャプションが長い場合は、文を折り返して表示するので、枠が縦長になります(ブラウザによっては、横幅を広げるものもあるようです)。各行の高さは行中の最大高さを持つ画像およびキャプションの高さに合せたものとなります。
オプション
ギャラリー・タグにはオプションがあります。ここではいくつか例を挙げます。
caption="タイトル"
- ギャラリーのタイトル(表のキャプション)を指定します。
perrow="整数"
- 各行のセル数を指定します。既定値は4です。
widths="数値"
とheights="数値"
- 各セルに配置する画像の幅および高さを指定します。既定値は各120ピクセルです。
mode="表示モード"
- 表示モードを指定することでより見やすいギャラリーを作成できます。
packed
やpacked-hover
を指定すれば、サムネイルの枠線がなく、サイズの異なる画像も綺麗に並ぶギャラリーを作成できます。
<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>
<gallery caption="おさかな" mode="packed-hover" height="180"> 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>
カテゴリ機能によるCategory:から始まるページでは、そのカテゴリに関連づけられているファイルが自動的にギャラリー形式で表示されます。キャプション部分にはファイル名の最初の20文字分(1バイト文字換算)が示され、表示しきれない場合には省略符号が末尾につきます。またファイル本体だけでなく、ファイル名部分もファイルページにリンクしています。代替テキストや、他のリンクをつけることはできません。ファイルサイズも示されます。
表中の画像表示
表のマークアップを使い、各セルに画像を埋め込むことで、サイズやレイアウト、キャプションなどをより細かく設定したギャラリーを作ることができます。
画像表の例:
{| 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|]] |}
この方法では、各画像の幅はサイズオプションで指定されており、高さはキャプションの有無およびその長さによって決定しています。セルの幅は画像の幅に依存しており、行の高さは最大高の画像に依存しています。
ギャラリー用テンプレート
ギャラリーを表示するためのテンプレートテンプレート:tlも用意しています。このテンプレートを使用すれば、さらに見やすいギャラリーを作成できるかもしれません。詳細はテンプレートの解説ページをご覧ください。
クリッカブル画像
ウィキテキストでは<area>
のXHTMLタグは使えませんが、下のようないくつかの方法で類似の結果を得ることができます。
- ImageMap (MW 1.9+) を使えば、画像中の領域を指定してウィキページへリンクさせることができます。
- やや強引な方法ですが画像をあらかじめ矩形に分割、または画像を合成し、画像リンクを使用することができます。
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>