目次
カラムとは?
![](https://goriweb.jp/wp-content/uploads/2023/02/image-10.png)
Swellには2つのカラムがある
カラム
カラムの幅は設定で変更でき、1:2や1:1などの幅の調整ができます。
リッチカラム
リッチカラムでは比率を変更することができず、均等並びで表示できます。
カラム(Wordpressのデフォルトのブロック)
カラムの幅は設定で変更でき、1:2や1:1などの幅の調整ができます。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-32.jpg)
カラムの例
50%:50%の場合
![](https://goriweb.jp/wp-content/uploads/2022/08/image-14.png)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
30%:70%の場合
![](https://goriweb.jp/wp-content/uploads/2022/08/image-14.png)
テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。
操作方法をご覧ください
![](https://goriweb.jp/wp-content/uploads/2023/04/Wordpressサムネイル.038.jpeg)
![](https://goriweb.jp/wp-content/uploads/2023/04/Wordpressサムネイル.038.jpeg)
カラムの追加方法
【カラムの追加方法】 STEP編集画面で「+」をクリックします STEPカラムをクリックします STEP希望するレイアウトのパターンを選択します STEPカラムの1つに「+」ボ…
リッチカラム(Swellのブロック)
リッチカラムでは比率を変更することができず、均等並びで表示できます。
リッチカラム使用時の注意点
Swellのテーマに搭載されている機能です。リッチカラムは立地からの進化版であり、パーツの数を増やすことができます。
- カラムはパーセント指定が可能で、幅の制御が細かくできます。
- カラムは2段になり、左側に画像、右側に表が入ります。
- カラムは予めの大きさが決まっている場合に使います。
- リッチカラムのでカラムの追加や削除ができます。
- カラムは等間隔で表示される
- PCやタブレット、スマホでそれぞれの列数を指定できる
レイアウトの例
PC2列、タブレット2列、スマホ2列のレイアウト
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
PC4列、タブレット2列、スマホ1列のレイアウト
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
![](https://goriweb.jp/wp-content/uploads/2022/08/image-20.png)
テキストが入ります。テキストが入ります。
操作方法をご覧ください
![](https://goriweb.jp/wp-content/uploads/2023/04/Wordpressサムネイル.038.jpeg)
![](https://goriweb.jp/wp-content/uploads/2023/04/Wordpressサムネイル.038.jpeg)
リッチカラムの追加方法
【リッチカラムの追加方法】 STEP編集画面で「+」をクリックします STEPスクロールしてブロックを追加します STEPリッチカラムが選択されました STEPミニメニューのカ…