SWELLのリッチカラムとは？使い方・設定方法・活用例をわかりやすく解説

SWELLのリッチカラムは、通常のカラムブロックよりも自由にレイアウトを調整できる便利な機能です。

ただ、実際に使おうとすると、

このように感じる方も多いのではないでしょうか。

SWELLのリッチカラムを使えば、デバイスごとの列数設定、カラム幅の調整、余白の設定、横スクロール表示などができるため、見やすいレイアウトを作りやすくなります。

この記事では、SWELLのリッチカラムの特徴、基本的な使い方、設定できる項目、活用例、使うときの注意点までわかりやすく解説します。

「標準のカラムでは物足りない」「もっと見やすく整えたい」という方は、この記事を読めばリッチカラムの使い方がひと通りわかるはずです。

まだSWELLを導入していない方は、先に以下の記事をチェックしておくとスムーズです。

購入したら、初期設定も忘れずに！

SWELLのリッチカラムブロックとは？

WordPressでブログを始めた方なら、コンテンツを横並びに配置できる「カラムブロック」を使ったことがあるかもしれません。

ただ、使っているうちに「もっと自由にレイアウトを調整したい」と感じることもありますよね。

そんなときに便利なのが、SWELLのリッチカラムです。

2021年9月のVer2.5.1のアップデートで追加されたこの機能は、標準のカラムブロックを大幅に進化させた高機能なブロックです。

SWELL_Ver2.5.1のアップデート情報

リッチカラムブロックでできること

SWELLのリッチカラムは、標準のカラムブロックをより使いやすくした高機能なブロックです。

HTMLやCSSの知識がなくても、見やすいレイアウトを作りやすいのが大きな特徴です。

たとえば、次のようなことができます。

「画像と文章を横並びにしたい」「比較表を見やすく並べたい」「スマホでも崩れにくくしたい」といった場面で、かなり使いやすいブロックです。

通常のカラムブロックとの違い

SWELLのリッチカラムと標準のカラムブロックの大きな違いは、表示の自由度にあります。

標準のカラムブロックでも横並びレイアウトは作れますが、スマホ表示や余白調整はそこまで細かくできません。

それでは、具体的な違いを細かく見ていきましょう。

デバイス別の表示設定

スマホでは「1列にするか、PCと同じ列数で見せるか」くらいしか選べず、見え方を細かく整えるのが難しい場面があります。

一方で、リッチカラムならPC・タブレット・スマホごとに列数を調整できるため、デバイスに合わせた見やすい表示を作れます。

たとえば、PCでは6列、タブレットでは4列、スマホでは2列といった形で設定できます。

＼タブをクリックして、確認してみましょう／

余白とレイアウトの調整

さらに、余白の調整もリッチカラムの強みです。

カラムとカラムの間の余白だけでなく、カラム内の余白まで上下左右それぞれ細かく設定できます。

これにより、詰まりすぎず、読みやすいレイアウトを作りやすくなります。

以下は、デフォルトの状態の画像とカラム間の余白を5remに変更した画像を比較したものです。

また、カラム内の余白がない画像と、３つ目のカラム内の余白を1remに設定したものを比較した画像が以下です。

その他の便利機能

そのほかにも、横スクロール機能や、デフォルト・ボーダー・シャドウといったスタイル変更、カラム幅の調整にも対応しています。

【横スクロール機能】

【3種類のデザインスタイル（デフォルト/ボーダー/シャドウ）】

＼タブをクリックして、確認してみましょう／

【カラムの横幅設定】

どんな場面で使うと便利か

SWELLのリッチカラムは、ただ横に並べるだけでなく、見やすく整理して伝えたい場面で特に便利です。

たとえば、次のような使い方と相性がいいです。

PCではきれいに並んでいても、スマホで見ると詰まって読みにくいことがありますよね。

リッチカラムなら、そうした崩れを減らしながら、デバイスごとに見やすい形に調整できます。

ブログ記事の見た目を整えたい方はもちろん、比較コンテンツや画像付きの説明をわかりやすく見せたい方にも、リッチカラムは使いやすい機能です。

SWELLのリッチカラムの使い方

まずは、SWELLのリッチカラムブロックの使い方を見ていきましょう。

以下で順番に解説します。

リッチカラムを追加する手順

まずは、SWELLのリッチカラムを追加してみましょう。追加方法はシンプルで、主に2つあります。

ブロック追加ボタンから選択する方法と、ショートカットコマンドを使用する方法です。

1つ目は、ブロック追加ボタンから挿入する手順です。

2つ目は、ショートカットコマンドを使う方法です。

段落ブロック内で「/リッチカラム」または「/rich」と入力すると、候補にリッチカラムが表示されるので、そのまま選択すれば追加できます。

どちらの方法でも簡単に挿入でき、追加すると下図のように基本の2カラムが表示されます。

「まずは使ってみたい」という方は、ここまでできれば十分です。

あとは各カラムの中に、文章や画像などのブロックを入れていけばOKです。

カラム数を設定する方法

リッチカラムを追加したら、必要に応じてカラム数を増やしましょう。

カラムを追加したいときは、まずリッチカラム全体を選択します。

すると下部に「カラム項目を追加」ボタン（＋）が表示されるので、それをクリックしてください。

これで新しいカラムが追加されます。

カラムやリッチカラム全体の選択方法

ここで少し迷いやすいのが、個別のカラムとリッチカラム全体の選択です。

個別のカラムやリッチカラム全体を選択する方法は2つあります。

1つ目は、ブロックツールバーを使う方法です。カラム内の画像やテキストをクリックすると、上にブロックツールバーが表示されます。

左端のアイコンをクリックすると個別のカラムが選択されます。（カラムが青い枠線で囲まれます）

もう一度クリックするとリッチカラム全体を選択できます。（全体が青い枠線で囲まれます）

2つ目は、投稿画面下部の階層構造を使う方法です。

画像やテキストを選択すると投稿画面の下に階層構造が表示されるので、選択したい部分のテキストをクリックして選択しましょう。

カラム数を増やす操作自体は簡単ですが、最初は「どこを選択しているか」が少しわかりにくいことがあります。

うまく追加できないときは、まずリッチカラム全体が選択できているかを確認するとスムーズです。

各カラムにコンテンツを入れる方法

リッチカラムを追加したら、次は各カラムの中にコンテンツを入れていきます。

カラムの上にカーソルを置いてクリックすると、「ブロックを追加」ボタン（＋）が表示されます。

そこをクリックして、段落、画像、見出しなど、入れたいブロックを追加しましょう。

たとえば、左側のカラムに画像、右側のカラムにテキストを入れると、商品説明や手順紹介のようなレイアウトを作れます。

横並びで見せたい内容があるときは、この形がとても使いやすいです。

操作自体は通常のブロック追加とほぼ同じで簡単です。

まずは2カラムのまま、片方に画像、もう片方に文章を入れるところから試すと、リッチカラムの使い方がつかみやすくなります。

SWELLのリッチカラムで設定できる項目

ここまでリッチカラムブロックの基本的な使い方を説明してきました。

ここからは、実際のブログデザインで活用できる具体的な機能を見ていきましょう。

リッチカラムでは、主に次のような設定ができます。

順番に手順を見ていきましょう。

レイアウトの設定

まず、リッチカラムではデバイスごとに列数を設定できます。

PC、タブレット、スマホで最適な表示を実現したいときに便利な機能です。商品一覧などでもよく使います。

設定するときは、まずリッチカラム全体を選択します。サイドバーに表示されている「設定」の「列数」から設定できます。

ご覧の画像では、サイドバーの「列数」の一番上にあるPCの列数が「3」になっているので、PC上では3列になります。

また、「列数」の一番下のスマホの列数は「１」になっているのでスマホ表示にすると1列になります。

デバイスごとに見やすい並び方にしたいときは、まずこの設定を使いましょう。

スタイルの設定

続いて、スタイルの設定です。

スタイルは以下の3種類があります。

• デフォルト
• ボーダー
• シャドウ

リッチカラム全体を選択すると、サイドバーに「スタイル」が表示されます。

「スタイル」から好みのスタイルを選択すると、カラム全部にそのスタイルが適用されます。

シンプルに見せたいならデフォルト、枠をはっきり見せたいならボーダー、立体感を出したいならシャドウという使い分けができます。

＼タブをクリックして、スタイルを確認してみましょう／

カラム幅を調整する方法

各カラムの横幅は、自由に設定できます。

コンテンツの重要度に応じて、メリハリのある配置にしたいときに便利です。

まず前提として、PCとスマホの列数が「2」になっている状態を想定してください。

そのうえで、個別のカラムを選択すると、サイドバーに「カラム横幅」が表示されます。

ここでカラムの横幅を設定します。

たとえば、PCで1段目のカラム2つを以下のように設定できます。

すると、右側を広く使ったレイアウトになります。

＼こちらはPCでの表示です。タブをクリックしてみてください／

さらに、スマホでは次のように設定することもできます。

＼スマホでの表示は、こちらのタブをクリック／

このように、デバイスごとに列数と列幅を組み合わせると、自由自在なデザインが可能になります。

カラム横幅設定の右側のアイコンは何のためにある？

なお、カラム横幅設定の右側にあるアイコンは、横幅をデバイスごとに個別指定するか、同じ数値をまとめて設定するかを切り替えるものです。

右の画像のように、PC・タブレット・スマホのいずれかに横幅を入力すると、すべてに同じ数値を設定する使い方もできます。

余白を設定する方法

リッチカラムでは、カラム間の余白 と カラム内の余白（パディング）の両方を設定できます。

カラム間の余白

まず、カラム間の余白は上下と左右で設定できます。

最初にリッチカラム全体を選択すると、サイドバーに「カラム間の余白」が表示されるので、ここで設定しましょう。

サンプルでは、以下のようなパターンで設定できます。

＼タブをクリックして、余白の表示を確認しましょう／

余白の広さで見え方が変わるので、画像やカードを並べるときは、実際の表示を見ながら調整するとわかりやすいです。

カラムのパディング設定

次に、カラムのパディング設定です。カラムのパディングとは、カラムの内側の余白のことをいいます。

こちらは、個別のカラムを選択した状態で設定します。

サイドバーに「余白設定」が表示されるので、「カスタムパディングを使用する」をONにすると、カラム内の余白を設定できるようになります。

「カスタムパディングを使用する」をONにすると、カラムの余白設定ができるようになります。

＼パディングを使った場合と使わない場合の違いは、ここをクリック／

内側に余白をつけると、画像や文章が詰まりすぎず、見やすいレイアウトにしやすくなります。

特に、ボーダーやシャドウのスタイルを使うときは、パディングもあわせて調整すると整って見えます。

スマホ・タブレット表示を調整する方法

リッチカラムの大きな特徴のひとつが、スマホ・タブレット・PCごとに表示を調整できることです。

列数については「レイアウトの設定」で見たように、デバイス別に列数を変更でき並び方を変えられます。

さらに必要に応じて、個別のカラムを選択して「カラム横幅」を調整すれば、デバイスごとの見せ方をより細かく整えられます。

つまり、列数の設定 と カラム横幅の設定 を組み合わせれば、スマホやタブレットでも見やすいレイアウトを作りやすくなるということです。

横スクロールを設定する方法

横スクロール機能は、CSSなしでも横スクロールできる便利な機能です。

横スクロールはサイドバーから簡単に設定できます。

SWELLのリッチカラムの活用例

リッチカラムは、実際のブログ運営で使いやすい場面が多いのも魅力です。

ここでは、特に使いやすい活用例を4つ紹介します。

料金表・比較表を見やすく並べる

リッチカラムは、料金表や比較表を見やすく並べたいときに便利です。

通常の文章だけで比較しようとすると、項目ごとの差がわかりにくくなりがちです。

その点、リッチカラムならプランごと、サービスごとに横並びで整理できるので、違いがひと目で伝わりやすくなります。

たとえば、

• プラン名
• 料金
• 主な機能
• おすすめの人

といった内容をカラムごとに分けると、比較しやすいレイアウトを作れます。

特に、PCでは横並び、スマホでは列数を減らして見やすくする 使い方と相性がいいです。

料金表や比較表をわかりやすく見せたいときは、リッチカラムを使うと整理しやすくなります。

画像とテキストを横並び・縦並びで配置する

画像と説明文を横並びや縦並びで見せたいときにも、リッチカラムで簡単に作成できます。

たとえば、

• 上に画像、下に説明文
• 左にスクリーンショット、右に操作手順
• 左に商品画像、右に特徴やメリット

といったレイアウトが簡単に作れます。

この形にすると、画像を見ながら説明を読めるので、内容が伝わりやすくなります。

操作方法の解説や、商品・サービス紹介のパートでは特に使いやすいです。

また、スマホではそのままだと見づらくなることもあるため、列数や横幅を調整しながら表示を整える と、より読みやすくなります。

ボタンや訴求エリアを並べて見せる

リッチカラムは、ボタンや訴求エリアを並べて見せたいときにも便利です。

たとえば、

• 「詳しく見る」と「申し込む」のボタンを並べる
• 予約への導線を2〜3個並べる
• おすすめサービスをカード風に並べる

といった見せ方がしやすくなります。

縦に長く並べるよりも、横並びにしたほうが選びやすい場面は多いです。

特に、読者に次の行動をわかりやすく示したいときは、訴求エリアを整理して見せることでクリックしやすくなります。

ただし、要素を詰め込みすぎると逆に見づらくなることもあります。

ボタンや訴求エリアを並べるときは、数を増やしすぎず、余白もあわせて整える のがポイントです。

写真とテキストを自由にレイアウトする

リッチカラムならば、カラムの配置やカラムの表示割合、余白などを自由に調整してレイアウトできます。

たとえばこんなレイアウトも可能です。

SWELLのリッチカラムを使うときの注意点

リッチカラムは便利な機能ですが、設定項目が多いぶん、最初は少し迷いやすいところもあります。

ここでは、初心者の方がつまずきやすいポイントを先に押さえておきましょう。

スマホでは見え方が変わることがある

リッチカラムは、PC・タブレット・スマホで列数や横幅を変えられるのが大きな特徴です。

その反面、PCではきれいに見えていても、スマホでは見え方が変わることがあります。

たとえば、PCでは横並びで見やすくても、スマホでは1列表示になったり、思っていたより詰まって見えたりすることがあります。

特に、画像・文章・ボタンなどを複数並べている場合は、画面幅が狭くなると印象が変わりやすいです。

そのため、リッチカラムを使うときは、PCだけでなくスマホ表示も前提にして列数や横幅を設定することが大切です。

「PCでは3列、スマホでは1列」のように、デバイスごとに無理のない見せ方にすると整いやすくなります。

詰め込みすぎると逆に読みにくくなる

リッチカラムは自由度が高いので、いろいろな情報を1か所にまとめたくなります。

ただ、便利だからといって要素を入れすぎると、逆に読みにくくなることがあります。

たとえば、1つのカラム内に文章を詰め込みすぎたり、複数の画像やボタンを狭い幅の中に並べすぎたりすると、見た目が窮屈になってしまいます。

特にスマホでは、情報量が多いほど読みづらさが目立ちやすいです。

リッチカラムを使うときは、見せたい情報を絞ることも大切です。

比較表なら項目を増やしすぎない、訴求エリアなら選択肢を並べすぎない、といった意識を持つだけでも見やすくなります。

また、余白やパディングをうまく使うと、同じ内容でもかなり読みやすくなります。

「たくさん入れられる」よりも、「見やすく整理する」ために使うと失敗しにくいです。

表示確認はプレビューで行うのがおすすめ

リッチカラムを使うときは、設定したあとに必ずプレビューで表示確認するのがおすすめです。

編集画面では問題なく見えていても、実際の表示では余白の入り方や横幅の見え方が少し違って見えることがあります。

特に、デバイスごとの列数設定、カラム横幅、横スクロール表示などは、完成画面で確認したほうがわかりやすいです。

リッチカラムは細かく調整できるので、最後の見え方チェックまでして完成と考えるようにしましょう。

SWELLのリッチカラムに関するよくある質問

最後にSWELLのリッチカラムに関するよくある質問をまとめました。

まとめ｜リッチカラムブロックで理想のレイアウトを実現しよう

今回は、SWELLのリッチカラムの使い方や設定方法、活用例について解説しました。

この記事で紹介した内容を、あらためてまとめると次の5つです。

SWELLのリッチカラムは、難しいコードを書かなくても、見やすいレイアウトを作りやすい機能です。

そのため、ブログ初心者でも、画像と文章を横並びにしたり、比較表を整理したりしやすいのが大きなメリットです。

レイアウトが整うと、読者は情報を理解しやすくなります。

結果として、記事全体の見やすさが上がり、読みやすいブログに近づきます。

まずはこの記事の手順を参考にしながら、画像とテキストを横並びにするようなシンプルな使い方から試してみてください。

少し調整するだけでも、読者にとって見やすい記事にしやすくなりますよ。

SWELLをまだ使うか迷っている方や、ほかの機能もあわせて知りたい方は、以下のレビュー記事も参考にしてみてください。

今回はここまでです。

最後まで読んでいただきありがとうございました。