極意(7)段組設定を極める

段組とは、コンテンツ部分を縦割りに区分けしてより多くの情報を効率よく配置する仕組みです。コンテンツ部分を左右半分に2分割すると2段の段組、3分割すると3段の段組、4分割すると4段の段組、5分割すると5段の段組と言います。

段組の具体的な使い道としては、ネットショップ等で商品等の写真を小さくして横並びにして配置し、その写真の下に価格や商品の説明文等を配置した一覧表等で利用されます。段数を多くすれば、より多くの商品について商品一覧表を表示することができます。

ネットショップだけでなく、一覧形式の画像表現にサムネイル化した縮小画像を並べて、そのサムネイルをクリックしてポップアップ画像を表示したりしたら、プロ級のHPになること間違いありません。


先ずは、最も簡単な2段の段組設定

ああああああああああああああああああああ
画像の説明

いいいいいいいいいいいいいいいいいいいい
画像の説明



[check]上記のおまじないです。

#cols{{
ああああああああああああああああああああ
&show(a0002_006909.jpg,,画像の説明);
====
いいいいいいいいいいいいいいいいいいいい
&show(a0003_000726.jpg,,画像の説明);
}}

[check]解説します。
今回、使用した画像のサイズは、300x190pxです。
丁度、横に2枚入るイメージでリサイズしてあります。
以降の画像添付では、全て同じサイズ(300x190px)で使用しています。
#cols{{ は #cols(6,6){{ と同意義でその省略形と解釈されます。
即ち、コンテンツ部分を12分割し、左に6個分、右に6個分の領域で段組設定しています。何故、12分割なのか? 12と言う数字は、2分割、3分割、4分割、6分割と除数なしで分割し易い数字だからです。


次に3段の場合

ああああああああああ
画像の説明

いいいいいいいいいい
画像の説明

うううううううううう
画像の説明



[check]上記のおまじないです。

#cols(4,4,4){{
ああああああああああ
&show(a0001_014959.jpg,,画像の説明);
====
いいいいいいいいいい
&show(a0001_015500.jpg,,画像の説明);
====
うううううううううう
&show(a0002_008657.jpg,,画像の説明);
}}

[check]解説します。
#cols(4,4,4){{ でコンテンツ部分を4個分の領域で均等に3分割しています。
段組内に画像を挿入した場合、段落の大きさに合わせて自動的に縮小されます。
この機能は、haik環境での段組設定の大きな特徴の一つになっています。
ユーザーは、あまり画像の大きさを意識せずに画像添付できるメリットがあります。


更に4段の場合

ああああああああああ
画像の説明

いいいいいいいいいい
画像の説明

うううううううううう
画像の説明

ええええええええええ
画像の説明



[check]上記のおまじないです。

#cols(3,3,3,3){{
ああああああああああ
&show(a0001_014959.jpg,,画像の説明);
====
いいいいいいいいいい
&show(a0001_015500.jpg,,画像の説明);
====
うううううううううう
&show(a0002_008657.jpg,,画像の説明);
====
ええええええええええ
&show(a0001_017440.jpg,,画像の説明);
}}

[check]解説します。
#cols(3,3,3,3){{ でコンテンツ部分を3個分の領域で均等に4分割しています。
後は、3分割の場合と同様です。


更に5段の場合

ああああああああああ
画像の説明

いいいいいいいいいい
画像の説明

うううううううううう
画像の説明

ええええええええええ
画像の説明

おおおおおおおおおお
画像の説明



[check]上記のおまじないです。

#cols(2+1,2,2,2,2){{
ああああああああああ
&show(a0001_014959.jpg,,画像の説明);
====
いいいいいいいいいい
&show(a0001_015500.jpg,,画像の説明);
====
うううううううううう
&show(a0002_008657.jpg,,画像の説明);
====
ええええええええええ
&show(a0001_017440.jpg,,画像の説明);
====
おおおおおおおおおお
&show(a0003_001554.jpg,,画像の説明);
}}

[check]解説します。
#cols(2+1,2,2,2,2){{ でコンテンツ部分を2個分の領域で均等に5分割しています。
但し、12を5等分できないので、左右に1個分の余白を設けています。
その指定が「2+1」の意味です。詳細はプラグインの解説ページをご覧下さい。


更に6段の場合

ああああああああああ
画像の説明

いいいいいいいいいい
画像の説明

うううううううううう
画像の説明

ええええええええええ
画像の説明

おおおおおおおおおお
画像の説明

AAAAAAAAAA
画像の説明



[check]上記のおまじないです。

#cols(2,2,2,2,2,2){{
ああああああああああ
&show(a0001_014959.jpg,,画像の説明);
====
いいいいいいいいいい
&show(a0001_015500.jpg,,画像の説明);
====
うううううううううう
&show(a0002_008657.jpg,,画像の説明);
====
ええええええええええ
&show(a0001_017440.jpg,,画像の説明);
====
おおおおおおおおおお
&show(a0003_001554.jpg,,画像の説明);
====
AAAAAAAAAA
&show(a1640_000112.jpg,,画像の説明);
}}

[check]解説します。
#cols(2,2,2,2,2,2){{ でコンテンツ部分を2個分の領域で均等に6分割しています。


均等でない3段組

何も段組は均等ばかりではありません。非均等な分割もありです。

ああああああああああ
画像の説明

いいいいいいいいいい
画像の説明

うううううううううう
画像の説明



[check]上記のおまじないです。

#cols(3,4,5){{
ああああああああああ
&show(a0001_014959.jpg,,画像の説明);
====
いいいいいいいいいい
&show(a0001_015500.jpg,,画像の説明);
====
うううううううううう
&show(a0002_008657.jpg,,画像の説明);
}}

[check]解説します。
#cols(3,4,5){{ でコンテンツ部分を3個分、4個分、5個分の各領域で3分割されていることが分かると思います。画像サイズも段組の大きさに合わせて自動的に縮小されています。
3+4+5=12になっていることにも注目して下さい。


従来の画像回り込みは2段の段組と併用します

画像の説明

ああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううう
ええええええええええええええええええええ
おおおおおおおおおおおおおおおおおおおお



[check]上記のおまじないです。

#cols(5,7){{
&show(a0002_006909.jpg,,画像の説明);
====
ああああああああああああああああああああ
いいいいいいいいいいいいいいいいいいいい
うううううううううううううううううううう
ええええええええええええええええええええ
おおおおおおおおおおおおおおおおおおおお
}}

[check]解説します。
#cols(5,7){{ でコンテンツ部分を5個分、7個分の領域で2分割しています。
左側の5個分のところに画像、右側の7個分のところにテキストを入れています。
画像は段組の大きさに合わせて自動的に大きさが変わると言いましたが、もし仮に画像が小さい場合、段組に合わせて画像は拡大されません。そのような場合、#cols(5,7){{ を#cols(4,8){{ または#cols(3,9){{ に変更し、段組の大きさを小さくすることでバランスのとれた画像表現になります。


余談ですが・・・・・

haikになって断然使いやすくなった機能の一つが段組設定です。
従来の段組は#style2でややっこしいおまじないを設定していました。
それに比べたら遥かに易しくなってユーザーには大いに使って下さいとの意味でしょうか?
また画像のサイズが段組の大きさに合わせて自動的に変更されるのも良いですね。


ちなみにWordPressで段組を設定したら・・・・


上記の関連記事はお役に立ちましたか?

  • 下記に投票して戴けると嬉しく思います。
    選択肢 投票
    役に立った 13  
    役に立たなかった 0  


ご意見箱


  • お世話になっています。段組みはHAIKになってすごく改善されて使い易いですね。本HPを参考にさせて頂いております。 ありがとうございます。 -- ちく太 2016-05-14 (土) 10:06:20