【SWELL】リッチカラムでスマホの列数を決める手順
SWELLには、WordPress標準の「カラム」のほかに、SWELLのブロックの「リッチカラム」があります。どちらも、文章や画像を横に並べるときに使います。違いは、列の数を決める場所と、スマホでの並べ方です。
この記事では、リッチカラムを入れて、スマホで2列に並ぶようにするところまでを扱います。カラム項目の中身のデザインは扱いません。
手順の要点：リッチカラムを入れて、「設定」→「列数」のスマホの欄を2にする。
この記事でできること
- リッチカラムと標準のカラムの違いがわかる
- リッチカラムの「列数」を、パソコン・タブレット・スマホごとに決められる
- スマホ表示を、プレビューで確かめられる
スマホで見ると、横に並べたものが1列になってしまいます。
リッチカラムなら、パソコン・タブレット・スマホで、それぞれ列の数を決められます。スマホでも2つずつ並べたいときに使います。
目次
前提
- 環境：WordPress 7.1、テーマはSWELL（2026年11月時点の、ブロックエディターの画面です）
- 必要な権限：投稿を編集できる権限
- 所要時間の目安：10分ほど
- 先に用意するもの：編集中の投稿（下書きでかまいません）
リッチカラムと標準のカラムの違いを、編集画面で確かめた範囲でまとめます。
| 項目 | カラム（WordPress標準） | リッチカラム（SWELL） |
|---|---|---|
| 列の数を決める場所 | 中に入れる「カラム」の数で決まる | 右サイドバーの「設定」→「列数」。パソコン・タブレット・スマホごとに、1から8まで選べる |
| スマホでの並び | 初期は1列。「カラム設定」の「モバイルで2列に表示する」で2列にできる | 「列数」のスマホの欄で決める。初期値は1列 |
| スタイル | デフォルト／ボーダー：グレー／ボーダー：メインカラー／シャドウ | デフォルト／ボーダー／シャドウ |
| 列のあいだの余白 | この記事では扱いません | 「設定」の「カラム間の余白 (MARGIN)」で、左右と上下を別々に決める |
| そのほか | — | 「横スクロールで表示する」のオン・オフがある |
パソコン・タブレット・スマホで列数を別々に決めたいときは、リッチカラムを使います。スマホで2列に並べるだけなら、標準のカラムの「モバイルで2列に表示する」でも足ります。
リッチカラムを入れる
この手順で、本文にリッチカラムが入ります。
- 投稿の編集画面で、リッチカラムを入れたい場所の、空の段落をクリックします。
- 左上の青い「＋」ボタンをクリックします。
- 検索欄に「リッチカラム」と入力します。
- 表示された「リッチカラム」をクリックします。
- リッチカラムの中に「カラム項目」が入ったことを確かめます。スマホで2列に並べて確かめるには、カラム項目が2つ以上必要です。足りないときは、カラム項目を選び、ブロックの「⋮」メニューの「複製」で増やします。
スマホの列数を2にする
この手順で、スマホで2列に並びます。
- リッチカラムの外枠をクリックして、リッチカラムを選びます。
- 画面右上の、サイドバーを開くボタンをクリックします。
- サイドバーの上にある「ブロック」タブをクリックします。
- 「設定」の中の「列数」を見ます。3つの欄が、上から、パソコン・タブレット・スマホのアイコンの順に並んでいます。初期値は、上から2・2・1です。
- 一番下の、スマホのアイコンの欄を「2」にします。スライダーを動かすか、右の入力欄に2と入れます。
下は、このページに実際に入れたリッチカラムです。列数は、パソコン3・タブレット3・スマホ2にしています。スマホで見ると、2列で折り返します。
制作
ホームページを作る
運用
更新を続ける
集客
見つけてもらう
できたか確かめる
次の3つで確かめます。
- サイドバーの「列数」の、スマホのアイコンの欄が「2」になっていること
- 画面右上の「表示」ボタン（パソコンの形のアイコン）→「モバイル」で、カラム項目が2列に並ぶこと
- 「表示」→「デスクトップ」に切り替えても、パソコンの列数が変わっていないこと
よくあるつまずき
| 症状 | 原因 | 直し方 |
|---|---|---|
| スマホで2列にならない | カラム項目が1つしかない | カラム項目を「複製」で増やす |
| 列数を変えたのに、思った画面が変わらない | 3つの欄の、ちがう欄を変えた | 上からパソコン・タブレット・スマホの順なので、一番下の欄を変える |
| 標準のカラムで、スマホ2列にしたい | 標準のカラムは、設定の場所がちがう | 「カラム」を選び、サイドバーの「カラム設定」の「モバイルで2列に表示する」を使う |
まとめ
やること：リッチカラムを入れて、「設定」→「列数」のスマホの欄を2にする
確かめ方：「表示」→「モバイル」で、2列に並ぶことを見る
つまずいたら：カラム項目の数と、3つの欄のどれを変えたかを見直す
次の一歩
SWELLのほかの設定は、公開済みの次の記事で扱っています。
