HAIK道場

画像の編集

画像にリンクを貼る。
画像をクリック
［「＆show(5050bdbe.png,,haik道場);>https://www.haik.biz/index.php］］
[[と＆は半角に。

画像の廻り込み。

アコーディオンにも使えるか検証してみました。
＃show(画像,aroundr,画像の説明)
メニュー１の画像は右aroundr（right）に配置されます
メニュー2の画像は左aroundl（left）に配置されます
画像の下に書いた文章が左(aroundr)又は右(aroundl)に廻り込みます。

↓　　　　　　　　　　　　　　↓　　　　　　　　　　　　　　　　↓

画像の ポップアップグループの作成

＆show(画像ファイル名,popup=groupグループ名,画像の説明);

　

• ポップアップグループ
  下記記載の方法で機能します。
  上記画像のサイズ変更は「%」で縮小していますが、下記の方がレスポンシブデザインに適応しています。
  ＃cols(4,4,4){{
  ＆show(画像ファイル1,popup=groupグループ名,1の説明);
  ====
  ＆show(画像ファイル1,popup=groupグループ名,1の説明);
  ====
  ＆show(画像ファイル1,popup=groupグループ名,1の説明);
  }}

---

画像のオプション

circle 画像を丸くします
pola 画像を枠付にします
round 画像を角丸にします

---

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

#cols(6){{
#show(画像ファイル名,,画像の説明)
}}

---

グループは複数設定可能です。

＆show(画像ファイル1,popup=groupグループ名,1の説明);
＆show(画像ファイル2,popup=groupグループ名,2の説明);

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

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

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

切り替える画像は 元のファイル名_onmouse.拡張子 のような名前でアップロードしておきます。
ファイル名は必ず同じファイル名にすること。
＆show(photo.jpg,change,画像の説明);

画像を表示します。

使い方（インライン）

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

使い方（ブロック）

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

オプション

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

• オプション 種類 説明
  aroundl ブロック 画像を左に回り込み表示します
  aroundr ブロック 画像を右に回り込み表示します
  normal * 画像に直リンクを張ります
  colorbox * クリックでポップアップ表示します
  linkurl=* * リンク先を指定します
  label=* * 画像の表示を置き換えます
  画像ファイル名を指定するとその画像が表示されます
  change * マウスオーバーで画像を切り替えます
  ＊x＊ 例）120x120 * 画像サイズを指定します
  ＊% 例）50% * 画像サイズをパーセンテージで指定します
  circle * 画像を丸くします
  round * 画像を角丸にします
  pola * 画像を枠付にします
• 回り込みについて
  画像を回り込ませる場合は、#clear で回り込みの解除を行なってください。

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

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

＊x＊ や *% での画像のサイズ指定は haik テーマでは避けてください。 どちらも計算されたピクセル値が指定されるため、閲覧環境によっては意図した表示にならない場合があります。

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

＃cols(6){{
＃show(画像ファイル名,,画像の説明)
}}

画像を縮小する方法

1. 画像縮小ツールで縮小する。
   画像編集ツールでの縮小は、画像そのもののサイズを変更する

1. 段組み機能を応用する
   次に、段組み機能の応用について説明します。

haikテーマの段組み機能は、
「コンテンツ幅を12分割する」という考え方のものを採用しています。
この考え方は、最初はしっくりこないかもしれませんが、徐々に慣れてきます。

例えば、これは、2段組みのおまじないですが、
12分割の考え方で見ると「6 : 6」で分割していることになります。
（各外枠は見やすくする為のものです。）
ちなみにこの外枠のおまじないは#box(12,panel,success,){{{　　　}}}　

　↓ にこの外枠のおまじないは#box(12,panel,primary,){{{　　　}}}　

区切り線を追加すると、「4 : 4 : 4」に分割したことになります。

　↓

分割した要素の合計が「12」になるようになっています。

そして、段組みのオプションを応用すると、
以下のようになります。

オプションによって、分割する量を調整できます。
1段目を「2」、2段目を「8」、3段目を「2」として（合計で12）、
両サイドは何も書かず、空白とします。

すると、
両サイドに余白をつくることになり、
真ん中の「8」の幅に、要素が表示されるようになります。

つまり、段組みの応用によって、中央寄せを実現しています。

この仕組みに画像を適用させると、

　　　　　　　　　　　　　　　　　　　　　　　　↓

「4」の幅の部分に、画像が入ります。
画像幅は「4」の幅と同じになります（画像が大きい場合のみ）。

つまり、4/12の画像サイズになり、縮小されたことになります。
（縮小しつつ、真ん中に表示されるように両サイドに「4」ずつ余白段組みを入れています）

以上段組みを応用したサイズ調整です。

12分割の感覚に慣れてくれば、かなり便利に応用することができます。

画像の縮小だけに限らず、様々な用途に使えます。