画像の編集
画像にリンクを貼る。
画像をクリック
[「&show(5050bdbe.png,,haik道場);>https://www.haik.biz/index.php]]
[[と&は半角に。
画像の廻り込み。
アコーディオンにも使えるか検証してみました。
#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(*画像ファイル名*,*オプション*,画像の説明);
使い方(ブロック)
#show(*画像ファイル名*,*オプション*,画像の説明)
オプション
インラインとブロックで使えるオプションが異なります。(* は全ての場合に利用可能です)
- オプション 種類 説明
aroundl ブロック 画像を左に回り込み表示します
aroundr ブロック 画像を右に回り込み表示します
normal * 画像に直リンクを張ります
colorbox * クリックでポップアップ表示します
linkurl=* * リンク先を指定します
label=* * 画像の表示を置き換えます
画像ファイル名を指定するとその画像が表示されます
change * マウスオーバーで画像を切り替えます
*x* 例)120x120 * 画像サイズを指定します
*% 例)50% * 画像サイズをパーセンテージで指定します
circle * 画像を丸くします
round * 画像を角丸にします
pola * 画像を枠付にします - 回り込みについて
画像を回り込ませる場合は、#clear で回り込みの解除を行なってください。
#show(画像ファイル名,aroundr,説明)
...回りこませる文章...
#clear
- 画像のサイズ指定について
*x* や *% での画像のサイズ指定は haik テーマでは避けてください。 どちらも計算されたピクセル値が指定されるため、閲覧環境によっては意図した表示にならない場合があります。
画像を小さくしたい場合は縮小ツール等で画像自体を小さくするか、 #cols で横幅を指定してください。
#cols(6){{
#show(画像ファイル名,,画像の説明)
}}
画像を縮小する方法
- 画像縮小ツールで縮小する。
画像編集ツールでの縮小は、画像そのもののサイズを変更する
- 段組み機能を応用する
次に、段組み機能の応用について説明します。
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分割の感覚に慣れてくれば、かなり便利に応用することができます。
画像の縮小だけに限らず、様々な用途に使えます。