レイアウトブロック

目次

レイアウトは2種類

レイアウトには2種類あります。

カラム

カラムは予めの大きさが決まっている場合に使います。

カラムの例

50%:50%の場合

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

30%:70%の場合

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

リッチカラム

リッチカラムは、Swellのテーマに搭載されている機能です。カラムを追加する場合に簡単に追加できます。また3列表示で設定した場合に5個のカラムがあると、1列目は3個、2列目は2個と自動振り分けされます。

  • 等間隔で表示される
  • PCやタブレット、スマホでそれぞれの列数を指定できる

レイアウトの例

4列レイアウトの場合

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

2列レイアウトの場合

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

テキストが入ります。テキストが入ります。

・均等に並べることができる
・デバイスごとにレイアウトを変えられます。

ブロック編集画面から編集できます。

下記の場合だと下記のように表示されます。

  • PC閲覧時:4列
  • タブレット閲覧時;2列
  • スマホ閲覧時:1列
close
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

元東芝エンジニア「WEBマネタイズの専門家」/ ㍿TreasureNey取締役。
時間とコストを省く、最もシンプルなWEBでの収益法をお伝えしています。東芝時代に培った開発設計業務経験から、簡単に誰でもWEBを使ったメディア制作をレクチャーします。

目次