• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 自作プラグイン/fig へ行く。
  • 1 (2021-09-30 (木) 00:12:50)
  • 2 (2021-09-30 (木) 01:12:34)
  • 3 (2021-09-30 (木) 07:34:30)
  • 4 (2021-09-30 (木) 07:34:30)
  • 5 (2021-09-30 (木) 07:34:30)
  • 6 (2021-09-30 (木) 07:34:30)
  • 7 (2022-05-28 (土) 02:14:20)
  • 8 (2022-05-28 (土) 02:14:20)

キャプション付きの画像を表示するプラグイン

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

figure要素は自己完結型のコンテンツであるべきなので、主に記事内容を補足・補強するための画像を表示するのに使用する。要するに、無くても文脈に影響しないような画像が主な対象となる。

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

参考：<figure>: キャプションが付けられる図要素 - HTML: ハイパーテキストマークアップ言語 | MDN

このプラグインでできること

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

ダウンロード

最新: GitHub

インストール

1. GitHubから「fig.inc.php」と「fig.css」をダウンロードする
2. 「fig.inc.php」をpluginフォルダに追加する
3. 「fig.css」の内容をskinフォルダの「pukiwiki.css」に追加する

プラグインの設定

FIG_FORMAT_REGEXP

許可するmime-type (正規表現)

FIG_DEFAULT_POSITION

デフォルトの表示位置

FIG_DEFAULT_THEME

デフォルトのテーマ

FIG_DEFAULT_WRAP

デフォルトの縁取りの有無

FIG_DEFAULT_LINK

デフォルトの画像リンクの有無

FIG_CAPTION_STYLE

デフォルトのキャプションの表示形式

使用方法

ブロック型

#fig(ファイル名[,オプション])

インライン型

&fig(ファイル名[,オプション])

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

インライン型について

インライン型の場合、いくつかオプションに制限がつく。

使用できるオプション

• キャプションの表示 (cap=xxx)
  • キャプションの表示位置はoverlay-leftで固定
  • PukiWiki記法は使用不可
• 画像のサイズ指定 (幅x高さ、%指定、px指定、width=、height=)
• リンクの有無 (nolink)
• title・alt属性の変更 (他のオプションに当てはまらない文字列)

その他の制限

• 縁取りは無し
• 引数での表示位置変更は不可
  • "CENTER:"などを使えば表示位置は変えられる

オプション

太字ではない部分 (主に"hoge="の部分) は省略可能。

キャプションを表示する

cap=xxx

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

使用例

#fig(../gallery/cat1.jpg,120px,cap=ねこ)

吾輩は猫である。名前はまだない。

キャプションの表示方法を変更する

style=bottom-left | bottom-center | bottom-right | overlay-left | overlay-center | overlay-right

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

使用例

#fig(../gallery/cat1.jpg,120px,overlay-left,cap=ねこ)

吾輩は猫である。名前はまだない。

画像の表示位置を変更する

position=left | center | right

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

使用例

#fig(../gallery/cat1.jpg,120px,left)

吾輩は猫である。名前はまだない。

テーマを変更する

theme=dark | light

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

使用例

#fig(../gallery/cat1.jpg,120px,light,cap=ねこ)

吾輩は猫である。名前はまだない。

縁取りの有無を変更する

wrap=wrap | nowrap

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

使用例

#fig(../gallery/cat1.jpg,120px,nowrap,cap=ねこ)

吾輩は猫である。名前はまだない。

画像リンクの有無を変更する

link=link| nolink

デフォルトはlink。

使用例

#fig(../gallery/cat1.jpg,120px,nolink)

吾輩は猫である。名前はまだない。

サイズを変更する (幅x高さ)

<数値>x<数値>

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

使用例

#fig(../gallery/cat1.jpg,200x0)

吾輩は猫である。名前はまだない。

サイズを変更する (%指定)

<数値>%

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

使用例

#fig(../gallery/cat1.jpg,10%)

吾輩は猫である。名前はまだない。

サイズを変更する (px指定)

<数値>px

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

使用例

#fig(../gallery/cat1.jpg,150px)

吾輩は猫である。名前はまだない。

サイズを変更する (個別指定)

width=xxx | height=xxx

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

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

使用例

#fig(../gallery/cat1.jpg,width=80)

吾輩は猫である。名前はまだない。

title属性とalt属性の内容を変更する

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

使用例

#fig(../gallery/cat1.jpg,120px,ねこのイメージ)

吾輩は猫である。名前はまだない。

追加したい機能

• フロートの有無の変更

備考

開発経緯

Wikiを編集する際、個人的にはよくページ右側に画像をフロート表示させるのだが、画像にキャプションを付けようと思うと結構記述が面倒だった。refプラグインに機能を追加しようかとも思ったが、用途的に新しく作ったほうがしっくり来ると思ったので、figureタグを用いてこのプラグインを作成することに。

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

キャプション

// before
#style(class=table_float_right table_compact){{
|CENTER:300|c
|&ref(../gallery/cat1.jpg);&br;キャプション|
}}

// after
#fig(../gallery/cat1.jpg,300px,cap=キャプション)

コメント