show 画像表示

画像を表示します。

もくじ

使い方（インライン） 

&show(*画像ファイル名*,*オプション*,画像の説明);

使い方（ブロック） 

#show(*画像ファイル名*,*オプション*,画像の説明)

オプション

インラインとブロックで使えるオプションが異なります。（* は全ての場合に利用可能です）

オプション種類説明
aroundlブロック画像を左に回り込み表示します
aroundrブロック画像を右に回り込み表示します
normal*画像に直リンクを張ります
colorbox*クリックでポップアップ表示します
linkurl=**リンク先を指定します
label=**画像の表示を置き換えます
画像ファイル名を指定するとその画像が表示されます
change*マウスオーバーで画像を切り替えます
*x* 例）120x120*【非推奨※】 画像サイズを指定します
*% 例）50%*【非推奨※】 画像サイズをパーセンテージで指定します
circle*画像を丸くします
round*画像を角丸にします
thumbnail
pola		*画像を枠付にします


画像をいろいろな形で表示（丸くする、角丸にする、枠付きで表示する）

丸く表示

// circle オプションを付けます
&show(画像ファイル,circle);

※きれいな円にしたい場合は、縦、横同じサイズの画像を指定します。

slide1.jpeg

角丸で表示

// round オプションを付けます
&show(画像ファイル,round);

slide2.jpeg

枠付きで表示

// round オプションを付けます
&show(画像ファイル,thumbnail);

slide3.jpeg

circle + thumbnail を組み合わる

// circle + thumbnail オプション
&show(画像ファイル,circle,thumbnail);

slide3.jpeg


画像リンク

指定したページや、URLにリンクできます。

&show(画像ファイル,linkurl=URL or ページ);

サンプル

slide3.jpeg
※クリックすると、トップページへ移動します。


ポップアップグループ

colorbox でポップアップ表示をさせられますが、 colorbox=group のように書くとポップアップグループを作ることができます。同じグループの画像は左右の切り替えボタンで連続表示をさせられます。

&show(画像ファイル1,colorbox=group,1の説明);
&show(画像ファイル2,colorbox=group,2の説明);
グループは複数設定可能です。

&show(画像ファイル1,colorbox=groupA,A-1の説明);
&show(画像ファイル2,colorbox=groupA,A-2の説明);

&show(画像ファイル3,colorbox=groupB,B-3の説明);
&show(画像ファイル4,colorbox=groupB,B-4の説明);

サンプル

slide1.jpeg

slide2.jpeg

slide3.jpeg


マウスオーバーの画像切替について

切り替える画像は 元のファイル名_onmouse.拡張子 のような名前でアップロードしておきます。

//photo_onmouse.jpg を事前にアップロードしておく
&show(photo.jpg,change,画像の説明);

画像のサイズ指定について

*x* による画像のサイズ指定は haik テーマでは避けてください。計算されたピクセル値が指定されるため、閲覧環境によっては意図した表示にならない場合があります。
QHM v5.2より、% での縮小指定については縦横比を維持するようになっています。

画像を小さくしたい場合は % 指定を利用する、あるいは縮小ツール等で画像自体を小さくするか、 #cols で横幅を指定してください。

//PCでは画面の半分程度の幅にする
#cols(6){{
#show(画像ファイル名,,画像の説明)
}}

回り込みについて

画像を回り込ませる場合は、#clear で回り込みの解除を行なってください。

#show(画像ファイル名,aroundr,説明)
...回りこませる文章...
#clear

サンプル

slide1.jpeg

ここに回り込ませる文章を指定します。回り込みは、モバイルで見づらくなる可能性もありますので、あまりお勧めできません。