#author("2022-05-29T18:57:19+09:00;2022-05-28T02:14:20+09:00","default:kanateko","kanateko")
#author("2022-07-06T04:29:04+09:00;2022-05-28T02:14:20+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);

CENTER:#ref(fig.jpg,center,nolink,wrap,400x0)

#contentsx

*キャプション付きの画像を表示するプラグイン [#wa90ab5b]
#infobox(plugin){{
name=fig
pukiwiki=1.5.3
ver=1.4
update=2022-05-20
}}

refプラグインにキャプションを付ける機能を追加したようなプラグイン。ただし、ブロック型の場合はfigureタグを使用しているため、若干使い道が異なる。

figure要素は自己完結型のコンテンツであるべきなので、主に無くても文脈の理解に影響しないような画像を表示するのに使用する。

インライン型の場合は (名前に反して) figureタグを使用しないため、どのような画像を表示しても問題ない。

参考:[[<figure>: キャプションが付けられる図要素 - HTML: HyperText Markup Language | MDN:https://developer.mozilla.org/ja/docs/Web/HTML/Element/figure]]

:このプラグインでできること|
--キャプション付きの画像を表示できる
---キャプション無しも可
---ブロック型のみPukiWiki記法を使用可能
--画像の表示位置を変更可能
--ダークテーマとライトテーマを切替可能
--キャプションの表示方法が2種類ある
--キャプションのアラインメントを変更可能
--画像をリンク化するかどうかを指定可能

*ダウンロード [#m7fa2634]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]

|~日付|~バージョン|~備考|h
|2022-05-20|1.4|#ul(定数エラーの修正 (PHP8対応),エラー表示の処理を変更)|
|2021-09-30|1.3|#ul(クラスを追加する機能を追加,キャプションでPukiWiki記法が使えない問題を修正)|
|~|1.2|#ul(フロートの有無を変更するオプションとプラグイン設定を追加)|
|2021-09-29|1.1|#ul(インライン型を追加)|
|~|1.0|#ul(初版作成)|

*セットアップ [#ie2730fa]
+GitHubから「fig.inc.php」と「fig.css」をダウンロードする
+「fig.inc.php」をpluginフォルダに追加する
+「fig.css」の内容をskinフォルダの「pukiwiki.css」に追加する


*プラグインの設定 [#qba2ac04]
:FIG_FORMAT_REGEXP|許可するmime-type (正規表現)
:FIG_DEFAULT_POSITION|デフォルトの表示位置
:FIG_DEFAULT_THEME|デフォルトのテーマ
:FIG_DEFAULT_WRAP|デフォルトの縁取りの有無
:FIG_DEFAULT_LINK|デフォルトの画像リンクの有無
:FIG_DEFAULT_FLOAT|デフォルトのフロートの有無
:FIG_CAPTION_STYLE|デフォルトのキャプションの表示形式

*使用方法 [#bc9d143e]
#fig(../gallery/cat2.jpg,300px,cap=デフォルトの表示例)
&marker(blue){ブロック型};
 #fig(ファイル名[,オプション])
&marker(blue){インライン型};
 &fig(ファイル名[,オプション])

第一引数は必ずファイル名であること。他のページに添付されているファイルも指定可能。
基本的な使い方はrefプラグインとほぼ同じだが、オプションの順番は特に決まっていない。

#clear

**インライン型について [#o220a9a1]
&fig(../gallery/cat1.jpg,cap=表示例,200px);
インライン型の場合、いくつかオプションに制限がつく。
:&marker(yellow){使用できるオプション};|
--キャプションの表示 (cap=xxx)
---キャプションの表示位置はoverlay-leftで固定
---PukiWiki記法は使用不可
--クラスの追加 (class=xxx)
--画像のサイズ指定 (幅x高さ、%指定、px指定、width=、height=)
--リンクの有無 (nolink)
--title・alt属性の変更 (他のオプションに当てはまらない文字列)

:&marker(yellow){その他の制限};|
--縁取りは無し
--引数での表示位置変更は不可
---"CENTER:"などを使えば表示位置は変えられる


**オプション [#zd33297c]
太字ではない部分 (主に"hoge="の部分) は省略可能。

#ac(all)
***キャプションを表示する [#x05f4a19]
#ac(h){{{
&fa(color=tomato){check-square}; ''cap=xxx''

画像にキャプションを追加する。表示位置や表示方法は他のオプションで変更可能。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,cap=ねこ)
#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,cap=ねこ)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***キャプションの表示方法を変更する [#lc4d6fb6]
#ac(h){{{
&fa(color=tomato){check-square}; style=''bottom-left | bottom-center | bottom-right | overlay-left | overlay-center | overlay-right''

デフォルトはbottom-center。bottomとoverlayがキャプションの表示方法 (表示位置) を表し、left、center、rightがアラインメントを表している。
キャプションを指定していない場合は特に意味がない。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,overlay-left,cap=ねこ)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,overlay-left,cap=ねこ)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***画像の表示位置を変更する [#bc7bf439]
#ac(h){{{
&fa(color=tomato){check-square}; position=''left | center | right''

デフォルトはright。leftとrightはフロート表示になる。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,left)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,left)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***フロートの有無を変更する [#sc82995c]
#ac(h){{{
&fa(color=tomato){check-square}; float=''float | nofloat''

デフォルトはfloat。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,left,nofloat)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,left,nofloat)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***テーマを変更する [#k072f7fa]
#ac(h){{{
&fa(color=tomato){check-square}; theme=''dark | light''

デフォルトはdark。nowrapオプションと併用した場合は無視される。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,light,cap=ねこ)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,light,cap=ねこ)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***縁取りの有無を変更する [#v497465d]
#ac(h){{{
&fa(color=tomato){check-square}; wrap=''wrap | nowrap''

デフォルトはwrap。nowrapを指定している場合、キャプションの表示位置がbottomだとテーマの設定に関わらず文字色が他の文章と同じになる。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,nowrap,cap=ねこ)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,nowrap,cap=ねこ)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***画像リンクの有無を変更する [#zd5782ed]
#ac(h){{{
&fa(color=tomato){check-square}; link=''link| nolink''

デフォルトはlink。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,nolink)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,nolink)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***クラスを追加する [#zbdcd7be]
#ac(h){{{
&fa(color=tomato){check-square}; ''class=xxx''

任意のクラスを最も外側にある要素 (ブロック型ならfigure、インライン型ならspan) に追加する。
複数のクラスを追加する場合は半角スペースで区切る。

使用例は割愛。

}}}

***サイズを変更する (幅x高さ) [#nb4ce057]
#ac(h){{{
&fa(color=tomato){check-square}; ''<数値>x<数値>''

サイズ変更方法その1。
小文字のエックスを挟んで整数を入力することで、画像の幅と高さを同時に指定できる。
片方を0にすると、もう片方の数値を参照して適切な数値を自動で算出する。両方0の場合は原寸表示。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,200x0)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,200x0)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***サイズを変更する (%指定) [#ac5f3fe5]
#ac(h){{{
&fa(color=tomato){check-square}; ''<数値>%''

サイズ変更方法その2。
幅と高さを同じ倍率で縮小・拡大する。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,10%)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,10%)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***サイズを変更する (px指定) [#od236011]
#ac(h){{{
&fa(color=tomato){check-square}; ''<数値>px''

サイズ変更方法その3。
横幅をpx単位で指定し、高さを自動で算出する。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,150px)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,150px)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***サイズを変更する (個別指定) [#z596f6ba]
#ac(h){{{
&fa(color=tomato){check-square}; ''width=xxx | height=xxx''

サイズ変更方法その4。
幅と高さをそれぞれ個別に指定する。単位は不要 (px換算) 。

※当サイトではimgにheight:autoを設定しているため、個別に指定してもheightの値が無視される。デフォルトのPukiWikiならアスペクト比を無視して設定できる。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,width=80)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,width=80)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

***title属性とalt属性の内容を変更する [#pb37b4d8]
#ac(h){{{
デフォルトではファイル名が自動的に設定されている。
他のオプションに当てはまらない文字列は全てtitleとaltの変更になる。
文字列の中に "=" (イコール) が入っている場合や他のオプションと同じ文字列を使いたい場合は、文頭に "~" (チルダ) を入れると使えるようになる。

&marker(yellow){使用例};
 #fig(../gallery/cat1.jpg,120px,ねこのイメージ)

#style(border:1px solid gray;width:300px;padding:10px){{
#fig(../gallery/cat1.jpg,120px,ねこのイメージ)
吾輩は猫である。名前はまだない。
#clear
}}

}}}

#ac(end)

**追加したい機能 [#x01ccc52]
-%%フロートの有無の変更%%v1.2で追加
-attachrefみたいな機能

*備考 [#xcba3d7e]
**開発経緯 [#x35098b3]
#fig(before_after.jpg,300px,light,cap=ビフォーアフター)
Wikiを編集する際、個人的にはよくページ右側に画像をフロート表示させるのだが、画像にキャプションを付けようと思うと結構記述が面倒だった。refプラグインに機能を追加しようかとも思ったが、用途的に新しく作ったほうがしっくり来ると思ったので、figureタグを用いてこのプラグインを作成することに。

結果として大分楽にキャプション付き画像を表示できるようになった。

#clear

*コメント [#d0888ec3]
#pcomment(,10,above,reply)
#pcomment(reply)