極意(51)サムネイル(thumbnail)画像とは?
サムネイル(thumbnail)とは、視認性を高めるために縮小させた見本のことを言い、親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ています。(引用)
Webの世界では、多数の画像を一覧表示するために、本来のサイズより大幅に縮小された小さな画像データを意味しています。
HAIKでは、画像表示プラグイン(&show)のオプションとして、以下のように使用します。
&show(a0777_000030_360.png,thumbnail,50%);
HAIKでの thumbnail は、画像の周りに枠を付ける機能となります。その枠を丸くする機能が circle です。
一般的に thumbnail に circle を併用して丸型のサムネイルを作成します。(以降)
サムネイルを円で表現
左のサムネイル画像は正円となっています。正円にするには、元の画像が正四角形になっている必要があります。
即ち、正円のサムネイルを作成するには、正四角形の画像を使用すること。
上記のおまじないです。
&show(a0777_000030_360.png,thumbnail,circle,90%);
サムネイルが楕円になるケース1
元の画像が横長だと左図のような横長の楕円になります。
上記のおまじないです。
&show(a0777_000030.jpg,thumbnail,circle,70%);
サムネイルが楕円になるケース2
元の画像が縦長だと左図のような縦長の楕円になります。
上記のおまじないです。
&show(a0002_004067.jpg,thumbnail,circle);
サムネイルからポップアップ画像を表示
上記のおまじないです。
CENTER:&show(a0002_004067.jpg,thumbnail,circle,colorbox,60%);
角丸とサムネイルの併用
オプションに角丸(round)と枠付き(thumbnail)を併用した例です。
あまり角丸(round)の効果は目立っていませんが・・・・・
上記のおまじないです。
&show(a0001_17441.jpg,round,thumbnail,60%);
thumbnail は pola で代用可能です。
上記のおまじないです。
&show(a0001_17441.jpg,pola,circle,80%);
解説
何故、オプション pola が thumbnail と同じ機能なのか?
マニュアルには、その解説はありませんが、単純に簡略形ぐらいの認識で良いような気がします。
上記の関連記事はお役に立ちましたか?
- 下記に投票して戴けると嬉しく思います。