SWELLのリッチカラムをスマホで2列にしたいのに、1列のままになったり、一部だけ縦に並んだりしていませんか。
最初に確認したいのは、スマホ用の列数と、リッチカラムの中にある「カラム項目」の数です。画像を6枚置いていても、カラム項目が6つあるとは限りません。
この記事では、列数を設定するブロックと、画像の入れ方を順に確認します。対象は、SWELLを有効にしたサイトの投稿・固定ページを編集できる方です。操作はPCのWordPress編集画面で行います。
初回の操作・完成例は2026年9月24日にWordPress 7.1.2／SWELL 2.18.0で確認しました。2026年10月18日にはWordPress 7.1.3／SWELL 2.19.0で、親ブロックの選択・空項目の追加・保存と表示の画面を再確認しています。バージョンにより表示位置や項目名が異なる場合があります。
公開済み記事の「保存」は公開ページにも反映されます。まだ反映したくない場合は、別の下書きで同じ構成を試してください。対象記事を編集・更新できない場合は、サイトの管理者へ依頼します。
症状ごとの確認先
全体が1列なのか、一部の画像だけがまとまるのかで、先に見る場所が変わります。近い症状から確認してください。
- 全体が1列になる：スマホ用の列数を確認する。
- 2枚ずつ縦にまとまる・並び順が違う：カラム項目の数と中の画像を確認する。
- 一部だけ横幅いっぱいになる：カラム項目ごとの横幅を確認する。
- 内容が右へ続く：横スクロールの設定を確認する。
内容そのものがスマホで消えている場合は、並び方とは別の確認が必要です。「SWELLでスマホだけブロックが表示されない」の記事で、デバイス制限と親ブロックの設定を確認してください。
設定を一つ変えるたびに表示を確認し、目的どおりになったら、その先の設定変更は不要です。
列数を設定するブロック
列数を確認するときは、画像や個々のカラム項目ではなく、それらをまとめているリッチカラム全体を選びます。
リッチカラムを外側の箱、カラム項目をその中の小さな箱と考えると、選び分けやすくなります。小さな箱の中には、画像や文章などを入れます。
リストビューで選択対象を確認
WordPress管理画面の「投稿」または「固定ページ」の一覧から対象のタイトルを開きます。編集画面の左上にある「ドキュメント概観」を押し、「リストビュー」を選びます。本文を直接クリックして選びにくいブロックも、一覧の名前から選択できます。
枠内の「ドキュメント概観」を開き、「リストビュー」でブロックの一覧を表示します。
一覧のブロック名の左にある矢印を押すと、中のブロックが開きます。対象の「カラム項目」より左へ一段ずれた「リッチカラム」の名前を選びます。「画像」や「カラム項目」を選んだままにしないことがポイントです。右側に設定が見えない場合は、右上の「設定」を開いて「ブロック」タブを選んでください。
枠内が外側のリッチカラムです。その下に字下げして並ぶのがカラム項目です。この画像は選択位置を示すため、項目が2つの確認用下書きを使っています。
右側の「ブロック」設定にある「列数」で、スマートフォンのアイコンが付いた一番下の数を2にします。上からPC・タブレット・スマホの順です。入力欄から別の場所へ移り、スマホ用の値が2になっていることを確認します。PCの列数は目的に合わせた値のままで構いません。
リッチカラム全体を選ぶと、端末別の列数を設定できます。枠内がスマホ用で、この例はPCが3列、スマホが2列です。
右上の「保存」（下書きなら「下書き保存」）を押し、保存完了の通知を確認します。次に、画面形のアイコンの「表示」から「新しいタブでプレビュー」を選び、保存後のページを開きます。
上は編集画面右上の「表示」と「保存」、下は「表示」のメニューです。同じ画面の2か所を切り出しています。「新しいタブでプレビュー」で保存後のページを開きます。
編集画面内で幅を切り替える場合は「表示」→「モバイル」を使います。これはスマホ幅の確認で、スマートフォン実機の操作確認とは別です。公開済みなら、公開URLもスマホで開いて確認してください。下書きを別端末でプレビューするには、その端末でも閲覧権限のあるアカウントでログインが必要です。
スマホ幅では横2列、PCでは目的の列数になり、内容の欠落や重複がなければ完了です。編集画面と公開ページの結果が違う場合は、保存完了を確かめて公開ページを再読み込みします。目的どおりになったら、以降の変更は不要です。
リストビューの基本操作は、WordPress公式の「リストビュー」でも確認できます。
「カラム」と「リッチカラム」の区別
一覧の名前が「カラム」なら、この記事で扱うSWELLの「リッチカラム」とは別のブロックです。同じ名前の設定が見当たらないからといって、画像を削除したり、CSSを追加したりする必要はありません。まず、どちらのブロックを使っているかを確かめましょう。
リッチカラムで試す場合は、既存の内容を残したまま、別の場所に追加して並び方を確認すると戻しやすくなります。ブロックの使い分けは「SWELL専用ブロックの使い方」でも紹介しています。
カラム項目と中の画像
列数を2にしても画像が2枚ずつ縦にまとまる場合は、画像の枚数ではなく、カラム項目の数を確認します。横に並べる単位はカラム項目です。
画像6枚とカラム項目6つの違い
たとえば、6枚の画像をスマホで横2枚ずつ・3段に並べたい場合は、6つのカラム項目にそれぞれ1枚ずつ入れます。一方、3つのカラム項目に2枚ずつ入れた場合、各項目の中の2枚は一つのまとまりです。列数の設定だけでは、中の画像が別々のカラム項目に分かれません。
どちらもスマホ用の列数は2です。外側の枠はカラム項目、中の数字は画像を表します。1枚ずつ分けた左側は、左から右へ、上の段から下の段へ画像1〜6が並びます。
リストビューでリッチカラムを展開し、その内側に表示される「カラム項目」を数えます。カラム項目も展開すると、中の画像や段落が表示されます。画像の枚数とカラム項目の数を分けて確認しましょう。
カラム項目が3つあり、それぞれの中に画像が2枚ずつ入った例です。枠内の2枚は一つのカラム項目に属しています。
SWELL公式フォーラムにも、6つに増やしたつもりが、実際には3つのカラム項目の中に画像が2枚ずつ入っていた相談例があります。これは2022年の個別事例で、現在のSWELLに同じ不具合があることを示すものではありません。確認の参考として、選んでいたブロックと増えた項目を照らし合わせましょう。
1枚の画像と説明文を一組のカードにしたい場合は、同じカラム項目に入れて構いません。「画像は必ず1項目に1枚」ではなく、横に並べたい一組ごとにカラム項目を分けると判断できます。
画像を別のカラム項目へ移す手順
ここでは、3つのカラム項目に2枚ずつ入っている画像を、6つのカラム項目に1枚ずつ分けます。画像を1枚ずつ横に並べたい場合だけ行ってください。作業前に、元の並びと設定をスクリーンショットなどで控えます。
リッチカラム全体を選び、本文側のリッチカラムの一番下までスクロールします。横長の＋（カラム項目を追加）を3回押し、空のカラム項目を3つ追加します。元の3つと合わせて計6つになったことをリストビューで確認します。段落内の＋は別のブロックを入れるボタンなので、区別してください。
枠内の横長の＋が「カラム項目を追加」です。位置が分かるよう中身を空にした確認用の例です。実際の画像や文章は消さず、リッチカラムの末尾へ移動してください。
リストビューで移したい「画像」ブロックを選び、その行の三点メニューから「切り取り」を押します。移し先の空のカラム項目を選び、本文側の「ブロックを選択するには…」と表示された段落の入力位置をクリックして貼り付けます（WindowsはCtrl＋V、Macは⌘＋V）。画像2・4・6を、追加した3つの項目へ1枚ずつ移します。移した画像が元の項目からなくなり、移し先に1枚あることを、その都度確かめてください。
上は移し先のカラム項目内にある段落、下は本文側の入力欄です。同じ画面の2か所を切り出しています。入力欄をクリックして画像を貼り付けます。
別の場所に貼り付いた場合は、操作を重ねず、左上の「元に戻す」を1回ずつ押して元の配置へ戻します。保存済みの変更を戻した場合は、戻した状態を再び保存してください。元に戻す操作が使えない場合は、変更前の記録を添えてサイトの管理者へ相談します。
移動直後は画像1・3・5・2・4・6の順になります。リストビューで「カラム項目」を選び、本文側に出るツールバーの「左に移動」「右に移動」で項目ごと動かします。この例では、画像2の項目を左へ2回、画像4の項目を左へ1回移すと、1〜6の順になります。各項目に画像が1枚ずつあり、欠落・重複がないことも確認してください。
6つのカラム項目に画像を1枚ずつ入れた例です。リストビューを展開して、項目数と中身を確認します。
右上の「保存」（下書きなら「下書き保存」）を押し、完了通知を確認してから「表示」→「新しいタブでプレビュー」を開きます。スマホ幅で横2枚ずつ・3段になり、左から右へ、上の段から下の段へ画像1〜6が並ぶことを確認します。PCでも枚数・順番・説明文を確認し、画像の欠落や重複がなければ完了です。公開済みの場合は公開URLでも確認してください。
保存後のスマホ幅のプレビューです。6つのカラム項目が2列×3段になり、左から右へ、上の段から下の段へ画像1〜6が並んでいます。
カラム項目を複製する場合
同じ構成のカードを増やす場合は、「カラム項目」の三点メニューから「複製」を選ぶ方法もあります。項目の中の画像や文章も一緒に複製されるため、不要な重複を残さないよう確認します。画像だけを複製しても、カラム項目の数は増えません。
上は選択中の「カラム項目」、下はその三点メニューです。同じ画面の選択行とメニューを上下に並べています。選択名を確かめてから「複製」を選びます。
個別の横幅と横スクロール
列数と項目数を確認しても直らない場合に、次の設定を確認します。一部だけ幅が違う場合はそのカラム項目の横幅を、内容が右へ続く場合はリッチカラム全体の横スクロールを確認してください。
幅を変えたカラム項目の確認
対象のカラム項目を選ぶと、右側に「カラム横幅」が表示されます。スマホ用の欄に100％などを指定している場合は、現在の値を控えてから、スマホ用の行の「クリア」で指定を外します。初回の確認環境では、スマホの列数が2でも、個別に100％を指定した項目は1行分の幅を使いました。画像自体の大きさと、カラム項目の横幅は分けて考えてください。
カラム項目のスマホ用横幅に100％を指定した例です。値を控えてから、同じ行の「クリア」で個別指定を外して確認します。
まず一つの設定だけを変え、保存後にスマホとPCの表示を確認します。表示が改善しない場合は元の値へ戻し、どの項目を変えたか分からなくなるのを防ぎましょう。
横に続く表示の確認
内容が横方向に続き、横へ動かして見る表示になっている場合は、リッチカラム全体を選び、「横スクロールで表示する」を確認します。スマホで2列ずつ下へ折り返したいなら、オフの状態と比べましょう。この設定は、列数を示した画面の上部にあります。
意図せず有効になっていた場合だけオフにし、保存後に折り返し方を確認します。改善しなければ元のオンへ戻します。横スクロールするカード一覧を作っている場合は変更不要です。
直らない場合に残す情報
ここまで確認しても目的どおりにならない場合は、変更を重ねる前に、現在の設定と表示を記録し、サイトの管理者や制作担当者へ相談します。次の情報があると状況を伝えやすくなります。
- リストビューで分かるブロックの種類・カラム項目数・各項目の中身。
- スマホ用の列数、個別の横幅、横スクロールの設定。
- 保存後のPCとスマホの表示、使っているWordPressとSWELLのバージョン。
スクリーンショットには、メールアドレスや管理者名など、相談に不要な情報を含めないようにします。なお、この記事の確認では、サイト全体のCSS変更やプラグインの一括停止を最初の操作にはしていません。まず対象のブロックだけで状況を切り分けましょう。
よくある質問
- 最後の1項目だけ残るのは設定ミスですか？
-
カラム項目が奇数なら、2列ずつ並べた最後の段に1項目だけ残ることがあります。5項目なら2・2・1という数になります。項目数と表示を照らし合わせ、数を合わせるためだけに空の項目を足す必要はありません。
- 画像を増やすだけでは2列になりませんか？
-
同じカラム項目の中で画像を増やすだけでは、横に並べるカラム項目は増えません。画像を別々に並べたい場合は、カラム項目を分けて入れます。
- 画像と説明文は別々のカラム項目にしますか？
-
一つのカードとして一緒に動かしたい画像と説明文は、同じカラム項目に入れます。分ける基準はブロックの種類ではなく、横に並べたい内容のまとまりです。
- 最初からCSSで2列に直したほうが早いですか？
-
まずブロックの種類、スマホ用の列数、カラム項目の構成を確認しましょう。画像を一つの項目へまとめて入れていた場合、列数用のCSSを足すだけでは意図した構成にはなりません。
まとめ
SWELLのリッチカラムがスマホで2列にならないときは、次の順で確認します。
- リッチカラム全体を選び、スマホ用の列数を確認する。
- 横に並べたい内容ごとに、カラム項目が分かれているか確認する。
- 一部だけ崩れる場合に、個別の横幅や横スクロールを確認する。
特に、画像の枚数とカラム項目の数は混同しやすいところです。リストビューで入れ方を確かめ、保存後にスマホ・PCの枚数と並び順が意図どおりになったら、作業は完了です。
