様々な、段組みの方法

段組とは、列を分けて文章をレイアウトすることなんですが、
段組が出来ると、コンテンツをスッキリとレイアウトが可能になります。

QHMでは、「おまじない」を書くことで、
簡単に段組を作ることができます。




例えば、こんな感じにすることができます。

「おまじない」も使える!
画像の説明
ここは、左側の内容
この中に、内容を書きます。

「おまじない」も使える!
画像の説明
ここは、中央の内容
この中に、内容を書きます。

「おまじない」も使える!
画像の説明
ここは、左側の内容
この中に、内容を書きます。





様々な段組み方法

色々の方法で、段組みをする事が出来ます。
おすすめは、「html2」タグで、指定です。





QHM標準段組

QHMでは、標準ボタンの「おまじない」が組み込まれてます。
「その他のツール」~「レイアウト」の中に「段組み」があります。

「段組み」をクリックすると、自動的に下の「おまじない」が記述されます。
後は、右側と左側に、文字、画像を書くと、段組として利用できます。

文章の内容は、見出しを入れたり、他の「おまじない」も使うことも出来ますが、
但し、「おまじない」で「{ { } }」を使う「おまじない」は使うことは出来ません。

複数使う場合は⇒複数行プラグイン(おまじない)を使う方法

#style2(L){{
ここは、左側の情報
この中に、内容を書きます。
}}
#style2(R){{
ここは、右側の情報
この中に、内容を書きます。
}}
#clear


この様に、表示されるとこの様になります。



左側の内容です
ここは、左側の情報
この中に、内容を書きます。

右側の内容です
ここは、右側の情報
この中に、内容を書きます。








段組みのカスタマイズ

段組みのカスタマイズができます。
要するに、段組みの幅や列の数などを、指定する事ができます。

#style2(style=width:45%;float:left;text-align:left;margin-left:5px){{
* 左側の内容です 
ここは、左側の情報を書きます。
}}
#style2(style=width:45%;float:left;text-align:left;margin-left:5px){{
* 右側の内容です
ここは、右側の情報を書きます。
}}
#clear


style=width:45%;float:left;text-align:left;margin-left:5px


  • width:45%;・・・・・
列の幅を%で指定する
「px」で幅を指定することも可能です。


  • float:left;・・・・・・・
列を左または右に寄せて配置する
左寄せ「left」、右寄せ「right」


  • text-align:left;・・・・・
行揃え(文章)の位置を指定する
左寄せ「left」、右寄せ「right」中央寄せ「center」


  • margin-left:5px・・・・
列の余白を%で指定する
左側「left」及び、右側「right」の余白を指定します。
余白をつけない場合は、0%にします。
「px」で幅を指定することも可能です。



}} 

#style(class=box_black_swl){{
+ 「#clear」は、段組みを終了する事をいみします。必ず最後に入れます。


+ 列の数を、2列、3列と複数も可能ですが、幅と余白の合計が100%を超えない様にします。


+ 基本的に、列の数、列の幅、余白の指定で、問題ないかと思います。


+ 文章の内容は、見出しを入れたり、他の「おまじない」も使うことも出来ますが、
但し、「おまじない」で「{ { } }」を使う「おまじない」は使うことは出来ません。








「html2」を使った段組みの方法

「html2」タグを使って、段組みをする事ができます。

「おまじない」も自由に使うことが出来るので、段組みを使う場合は、
「html2」タグを利用する事をおすすめします。


#html2(<div style="width:50%; float:left; margin-right:0px">)
左側の内容です
ここは、左側の情報を書きます。
#html2(</div>)
#html2(<div style="width:50%; float:left; margin-right:0px">)
右側の内容です
ここは、右側の情報を書きます。
#html2(</div>)
#clear

列の幅だけ指定する場合は、及び3列

#html2(<div style="width:33%; float:left;">)
左側の内容です
ここは、左側の情報を書きます。
#html2(</div>)
#html2(<div style="width:33%; float:left;">)
中央の内容です
ここは、中央の情報を書きます。
#html2(</div>)
#html2(<div style="width:33%; float:left;">)
右側の内容です
ここは、右側の情報を書きます。
#html2(</div>)
#clear
  1. 「width」「float」「margin」の説明は「段組みのカスタマイズ」と同じです。

  2. 「html2」を使うので、全ての「おまじない」を使うことが出来ます。

  3. 「#clear」は、段組みを終了する事をいみします。必ず最後に入れます。

  4. 列の数を、2列、3列と複数も可能ですが、幅と余白の合計が100%を超えない様にします。

  5. 基本的に、列の数、列の幅、余白の指定で、問題ないかと思います。




「おまじない」も使える!
画像の説明
ここは、左側の内容
この中に記事を書きます、

枠の中に段組みもOK!

何列も可能!
画像の説明
ここは、中央の内容

画像にリンクを貼る事
も、もちろん出来ます。

レイアウトがスッキリ!
画像の説明
ここは、左側の内容

段組みを使うと、レイアウトがスッキリと見栄えもよくなります。