レイアウト(段組)

colsの使い方(基本)

# cols(*段組オプション*){{
文章
====
文章
}}


段組オプション

カラムの幅の指定
横幅を12分割したものの内いくつ分の幅で段組するか(N/12)、を指定。

同じ幅で2段組

左のカラム
文章。文章。文章。
文章。文章。文章。

右のカラム
文章。文章。文章。
文章。文章。文章。

     ↓  ↓

 ↑ 外枠
 #box(12,panel,primary,)を使用

#box(12,well,){{{

同じ幅で2段組の書き方
#cols(6,6){{
左のカラム
文章。文章。文章。
文章。文章。文章。
====
右のカラム
文章。文章。文章。
文章。文章。文章。
}}    
}}}

     

異なる幅で3段組

左のカラム
文章。文章。文章。
文章。文章。文章。

中央のカラム
文章。文章。文章。
文章。文章。文章。

右のカラム
文章。文章。文章。
文章。文章。文章。

      ↓  ↓

 ↑   外枠
 #box(12,panel,primary,)を使用

#box(12,well,){{{
異なる幅で3段組の書き方
#cols(3,4,5){{
左のカラム
文章。文章。文章。
文章。文章。文章。
====
中央のカラム
文章。文章。文章。
文章。文章。文章。
====
右のカラム
文章。文章。文章。
文章。文章。文章。
}}
}}}



余白の指定
各カラムの左に余白を追加できます。余白の幅もN/12で表現します。

カラム
ここに文章ここに文章
ここに文章ここに文章

     ↓  ↓

#cols(6+3){{
カラム
ここに文章ここに文章
ここに文章ここに文章
}}

左のカラム(余白あり)
ここに文章ここに文章
ここに文章ここに文章

右のカラム
ここに文章ここに文章
ここに文章ここに文章

     ↓  ↓

#cols(4+4,4){{
左のカラム(余白あり)
ここに文章ここに文章
ここに文章ここに文章
====
右のカラム
ここに文章ここに文章
ここに文章ここに文章
}}


ボックスの種類

ボックス

#thumbnails これは枠というより段組の部類に属します。

#thumbnails 枠有り 各枠の幅の指定が無ければ均等

#thumbnails(枠有り・ 画像有り・枠幅指定なし)各枠の幅の指定が無ければ均等

#thumbnails(オプション){{
&show(画像,popup=glupe造り);
**見出し
ここに文章を書く。
====
&show(画像,popup=glupe造り);
 **見出し2
  ここに文章を書く。
  ====
&show(画像,popup=glupe造り);
 **見出し3
ここに文章を書く。
====
}}

   ↓  ↓

tukurimori.jpg

造り盛り合わせ

宣伝文句・価格

kisutukuri.jpg

キスの造り

宣伝文句・価格

f209848c.jpg

造り盛り合わせ-2

宣伝文句・価格


#thumbnails 枠有り 各枠の幅の指定あり

#thumbnails(枠有り・ 画像なし・枠幅指定)

#thumbnails(3,3,6){{
 **見出し
  ここに文章を書く。
   ====
 **見出し2
  ここに文章を書く。
   ====
 **見出し3
  ここに文章を書く。
   ====
}}

        ↓↓

見出し

ここに文章を書く。

見出し2

ここに文章2を書く。

見出し3

ここに文章3を書く。

「#thumbnails{{ }}」で上下を囲み、その中に内容を記述。
間に「====」と記述すると列が分けられ、各列には自動で枠が表示されます。
各列の幅は指定が無ければ均等になります。(最大で12列)
オプションで各列の幅を指定することも可能です。

ココに一列目の文章。

ココに二列目の文章。

ココに三列目の文章。

#cols(枠なし)

tukurimori

見出し

本文

kisutukuri

見出し

本文

tukurimori (2)

見出し

本文