Wikiページ内の画像
Wikiページ内の画像
画像をページ内に置くには、画像のアドレス(URL)をmarkupテキストに入力します。任意のALTテキスト(これはツールチップや画像を表示できないブラウザに使われます)をその画像URLの直後にダブルクオートを使っておくことができます。
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" Paper clips are fun to work with. |
 Paper clips are fun to work with. |
画像はまたアップロードされたファイルを指定することができます。例えば、Attach:image.jpgという形式やInterMapリンクを使います。ファイル名が.gif, .jpg, .jpeg, .pngで終わる任意のファイルは、自動的に画像として扱われます。 (下記のNotes【拡張子が無い画像ファイル】も参考に)
画像へのリンクを作るには(http://www.pmichaud.com/img/misc/pc.jpg のように画像自体を表示するのとは対照に)、
二重大括弧を使います。例えば、[[http://www.pmichaud.com/img/misc/pc.jpg]] や [[Attach:image.jpg]] という風になります。
別の場所への画像リンクを作るには、次のように画像をリンク文字列のように使います⇒[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]]。
見出しとfloating images
画像に見出しを付けるには、vertical brace(|)と見出しテキストを使います。
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1''' |
Figure 1 |
通常、画像は周辺のテキストに"in line"で表示されます。左寄せや右寄せで画像をテキストと表示するには、%lfloat% や %rfloat%のWikiStylesを使用します。
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!''' The image is left-aligned, and the text wraps on the right side of the image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
 Rock on! The image is left-aligned, and the text wraps on the right side of the image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
[[<<]]の記法により、floating text は終了し、その画像の下からテキストが続けられます。
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg The image is left-aligned, and the text wraps on the right side of the image. The text after the ''[@[[<<]]@]'' markup continues below the image. [[<<]] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
The image is left-aligned, and the text wraps on the right side of the image. The text after the |
%lframe% や %rframe%のスタイルを使うと、画像をfloatさせ、画像や見出しにフレームをつけます。
%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!''' The image is right-aligned, and the text wraps on the left side of the image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Rock on! The image is right-aligned, and the text wraps on the left side of the image. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
%center%で画像を中央寄せにします。%right%で右寄せにします。このときはfloatしません。
%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips are fun to work with %right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on! |
Paper clips are fun to work with Rock on! |
画像のリサイズ
画像をリサイズするには、%width=50px% や %height=50px% を画像の前に使います。%thumb%というwikistyleは%width=100px%に対する便利な省略形です。
%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %thumb% http://www.pmichaud.com/img/misc/bubble.jpg |
 |
画像のリサイズは、ブラウザでどのように表示されるか、にのみ影響します。よって、画像自身の転送量は減りません。
%thumb% を使ってリサイズされた画像もまたフレームでfloatさせることができます。同様にリンクにすることもできます。
%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-] %lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-] %lframe thumb% [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]] |
Bubble Paper Clips |
Notes
- 拡張子が無い画像ファイル は、偽の拡張子をURLに追加することで表示させることができます。例えば、もしURLが
http://www.example.com/script/tuxならば、偽のQueryStringを意図する拡張子で末尾に追加します。(例、http://www.example.com/script/tux?format=.png)。
See also
- Cookbook:BackgroundImages - 背景画像をdivisionやtablesやtableセルに追加する。
Credits
このページの画像は、 http://www.flickr.com から得ており、Creative Commons Licenseの下で再配布されます。
<< | DocumentationIndex | >>