Recent Changes - Search:

Main

AdaWikiRing

Skin

RSS Feeds

SourceForge.net Logo


Edit Sidebar

Wikiページ内の画像

Wikiページ内の画像

画像をページ内に置くには、画像のアドレス(URL)をmarkupテキストに入力します。任意のALTテキスト(これはツールチップや画像を表示できないブラウザに使われます)をその画像URLの直後にダブルクオートを使っておくことができます。

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) Paper clips are fun to work with.

画像はまたアップロード?されたファイルを指定することができます。例えば、Attach:image.jpgという形式やInterMapリンクを使います。ファイル名が.gif, .jpg, .jpeg, .pngで終わる任意のファイルは、自動的に画像として扱われます。 (下記のNotes【拡張子が無い画像ファイル】も参考に)

画像へのリンクを作るには(http://www.pmichaud.com/img/misc/pc.jpg(approve sites) のように画像自体を表示するのとは対照に)、 二重大括弧を使います。例えば、[[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'''

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | 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. 

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | 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. 

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) 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.

%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.

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | 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!

http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | Paper clips are fun to work with

http://www.pmichaud.com/img/misc/gem.jpg(approve sites) | 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

http://www.pmichaud.com/img/misc/bubble.jpg(approve sites) http://www.pmichaud.com/img/misc/bubble.jpg(approve sites) http://www.pmichaud.com/img/misc/bubble.jpg(approve sites)

画像のリサイズは、ブラウザでどのように表示されるか、にのみ影響します。よって、画像自身の転送量は減りません。

%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-]]]

http://www.pmichaud.com/img/misc/bubble.jpg(approve sites)(approve sites) | Bubble http://www.pmichaud.com/img/misc/pc.jpg(approve sites) | Paper Clips http://www.pmichaud.com/img/misc/gem.jpg(approve sites)? | Rock On?

Notes

  • 拡張子が無い画像ファイル は、偽の拡張子をURLに追加することで表示させることができます。例えば、もしURLがhttp://www.example.com/script/tuxならば、偽のQueryStringを意図する拡張子で末尾に追加します。(例、 http://www.example.com/script/tux?format=.png)。

See also

Credits

このページの画像は、 http://www.flickr.com(approve sites) から得ており、Creative Commons Licenseの下で再配布されます。

<< | DocumentationIndex | >>

Edit - History - Print - Recent Changes - Search
Page last modified on November 30, 2005, at 01:44 AM