使い方の基本3:レイアウトを追加する

ブロックを横に並べるときは「レイアウト」を追加する

ブロックは縦にしか置いていけないので、横に並べたいときは「レイアウト」というものを追加します。

エリアやブロックの縁のあたりでマウスをウロウロさせているとこんなタブっぽいものがでます。そしたら、そのタブをクリックします。

画像は「メインエリア」のタブです。

クリックするとメニューが出ます。

メインエリアで出てくるメニューは「ブロックを追加」「エリアのデザインを編集」「レイアウトを追加」です。

「レイアウトを追加」を選択します。

- - -

(※ここでは余談ですが、タブから「ブロックを追加」を選択したときはクリックするだけで追加されます。マウスで持ってくる必要はありません。)

レイアウトは入れ子にできる

レイアウトは、レイアウトの列の中にも追加できます。レイアウトは入れ子にできるのです!

レイアウトのタブが出たら、タブの上でクリックします。

レイアウトのタブで出てくるメニューは、エリアの項目+レイアウト用の項目です。

エリアのときと同じように「レイアウトを追加」を選択します。

ツールバーと、レイアウトがあらわれます。

ツールバーの「グリッド」でレスポンシブ(スマホ対応)にするかしないかを選択します。

「カラム」の数字で何列にするかを決めます。

レスポンシブ対応は「Twitter Bootstrap」

レスポンシブ対応はグリッドの「Twitter Bootstrap」です。スマホで表示したときに縦に並んでくれます。

スマホファーストです。助かります。

「自由形式のレイアウト」にすると、スマホでも横並びのままにできます。

- - -

自由形式のレイアウトを使うときは、スマホでどう表示されているかを確かめながら調整するといいです。

スマホで見ると「幅が狭く・縦に長く」なって、読むのに苦労しそうな感じになってることがあります。

カラムで何列にするか決めます。緑のバーにある四角いのを動かすと、列の幅を変えられます。

画像は2列にしたところ。

3列にしたところ。もちろん、もっと多くもできます。

レイアウトは動かせる

レイアウトも、ブロックと同じように移動することができます。

タブの上でクリックしてメニューを出し、「コンテナーのレイアウトを編集」を選択します。

ツールバーの十字キーを持って、動かします。

レイアウトを動かすのはちょっと難しくて、なかなかうまくできません。

下にあるのを上方向に持っていくのは比較的成功するんですが、どうすればいいかという法則がわかりません。