MENU
 参考デザインをジャンル別に見る場合はこちら


スクロールできます
Canva公式クリエイターページ
SWELLサイト型トップページTemplate販売ページ
You Tubeチャンネルはこちらから


SWELLカラムブロックとリッチカラムブロックの使い方解説

当ページは広告が含まれているリンクがあります。
SWELLリッチカラムブロック のつくりかた (10)
  • URLをコピーしました!

この記事では、SWELLのカラムブロックとリッチカラムブロックについて解説します。

もふこ

そもそもカラムブロックとはなんぞや?


というところから説明していきますので、今はよくわからない方も安心してくださいね。


この記事の内容
  • WordPressのカラムブロックの使いかた
  • SWELL独自のリッチカラムブロックの使いかた
  • サイト型トップページのカスタマイズについて解説
もふこです
Canva公式テンプレートはこちらから

Canvaでブログアイキャッチ等の公式テンプレを作ってます
クリエイターページのフォローをしていただけるととっても励みになります!

目次

カラムブロックとリッチカラムブロックとは?

カラムブロックの説明画像 (15)

まず前提として「カラムブロック」とは、複数のブロックを横並びに配置できるWordPress標準装備のブロックです。

カラムブロックのパターン


上記の画像のように、ブロックの表示サイズ割合を選び、横並びで表示したいコンテンツをそれぞれ入れていきます。

この記事の内容は2024年9月時点の情報です。

[SWELLバージョン: 2.12]

最新情報についてはSWELL公式サイトをご確認ください。

カラムブロックはこんなことができる


こちらは、カラムブロックを使って「33/33/33」の割合で画像を横並びにしてみました。


カラムブロック説明用画像
カラムブロック説明用画像
カラムブロック説明用画像



カラムの数は最大横6列まであとから増やしていくことができます。


カラムブロック説明用画像

このように、画像とテキストを横並びにすることも可能。


リッチカラムブロックはこんなことができる



対して、こちらのリッチカラムブロックはどうでしょうか。


カラムブロック説明用画像

ここの画像は小さめに…

カラムブロック説明用画像

ここにも画像を増やそうかな!

カラムブロック説明用画像
カラムブロック説明用画像

余白はこのくらいでいいかな?

カラムブロック説明用画像

このように、配置や各ブロックの表示割合、余白などを自由に調整して柔軟にレイアウトできるのがリッチカラムのメリットです。

WordPress標準仕様で使えるカラムブロックを、SWELLがさらに使いやすく改善してくれた上位互換ブロックというイメージですね。

もふこ

通常のブロックと同じように画像にリンクを付けることもできるので、トップページのカスタマイズにも活躍するブロックです!

特に便利なのが、PCやスマホなどのデバイスごとに表示する列の数を個別に変えられる機能です。

カラムブロックの説明画像 (14)

このように、PCのみ表示を多くしてコンテンツのメニューをズラリと横並びにしたり、横スクロールをしたり、使い方は無限大です!

カラムブロックの使い方

ここからは、カラムブロックの使い方を解説していきます。

STEP
メニューからカラムをクリック
STEP
レイアウトのパターンを選択
STEP
カラムが挿入されました
カラムブロック


ここまでできたら、個別のブロックに画像やテキストなどのコンテンツを入れていってください。

やり方は通常のブロックと同じ方法です。

リッチカラムブロックの使い方

リッチカラムブロックの使い方もかんたんです。

STEP
SWELLブロックからリッチカラムを選択
STEP
リッチカラムが挿入されました
STEP
列数などを調整
リッチカラムブロック
STEP
「+」ボタンでブロックを増やしていく


デバイスごとの列数を設定し、ブロックを追加したあとは、同じようにコンテンツを入れていきます。


ひとつのカラムごとに余白の設定も細かくできるので、希望があればやってみてくださいね。


リッチカラムはこのように横スクロールも簡単にできます

スクロールできます
SWELLサイト型トップページ見出しの参考アイディア
使用フォント:Avril Fatface
使用フォント
上:petit Formal Script
下:テロップ明朝
使用フォント:Fgnewmirairen(漢字なし)
使用フォント:Amsterdam Four


もふこ

こちらは、トップページ見出しにデザイン画像を入れる方法を解説した記事の中でご紹介しているデザインの一部です。

まとめ|SWELLカラムブロックの使い方解説


カラムブロックとリッチカラムブロックの違いはわかりましたか?


カラムブロックでは対応できない「表示できる数を増やす」、「レイアウトを自由に調整する」という希望がある時にぴったりなのがリッチカラムブロックです。


いろいろなレイアウトで使ってみてくださいね。


最後までご覧いただきありがとうございました!


SWELLのサイト型カスタマイズまとめ記事はこちらから


個別記事はこちらから




SWELLリッチカラムブロック のつくりかた (10)

この記事が気に入ったら
フォローしてね!

SNSでご紹介いただけると嬉しいです
  • URLをコピーしました!
目次