プラグイン一覧/画像系プラグイン - アットウィキ(@WIKI)ご利用ガイド

---

画像表示1(image)

&image(画像URL または 画像ファイル名)

と入力することで、指定した画像を表示します。
また()内にカンマ "," 区切りで以下のパラメーターを指定することで動作を変更できます。

パラメーター	説明
width=数字 または x=数字	画像の幅を指定。 数字pxという指定も可能です。
height=数字 または y=数字	画像の高さを指定。 数字pxという指定も可能です。
left または center または right	画像の表示位置を指定。 left : 左寄せ、center : 中央寄せ、right : 右寄せ
page=ページ名	ファイル名で画像を貼り付けるとき、指定した別ページのアップロードファイルを利用します。 画像URLではなく、画像ファイル名を指定している場合に有効です。
linkpage=ページ名	画像をクリックした時のリンク先ページ名を指定。「linkpage=ページ名#アンカー名」のように指定することでアンカーへのリンクにすることもできます。 リンク先のURLを指定している場合、このパラメーターで指定したページが優先されます。
URL	画像をクリックした時のリンク先URLを指定。 画像をURLで指定している場合、二番目のURLが認識されます。
blank	リンク先を別ウインドウで開きます。 URL、またはlinkpageパラメーターを指定時に有効です。
title=文字列	カーソルを合わせたときにポップアップされる文字列を指定。
alt=文字列	画像の代わりに表示される文字列を指定。
inline	インライン要素として表示。 このパラメーターを記述するとleft、right、centerパラメーターは無効になります。
float	画像をfloat(回り込み)表示。 left, rightパラメーターのいずれかが指定されている場合に有効です。 floatの解除は、回り込み解除(clear)プラグインと併用してください。 詳しくはfloatの使用例をご確認ください。 このパラメーターは、inlineパラメーターとの併用はできません。

• インライン要素（&image）とブロック要素（#image）の両方を利用できます。⇒ ブロック要素とインライン要素の違いについて
  • このプラグインは経緯上 &image と記述した場合でも、ブロック要素を出力します。横並びに配置したい場合、inlineパラメーターをご利用ください。
• 画像ファイル名を指定する場合、プラグインを使用するページに（pageパラメーター利用時は指定ページに）表示したい画像を予めアップロードしておく必要があります。
• 画像URLを指定する場合、httpsからはじまるURLを指定する必要があります。⇒ よくある質問/httpsに関して
• 画像ファイル名は半角英数と"-"（ハイフン）"_"（アンダーバー）の記号のみ使用できます。
• 画像ファイル名で画像を指定した場合、スマートフォンなど画面幅が狭い端末ではファイルサイズが小さい画像を表示することがあります。
• スマートフォンでは、画面の横幅もしくは画面縦幅に応じて画像のサイズを自動調整します。
• 表示できる画像形式はよくある質問に記載しております。 表示できる画像ファイル形式について

プラグインの使用例

&image(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif)

&image(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,right)

&image(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,inline)&image(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,inline)

&image(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,float,left)画像が左寄せになり、後に続くテキストなどは右に回り込みます。
改行してもテキストは回り込んだままです。
#clear
clearプラグインの後ろのテキストは画像の下に表示されます。

画像が左寄せになり、後に続くテキストなどは右に回り込みます。
改行してもテキストは回り込んだままです。

clearプラグインの後ろのテキストは画像の下に表示されます。

更新履歴

• 20231130 linkpageパラメータで、アンカー付きのページ名を指定した場合にアンカーが機能しなくなっていた問題を修正
• 20221018 画像のwidth、height属性に0を出力してしまうことがある問題を修正
• 20210413 画像のwidth、heightが取得可能な場合、常にwidth,height属性を出力するようになりました。
• 20201216 ファイル名が「alt」から始まる画像を表示できない問題を修正しました。
• 20200824 スマートフォンでは画面の横幅もしくは縦幅に応じてサイズを自動調整するように修正
• 20190708 ファイル名が「x数字」または「y数字」から始まる画像を表示できない問題を修正。
• 20190314 width、heightパラメーターに対して0pxを指定した場合、プレビュー時のみエラーが表示されるようにチェックを追加。
• 20181220 画像の判定方法を拡張子から、content-typeの判定に変更しました。
• 20181107 linkpageパラメーターにおいて、指定ページが存在しない場合、未作成ページへのリンクになるよう修正。
• 20181107 pageパラメーターにおいて、指定ページが存在しない場合や閲覧権限がない場合、エラーメッセージを表示するように修正。
• 20181107 widthとheightパラメーターにおいて、0を指定した場合、1として読み替えて表示するように変更。
• 20181025 image2プラグインの動作を、imageプラグインと同様の動作になるよう変更しました。
• 20181023 画像を回り込みさせる、floatパラメーターを追加しました。
• 20181019 ガイドに記載のなかったx、yのパラメーターで横幅と高さの指定とwidth、heightパラメーターでpx指定を追記しました。
• 20181017 widthまたはheightパラメーターを指定した上で、centerまたはrightパラメーターを指定した場合、画像の表示位置が指定どおりにならない問題を修正しました。

---

画像表示2(ref)

&ref(画像のURL)

もしくは

&ref(アップロード画像ファイル名,画像がアップロードされているページ名)

と入力することで指定した画像を表示します。
また( )内にカンマ "," 区切りで3つ目以降に以下のパラメーターを指定することで動作を変更できます。

パラメーター	説明
width=数字 または x=数字	画像の幅を指定。 数字pxという指定も可能です。
height=数字 または y=数字	画像の高さを指定。 数字pxという指定も可能です。
left または center または right	画像の表示位置を指定。 left : 左寄せ、center : 中央寄せ、right : 右寄せ いずれかのパラメーターを指定している場合、必ずブロック要素として出力されます。
page=ページ名	ファイル名で画像を貼り付けるとき、指定した別ページのアップロードファイルを利用します。 画像URLではなく、画像ファイル名を指定している場合に有効です。 また、カンマ "," 区切りの2つ目でページを指定している場合においても、このパラメーターで指定したページが優先されます。
linkpage=ページ名	画像をクリックした時のリンク先ページ名を指定。「linkpage=ページ名#アンカー名」のように指定することでアンカーへのリンクにすることもできます。 リンク先のURLを指定している場合、このパラメーターで指定したページが優先されます。
URL	画像をクリックした時のリンク先URLを指定。 画像をURLで指定している場合、二番目のURLが認識されます。
blank	リンク先を別ウインドウで開きます。 URL、またはlinkpageパラメーターを指定時に有効です。
title=文字列	カーソルを合わせたときにポップアップされる文字列を指定。
alt=文字列	画像の代わりに表示される文字列を指定。
float	画像をfloat(回り込み)表示。 left, rightパラメーターのいずれかが指定されている場合に有効です。 floatの解除は、回り込み解除(clear)プラグインと併用してください。 詳しくはfloatの使用例をご確認ください。

• インライン要素（&ref）とブロック要素（#ref）の両方を利用できます。⇒ ブロック要素とインライン要素の違いについて
• 画像URLを指定する場合、httpsからはじまるURLを指定する必要があります。⇒ よくある質問/httpsに関して
• 画像ファイル名を指定する場合、指定ページに表示したい画像を予めアップロードしておく必要があります。
  • プラグインを記述したページにアップロードされた画像を表示する場合、ページ名の記述を省略することができます。
  • 省略した上で、さらにパラメーターを使用したい場合は2つ目のパラメーターを何も入力せず、カンマ "," を続けて記述してください。
• 画像ファイル名は半角英数と"-"（ハイフン）"_"（アンダーバー）の記号のみ使用できます。
• 画像ファイル名で画像を指定した場合、スマートフォンなど画面幅が狭い端末ではファイルサイズが小さい画像を表示することがあります。
• スマートフォンでは、画面の横幅もしくは画面縦幅に応じて画像のサイズを自動調整します。
• 画像以外のアップロードファイル名を指定した場合、ファイル名とリンクが表示されます。
• 表示できる画像ファイル形式について

プラグインの使用例

&ref(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif)

&ref(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,,center)

&ref(https://img.atwikiimg.com/www1.atwiki.jp/guide/attach/935/1040/header_logo.gif,,float,left)画像が左寄せになり、後に続くテキストなどは右に回り込みます。
改行してもテキストは回り込んだままです。
#clear
clearプラグインの後ろのテキストは画像の下に表示されます。

画像が左寄せになり、後に続くテキストなどは右に回り込みます。
改行してもテキストは回り込んだままです。

clearプラグインの後ろのテキストは画像の下に表示されます。

更新履歴

• 20231130 linkpageパラメータで、アンカー付きのページ名を指定した場合にアンカーが機能しなくなっていた問題を修正
• 20221018 画像のwidth、height属性に0を出力してしまうことがある問題を修正
• 20210413 画像のwidth、heightが取得可能な場合、常にwidth,height属性を出力するようになりました。
• 20201216 ファイル名が「alt」から始まる画像を表示できない問題を修正しました。
• 20200824 スマートフォンでは画面の横幅もしくは縦幅に応じてサイズを自動調整するように修正
• 20191218 画像ファイル名ではなく画像URLを指定時、カンマ区切りで2つ目のパラメーターを必ずページ名として認識するように動作が変わっていた問題を修正しました。
• 20190708 ファイル名が「x数字」または「y数字」から始まる画像を表示できない問題を修正しました。
• 20190314 width、heightパラメーターに対して0pxを指定した場合、プレビュー時のみエラーが表示されるようにチェックを追加しました。
• 20190110 midiファイルをファイル名として指定できなくなりました。
• 20181221 画像の判定方法を拡張子から、content-typeの判定に変更しました。
• 20181108 linkpageパラメーターにおいて、指定ページが存在しない場合、未作成ページへのリンクになるよう修正。
• 20181108 widthとheightパラメーターにおいて、0を指定した場合、1として読み替えて表示するように変更。
• 20181019 ガイドに記載のなかったx、yのパラメーターで横幅と高さの指定とwidth、heightパラメーターでpx指定を追記しました。
• 20181018 画像を回り込みさせる、floatパラメーターを追加しました。
• 20181017 widthまたはheightパラメーターを指定した上で、centerまたはrightパラメーターを指定した場合、画像の表示位置が指定どおりにならない問題を修正しました。
• 20180702 ファイル名とページ名指定で画像を表示させる、pageパラメーターを追加しました。

---

アップロード画像の別ウィンドウ表示(blankimg)

&blankimg(画像ファイル名 または 画像URL)

と記述することで、アップロードした画像ファイルを別ウィンドウで表示させることができます。
また( )内にカンマ "," 区切りで以下のパラメーターを指定することで動作を変更できます。

パラメーター	説明
width=数字	画像の幅を指定。 数字pxという指定も可能です。 デフォルトは128pxになります。
height=数字	画像の高さを指定。 数字pxという指定も可能です。 デフォルトは128pxになります。
page=ページ名	ファイル名で画像を貼り付けるとき、指定した別ページのアップロードファイルを利用します。 URLではなく、ファイル名で画像を指定する必要があります。

• インライン要素（&blankimg）とブロック要素（#blankimg）の両方を利用できます。⇒ ブロック要素とインライン要素の違いについて
• 画像URLを指定する場合、httpsからはじまるURLを指定する必要があります。⇒ よくある質問/httpsに関して
• 画像ファイル名を指定する場合、プラグインを使用するページに（pageパラメーター利用時は指定ページに）表示したい画像を予めアップロードしておく必要があります。
• 画像ファイル名は半角英数と"-"（ハイフン）"_"（アンダーバー）の記号のみ使用できます。
• 画像ファイル名で画像を指定した場合、スマートフォンなど画面幅が狭い端末ではファイルサイズが小さい画像を表示することがあります。
• 表示できる画像ファイル形式について

プラグインの使用例

&blankimg(海1.jpg,width=102,height=76)

更新履歴

• 20221018 画像のwidth、height属性に0を出力してしまうことがある問題を修正
• 20210413 画像のwidth、heightが取得可能な場合、常にwidth,height属性を出力するようになりました。
• 20200824 スマートフォンでは画面の横幅もしくは縦幅に応じてサイズを自動調整するように修正
• 20190708 ファイル名が「x数字」または「y数字」から始まる画像を表示できない問題を修正しました。
• 20181221 画像の判定方法を拡張子から、content-typeの判定に変更しました。
• 20181119 widthとheightパラメーターにおいて、0を指定した場合、1として読み替えて表示するように変更しました。
• 20181119 width、heightパラメーターで%指定を終了しました。
• 20181116 ガイドに記載のなかったインライン要素（&blankimg）とブロック要素（#blankimg）について、追記しました。
• 20181115 画像ファイル名を指定時、拡張子のチェックをするよう修正しました。
• 20181019 ガイドに記載のなかったwidth、heightパラメーターでpx、%指定を追記しました。

---

ランダム画像表示(random_img)

&random_img(画像ファイル名,画像ファイル名,画像ファイル名,…)

と記述することで、ランダムに画像を表示させることができます。

※表示させる画像は、プラグインを使用するページに予めアップロードしておく必要があります。
(「編集」＞「このページにファイルをアップロード」)

※画像ファイル名の代わりにURLの指定も可能です。

パラメーター	説明
page=ページ名	指定した別ページのアップロードファイルを利用します(URLではなく、ファイル名で画像を指定する必要があります)
width=数字	画像の幅を指定
height=数字	画像の高さを指定

使用例)

&random_img(海1.jpg,ペンギン2.jpg,ラスカル3.jpg,シマウマ4.jpg,アナグマ5.jpg)

※画像ファイル名は半角英数と"-"（ハイホン）"_"（アンダバー）の記号のみ使用できます。

更新履歴

• 20220719 画像の高さと幅を指定できるように、width、heightパラメーターを追加しました。

---

Lightbox JS 画像ポップアップ表示プラグイン(lightbox)

&lightbox(画像ファイルのURL)

と記述することで、Ligtbox JSを使った画像のポップアップ表示ができます。
wikiのページにアップロードした画像を使用する場合は、画像ファイル名を指定します。
,区切りで以下のパラメーターを指定することで動作を変更できます。

パラメーター	説明
画像URL または 画像ファイル名	ポップアップに表示する画像を指定します。(必須)
link=text または link=image	textを表示することで、titleで記述した文字を表示します。 imageを指定すると、URLまたはファイル名で指定した画像をサムネイル表示します。 (デフォルト:text)
title=文字列	指定した画像と同時にポップアップ表示される文字を指定します。 link=text 指定時、表示する文字列としても扱います。(デフォルト:Thumbnail)
percent=数値	link=image 指定時のみ有効。サムネイル画像の縮尺をパーセンテージで指定します。
width=数値	link=image 指定時のみ有効。サムネイル画像の横幅を指定します。
height=数値	link=image 指定時のみ有効。サムネイル画像の縦幅を指定します。
page=ページ名	指定した別ページのアップロードファイルを利用します(URLではなく、ファイル名で画像を指定する必要があります)

• lightboxプラグインの使用は1ページにつき1回までとなります。
• link=imageを指定時でかつ、percent, width, height をどれも指定しない場合、オリジナルサイズの画像を表示します。
• percent と同時に width または height を指定した場合、width と height の値は無効となります。

使用例）画像サムネイル表示で、クリックするとオリジナル画像をポップアップ表示

&lightbox(http://atwiki.jp/image/header_logo.gif,link=image,title=@wiki,percent=50)

と入力すると以下のように表示されます。
画像をクリックすると、ポップアップ表示します。

---

pixivイラスト表示(pixiv)

#pixiv(){埋め込みHTMLタグ}

と入力することで、pixivのイラストを表示します。

pixivは、イラストの投稿・閲覧を通じて、気軽にコミュニケーションできるWebサービスです。
埋込み用HTMLタグは、pixiv*のページで簡単に取得することができます。

使用例）※ 使用例表示の都合上一部改行をしておりますが、プラグイン使用の際には改行せずにHTMLタグを入力ください。

#pixiv{
<iframe style="background:transparent;" width="380" height="168"
frameborder="0" marginheight="0" marginwidth="0" scrolling="no"
src="http://embed.pixiv.net/code.php?id=
839174_4392b74b9211adbb7ea40c32b6b1f105"></iframe>
}

---

gyazo画像表示プラグイン(gyazo)

#gyazo(gyazoで作成したURL)

と入力することで、gyazoで作成した画像を表示します。

また、

#gyazo(gyazoで作成したURL){パラメーター}

と{ }内にカンマ「 , 」区切りでパラメーターを入力することで動作を変更できます。

パラメーター	説明
left	画像を左寄せ
center	画像を中央寄せ
right	画像を右寄せ
height=数字	画像の高さを指定
width=数字	画像の幅を指定
title=文字列	カーソルを合わせたときにポップアップされる文字列
alt=文字列	画像の代わりに表示される文字列
border=1~9の整数	画像の周囲を数字に応じた太さの線で囲う
linkpage=ページ名	画像を指定したページへのリンクとする
URL	画像を記述したURLへのリンクとする
blank	「(URL)」又は「linkpage=(ページ名)」とblankを指定すると別ウインドウで指定したリンクを開く

注意:

• 「left」「center」「right」を同時に使うことはできません。
• 「linkpage=」「(URL)」を同時に使うことはできません。
• このプラグインを使用した場合、他の画像プラグインとは異なりページの読み込み時に同時に画像も読み込みが行われます。

使用例）※ 使用例表示の都合上一部改行をしておりますが、プラグイン使用の際には改行せずに入力ください。

#gyazo(https://gyazo.com/f618f8a8f71cfd44008ba070b59b4cb3)
#gyazo(https://gyazo.com/f618f8a8f71cfd44008ba070b59b4cb3){}
#gyazo(https://gyazo.com/f618f8a8f71cfd44008ba070b59b4cb3)
{center,height=150,width=250,title=atwiki,alt=atwiki,border=4,https://atwiki.jp/,blank}

と入力するとそれぞれ以下のように表示されます。

複数画像スライド表示プラグイン(slide_img)

このプラグインは、複数の画像をスライド表示させるプラグインです。

#slide_img(自動スライドの速度設定,画像の横幅,画像の高さ,画像表示位置){外部の画像URL,またはアップロードした画像のファイル名,…}

と( )内にパラメーターを「 , 」区切りで入力し、
{ }内にカンマ「 , 」区切りで外部の画像URL、またはアップロードした画像のファイル名を入力することでスライド画像が表示されます。

注意： 画像の設定できる個数は、2個〜10個です。画像の下に設置されるナビボタンは設置画像個数に応じて設置され、ボタンのレイアウトは画像の幅によって変わります。

パラメーター	説明
auto=数値	自動スライドの時間設定[秒] 1〜9秒の間で設定が可能です。 省略した場合は自動スライドしません。
width=数値	画像の幅[px](必須) 290以上の値が設定可能です。
height=数値	画像の高さ[px](必須)
position=文字列	画像の表示位置 center(中央寄せ), left(左寄せ), right(右寄せ) 省略した場合はleft(左寄せ)となります。

AMP表示の場合：

• 画像スライド表示が、カルーセル表示に切り替わります。
• 画像の幅と高さがアスペクト比により表示が変わります。

使用例) 画像左寄せ

#slide_img(auto=3,width=300,height=200){海1.jpg,ペンギン2.jpg,ラスカル3.jpg,シマウマ4.jpg,アナグマ5.jpg}

使用例) 画像中央寄せ

#slide_img(width=300,height=200,position=center){海1.jpg,ペンギン2.jpg,ラスカル3.jpg,シマウマ4.jpg,アナグマ5.jpg}

使用例) 画像右寄せ

#slide_img(width=300,height=200,position=right){海1.jpg,ペンギン2.jpg,ラスカル3.jpg,シマウマ4.jpg,アナグマ5.jpg}

---

スライド画像表示(img_slide)

#img_slide()

と入力することで利用ページに添付された画像を過去にアップロードされた順にスライド表示します
また()内に他のページ名を入力することで他のページにアップロードされた画像を表示します