![](https://aroma-ecru.com/wp-content/uploads/2021/11/setsukosan03_nocamera-150x150.png)
今回はSWELLで境界線を波線にする方法と3カラムにする方法を解説します。
目次
境界線を波線にして3カラムにしよう
![](https://aroma-ecru.com/wp-content/uploads/2022/01/sinpaicercle-1-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/01/sinpaicercle-1-150x150.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/01/sinpaicercle-1-150x150.png)
トップページをおしゃれにしたいな
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/11/0115_xlarge-150x150.jpg)
SWELLではセクション区切りを波線や斜め線にすることができます。
また画像を横に並べると可視性もよくデザインも垢抜けます。
こんなイメージです
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-15.02.31-1024x464.png)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-15.02.31-1024x464.png)
フルワイドセクション・3カラム
STEP
フルワイドセクションを入れる
①フルワイドセクションを入れたい場所のすぐ上のセクションを選択します
②画面上の「+」ボタンをクリックする
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.49.51-1024x621.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.49.51-1024x621.jpg)
STEP
フルワイドセクションを入れる
左側メニューから「フルワイド」を選択します。
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.50.18-1024x573.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.50.18-1024x573.jpg)
STEP
3カラムにする
フルワイドが入った場合はうすいグレーの背景となります。
①タイトルを入力します(ここでは簡単バナーというタイトルを入れました)
②「+」ボタンをクリックしてショートカットメニューを表示し「カラム」を選択します。
(ショートカットメニューにない場合は「すべて表示」を押して左側メニューから探してください)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.51.17-1024x616.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.51.17-1024x616.jpg)
STEP
3カラムを表示する
「+」が3つ並んで3カラムの枠ができました。
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.51.44-1024x615.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.51.44-1024x615.jpg)
STEP
バナーリンクを入れる
カラムの中に「バナーリンク」を設置し画像とテキストを配置します。
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.53.12-1024x385.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-13.53.12-1024x385.jpg)
STEP
3カラムにそれぞれ画像とテキストを配置
それぞれ画像とテキストを配置してみました。
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.01.33-1024x622.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.01.33-1024x622.jpg)
3つの画像の大きさを揃えることがきれいに配置させるポイントです。
セクション区切りを波線にする
STEP
上部の境界線を波線(曲線)にする
波線にしたいセクションを選択し右側メニューから「上部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.01.54-1024x480.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.01.54-1024x480.jpg)
STEP
下部の境界線を波線(曲線)にする
波線にしたいセクションを選択し右側メニューから「下部の境界線の形状」から「波」を選び高さレベルを好みの数値に設定します
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.32.19-1024x455.jpg)
![](https://aroma-ecru.com/wp-content/uploads/2022/03/2022-03-18-14.32.19-1024x455.jpg)
出来上がりイメージはこちら
実際に実装したイメージはこちらからご覧いただけます
https://xs116105.xsrv.jp/swell/#nami
コメントを投稿するにはログインしてください。