SWELLリッチカラムの使い方！フルワイドで画像3列並べてみた

ばらもん。

SWELLの『リッチカラムを使って画像をフルワイドで3列配置する方法』を教えて欲しい

上記のお悩みを解決します。

それでは、本題に入ります。

『リッチカラム』の使い方

完成形は下記です。

作り方を解説していきます。

step
1フルワイドブロックを挿入

step
2コンテンツ幅は『フルワイド』

step
3見出しは削除しておく

見出しはあってもいいですが、画像をピチっと揃えたい場合には削除しておくことをオススメします。

step
4リッチカラムブロックを選択

step
5列数（パソコン）は３。余白はオール０

パソコンは3列表示にします。

スマホは1列に設定しています。
スマホは2列表示だと、ちょっとしんどいかなぁという印象。

カラム間の余白を０にすることで、画像をピチっと敷き詰めることができます。

step
6コンテンツサイズはフルワイド。パディング量はオール０。

フルワイドブロックの設定は、コンテンツ横幅をフルワイドにしておきます。
上下のパディング量を０にしておくことで、画像をピチっと揃えることができます。

step
7カラムを追加する場合①

ばらもん。

リッチカラムを使い始めた当初は、なかなかカラム追加できなくて焦りました笑

step
8カラムを追加する場合②

画像３列を配置したあとに、下に画像大を１列並べるときにカラムがもう一つ必要になります。
ステップ８、９の手順を覚えておいてください。

step
9画像を配置していく

私は、canvaを使って画像の大きさを揃えています。

step
10画像の配置完了

step
11第一段階完成

step
12画像上にテキストを追加可能

画像上にテキストを追加可能です。

しかし、この機能を使うと画像にリンクを貼ることができなくなります。
リンクが必要な場合にはSWELLボタンでリンクを配置することをオススメします。

step
13画像上に文字を入力

step
14第二段階完成

step
15１列のカラムを追加

ステップ７・８でご説明した方法で、３列カラムの下にカラムを１つ追加します。
カラム横幅（パソコン）を１００％にします。

step
16完成

１列のカラムに画像を追加して完成です。

step
17サイドバーを非表示

サイドバーを表示している場合は、非表示にしておきます。

まとめ

ポイントをまとめます。

私が運営しているもうひとつのブログ『ぶろぐしる～』のトップページでも、画像フルワイドは多用しています。
さらに、カバーブロックを組み合わせて動画も混ぜ込んでいます。

SWELLならやりたいことが簡単に実現できると感じている今日このごろです。以上です。