極意(22)画像の回り込み

HPの画面編集には、必須となる画像回り込み機能があります。
画像回り込み機能とは、画像の回りにテキスト文書を配置する機能です。
画像が左で文章が右のケース、逆に画像が右で文章が左のケース、何れも画像回り込みと言います。

HAIKテーマ以前の旧バージョンでは、#show と言うおまじないで画像回り込みが実践されていました。その機能が新バージョンでは、どのようなおまじないで実践されるのかを明らかにし、また双方の違いを検証してみました。


HAIK以前の旧バージョンでの「画像回り込み」

堀内敬子

この人、だあ~れ?
シニア世代にとって、現在(いま)一番輝いている女優さんの一人です。
キャリヤウーマンから意地悪な叔母さんまで幅広い役をこなす演技力抜群の女優さんです。

上記のおまじないです。

#show(auto-l3soR6.jpg,aroundl,堀内敬子)
この人、だあ~れ?
シニア世代にとって、現在(いま)一番輝いている女優さんの一人です。
キャリヤウーマンから意地悪な叔母さんまで幅広い役をこなす演技力抜群 の女優さんです。
#clear

解説します。

  1. 画像の位置は、aroundl(画像が左)または、aroundr(画像が右)できまる。
  2. 一行に収まるテキスト文の長さは、画像の大きさできまる。
  3. 即ち、画像を小さく(縮小)すれば、テキスト文はより長くなる。


HAIKテーマでの「画像回り込み」

堀内敬子

この人、だあ~れ?
シニア世代にとって、現在(いま)一番輝いている女優さんの一人です。
キャリヤウーマンから意地悪な叔母さんまで幅広い役をこなす演技力抜群の女優さんです。

上記のおまじないです。

#cols(4,8){{
&show(auto-l3soR6.jpg,,堀内敬子);
====
この人、だあ~れ?
シニア世代にとって、現在(いま)一番輝いている女優さんの一人です。
キャリヤウーマンから意地悪な叔母さんまで幅広い役をこなす演技力抜群の女優さんです。
}}

解説します。

  1. 2段の段組で左右の画像とテキストを表示しています。
  2. 左側の段組に画像を、右の段組にテキスト文を入れれば、旧バージョンの aroundl と同じ結果となる。
  3. 逆に、左側の段組にテキスト文を、右の段組に画像を入れれば、旧バージョンの aroundr と同じ結果となる。
  4. 画像とテキスト文のサイズは、#cols(4,8) の値(4対8)できまる。
  5. 画像が右側の場合、#cols(8,4) が最適な指定となる。
  6. 画像は、入るべき段組の大きさに合わせて縮小される。(今回、縮小されている)


新旧の違いは?

決定的に違うところは、新バージョンでは2段の段組を使い、旧バージョンでは回り込み専用の画像表示のおまじない(#show)を使うことです。
ある面、新バージョンでの画像回り込みの方が易しいと言えるかも知れません。

当ページはHAIKテーマで作成しています。前記の2例でお分かりだと思いますが、画像の回り込み機能は新旧のバージョンで正しく機能しています。
どちらの場合でも結果は同じようになりますが、スマフォで見た場合、大きく異なった結果になると考えられます。

即ち、新バージョンの画像回り込みはレスポンシブ・レイアウトが踏襲され、旧バージョンのそれはレスポンシブには成らないという結論になります。
そう言った意味では、HAIKテーマでのHP作成には、新バージョンでの画像回り込み(段組を使った方式)を使うことをお薦めします。


ご意見箱