Refプラグインの使い方

＃refと＆refの両方のプラグインを利用した画像操作に関する説明ページです。
標準プラグインマニュアルと整形ルールも参考にしてください。

オプション指定

&ref(
#ref
添付ファイル名|
ページ名/添付ファイル名|
URL
 [,ページ名]
 {,
 [left|center|right],　　※#refのみ 表示位置 デフォルト：left
 [wrap|nowrap],　　　　　※#refのみ 枠線有無 デフォルト：無
 [around],　　　　　　　 ※#refのみ 回り込み デフォルト：指定なし
 [noicon],
 [noimg],
 [nolink],
 [zoom],
 [999x999],
 [999%]
 }
 [,タイトル]
)

画像によるリンク

通常通り[ ] で括ればリンクとして機能します。＃refはブロック型なので下記のとおり機能しません。

[[#ref(40x40.jpg)>SandBox]]

#ref(40x40.jpg)

[[&ref(40x40.jpg);>SandBox]]

文字の回り込み：around指定と解除：＃clear

この機能は＃refだけが持つ機能で、＆refではこの機能を指定できません(疑似的に表現することは可能)

改行してもこの通りです。

なんてカンジで更に画像を入れ込むことが可能です(1行に複数のブロック処理を記述してないから正常に動作してる)

ここで以下のように段落を入れるとこんなカンジになります

中項目を設定しました：左端にちょこっと項目が見えますが文字は識別可能ですし、アンカーも機能します

中項目内に書かれた情報

ではさっそく次の行に＃clearを入れて回り込みを解除します。解除後にすぐ文字を入れています。

文字の回り込み解除(＃clear)を直前に行っています。この指定は即座に回り込みを解除し以後の情報は画像の下に配置されます。
これで回り込みの機能説明は以上です。(画像と画像でネストも可能ですが自分で検証してみてください)

基礎：配置パターン(仕様の理解)

最初に説明すると「上下隙間なく画像を敷き詰める方法はなさそう」です。(技量不足だけかも)
パラメータ指定で縮小することも可能ですが、画像が乱れますので原寸大で表示する際のピクセルの目安にしてください。

※#refを1行ずつ定義した場合：2行だと上下隙間ができる

#ref(40x40.jpg)
#ref(40x40.jpg)

※＃refを1行に連続して定義した場合：機能しない

#ref(40x40.jpg) #ref(40x40.jpg) #ref(40x40.jpg)

#ref(): File not found: "40x40.jpg) #ref(40x40.jpg) #ref(40x40.jpg" at page "ヘルプ/Ref"

※&refを1行に複数連続して設定した場合：2行だと上下隙間ができる

&ref(250x250.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);
&ref(250x250.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);&ref(50x50.jpg);

※&refを1行に複数連続して設定し＆br;による改行を使用した場合：やはり2行になると上下隙間ができる

&ref(40x40.jpg);&ref(40x40.jpg);&ref(40x40.jpg);&br;&ref(40x40.jpg);&ref(40x40.jpg);&ref(40x40.jpg);

※テーブルを用いた配置(#refは利用不可)
アイコンとその説明など画像を使った一覧にはテーブルがオススメ。下記例だと各セルが画像だが文字に差し替えればＯＫ

|&ref(40x40.jpg);|&ref(40x40.jpg);|&ref(40x40.jpg);|
|&ref(40x40.jpg);|&ref(40x40.jpg);|&ref(40x40.jpg);|
|&ref(40x40.jpg);|&ref(40x40.jpg);|&ref(40x40.jpg);|

※テーブルを用いた配置２(colspan、lowspanでも問題ない)

応用：配置パターン

仕様を利用してより綺麗に並べます。
これらの手法はアイテム系の画像付き一覧のソースを読むことで工夫のあれこれを知ることができます。
(あのページは慣れない内は理解できず魔法のように感じていました)
※透過色の指定ができないのでセル色と画像背景色とを合わせることが必要です。

※画像の背景を黒にする：分かりやすくセル背景を青に

※表のセルの背景を黒にする⇒まるで一つの画像のように見える

※大きさがまちまちな画像の場合の参考例：基準とするピクセルに合わせ調整する

}}