画像の編集

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

haik道場

画像の廻り込み。

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

ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。

ペンギン

ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。

ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。ここに文章。

コアラ

ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。
ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。

コアラ

ここに文章。

↓              ↓                ↓

(注)この書式をコピペする場合#、ー は半角に変える事。
#accordion(1,primary){{
ー メニュー1
ーメニュー2
====
ここに全体的な文章をかいてもよし。
#show(Penguins.jpg,aroundr,pola,popup=groupグループ名,35%,ペンギン)
ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。
#clear
ここに全体的な文章をかいてもよし。
#show(Koala.jpg,aroundl,pola,popup=groupグループ名,35%,コアラ)
ここに文章。ここに文章。ここに文章。
ここに文章。ここに文章。
ここに文章。ここに文章。
ここに文章。ここに文章。ここに文章。
#clear
====
ここに全体的な文章をかいてもよし。
#show(Koala.jpg,aroundl,pola,popup=groupグループ名,30%,コアラ)
ここに文章。
#clear
}}

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

&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(*画像ファイル名*,*オプション*,画像の説明);
kisutukuri.jpg

使い方(ブロック)

#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,){{{   }}} 

#cols{{
ここに内容(左)
====
ここに内容(右)
}}

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

ここに内容(左)

ここに内容(右)

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

 #cols{{
 ここに内容(左)
 ====
 ここに内容(中)
 ====
 ここに内容(右)
 }}

 ↓

ここに内容(左)

ここに内容(中)

ここに内容(右)

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

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

#cols(2,8,2){{
// 余白
====
ここに内容
====
// 余白
}}

ここに内容。ここに内容。ここに内容。ここに内容。ここに内容。

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

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

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

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

#cols(4,4,4){{
// 余白
====
&show(画像,画像の説明);
====
// 余白
}}

                        ↓

画像の説明

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

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

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

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

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