SWELLでボタンを横並びで配置する3つの型！スマホ対応も

ボタンを横に2つ並べたいのに、Swellで作ったボタンがどうしても縦に並んでしまうことはありませんか。

結論から言うと、「カラム」「横並びブロック」「リッチカラム」を目的に合わせて使い分ければ、Swellのボタンを横並びにしたいときの悩みはほとんど解消できます。

Swellでボタンを横並びにしたい人がつまずくポイント

Swellボタンを横並びにするときの基本イメージ整理

Swellでは、ボタンを横に並べる方法がいくつか用意されています。それぞれ得意分野が違うので、先にざっくり全体像を押さえておくと、このあと紹介する手順が理解しやすくなります。

代表的な「ボタンの横並び」の方法を、次の表にまとめました。

やりたいこと	主に使うブロック	難易度の目安	向いているシーン
ボタンを2つだけ横並びにしたい	カラムブロック＋ボタンブロック	やさしい	記事末の問い合わせボタンなど
ボタンを3つ以上きれいに整列したい	横並びブロック＋Swellボタン	ふつう	料金表の下にボタンを並べるとき
画像やテキストもセットでおしゃれに並べたい	リッチカラム＋Swellボタン	ややむずかしい	サービス紹介やLP風のセクション

この記事を読みながら、「どんな見た目にしたいのか」「どこにボタンを置きたいのか」をイメージして、自分に合いそうな方法を選んでいきましょう。

Swellテーマでボタンが縦並びになってしまう主な原因

Swellでボタンを横に並べたいのに縦にしか並ばないときは、だいたい次のどれかが原因になっていることが多いです。

どれに当てはまりそうか、なんとなくイメージできたでしょうか。このあとで、実際の横並びパターンと具体的な設定方法を順番に見ていきます。

Swellボタンを横並びにする3つの基本パターン

カラムブロック＋ボタンブロックで横並びにする

いちばん基本となるのが、カラムブロックの中にボタンブロックを入れて横並びにする方法です。私も、記事の最後に「お問い合わせ」と「資料ダウンロード」の2つのボタンを並べたいときは、ほとんどこのやり方だけで済ませています。

手順は次のようなイメージです。

• 段落ブロックの「＋」アイコンから「カラム」を追加する
• 「2カラム」「3カラム」など、使いたい列数を選ぶ
• それぞれのカラムの中に「ボタン」ブロック（Swellボタン）を入れる
• ボタンのテキストとリンク先を設定する
• カラムブロック全体を選択して、中央寄せや幅を調整する

カラムを使ったときのPCとスマホの表示イメージを、表に整理しておきます。

項目	PC表示	スマホ表示（標準設定）
2カラム	ボタンが左右に2つ横並び	縦に1列で積み重なる
3カラム	ボタンが3つ横一列に並ぶ	1列または2＋1列で縦に積み重なる
メリット	操作がシンプルで調整しやすい	行間が広く押しやすい

カラムブロックはとても汎用性が高く、慣れておくとどんなレイアウトにも応用しやすいです。まずはここから押さえておくと、後のカスタマイズも楽になります。

横並びブロックでボタンをきれいに整列させる

Swell独自の「横並び」ブロックを使うと、複数の要素を均等に配置しやすくなります。ボタンを3つ以上並べたいときや、アイコンやテキストとボタンをひとまとめにして横に並べたいときに、特に使いやすいブロックです。

横並びブロックを使うときの大まかな流れです。

• 本文に「横並び」ブロックを追加する
• 横並びの中に「ボタン」ブロックを必要な数だけ入れる
• 横並びブロックの設定で「均等配置」や「中央寄せ」を選ぶ
• 必要に応じて背景色や余白を調整する

特徴を簡単に表にまとめると、次のようなイメージです。

項目	内容
配置	ボタンを均等に並べやすく、見た目がそろいやすい
装飾	背景色や枠線、角丸などをブロック全体にまとめて設定できる
向き不向き	3つ以上のボタンや、ボタン以外の要素も含めて横に整列したいときに向いている

カラムブロックよりも「ひとかたまりのパーツ」として扱いやすいので、料金表の下や、特徴を3つ並べるセクションなどに横並びブロックを使うと、デザインにまとまりが出やすくなります。

リッチカラムでデザイン性の高いボタン横並びを作る

リッチカラムは、画像や見出し、リード文、ボタンなどを一つのセットとして配置できる、Swellのオリジナルブロックです。カードのようなレイアウトを横に並べたいときに活躍します。

例えば、次のような構成でリッチカラムを使うと、プラン比較のセクションが簡単に作れます。

• 上部にサービスやプランの画像
• その下にプラン名や料金
• 簡単な説明文
• 最後に「詳しく見る」や「申し込む」ボタン

これを2～3カラムで並べるだけで、LPの一部のような見た目になります。ほかの方法との違いも、表にしておきます。

方法	デザイン性	操作のやさしさ	向いている用途
カラム＋ボタン	シンプルで最小限	とてもかんたん	記事末にちょっとしたCTAを置きたいとき
横並びブロック＋ボタン	そこそこおしゃれ	ふつう	料金表や特徴を並べて見せたいとき
リッチカラム＋ボタン	もっともデザイン性が高い	ややむずかしい	サービス紹介やランディングページのセクション

「とりあえず横に並んでいればいい」段階を超えて、サイト全体の世界観を整えたいと感じてきたら、リッチカラムを少しずつ取り入れていくと一気に見た目の印象が変わります。

スマホ表示でのSwellボタン横並びのポイント

「モバイルでは縦に並べる」の設定と使い分け

カラムブロックやリッチカラムをクリックすると、右側の設定パネルに「モバイルでは縦に並べる」といったチェック項目が表示されます。このオンオフによって、スマホ表示のときに横並びのままにするか、縦に積み重ねるかが切り替わります。

それぞれの向き不向きを、表に整理します。

スマホ表示の設定	向いているケース	メリット	デメリット
縦に並べる	誤タップを減らしたいとき	ボタンが大きくなり、指で押しやすい
横に並べる	選択肢が少ないとき（2つ程度）	画面をコンパクトに使え、情報量を詰め込みやすい
			文字が小さくなったり、押しにくくなったりしやすい

Swellのボタンをスマホでも横に並べたい気持ちはよく分かりますが、タップのしやすさが損なわれると、せっかく用意した導線も活かしきれません。特に申し込みボタンなど重要度が高いものは、あえてスマホでは縦に並べて見やすさと押しやすさを優先するのも一つの考え方です。

文字数・余白・サイズの調整で崩れを防ぐ

スマホで表示したときに、ボタンの文字が途中で改行されたり、2行になってバランスが悪く見えたりすることもあります。デザインの前に、まずテキストの長さから見直してみると、意外とすんなり解決することが多いです。

それでも崩れる場合は、ボタンブロックの設定や、必要に応じてCSSでパディングやフォントサイズを少しずつ調整してみてください。CSSを触るときは、次のトラブルシューティングの章も合わせて確認しておくと安心です。

クリックされる横並びボタンの配置と文言のコツ

設置場所別に見るSwellボタン横並びのおすすめ配置

よくある設置場所ごとに、私が実際によく使っている横並びボタンのパターンをまとめました。

設置場所	横並びボタンの例	使うブロック	ポイント
記事の最後	「お問い合わせ」「資料ダウンロード」	カラムブロック＋ボタン	2つの行動を並べて提示し、迷わせない
記事の途中	「詳しく読む」「事例を見る」	横並びブロック＋ボタン	読者の次の一歩をわかりやすく示す
ヘッダー	「無料相談」「予約する」	ブログパーツ＋横並びブロック	どのページでも常に目に入る導線を作れる
メインビジュアル直下	「サービスを見る」「料金を見る」	リッチカラム＋ボタンまたは横並び	サイトで一番してほしい行動をはっきり示す

特にヘッダー部分の横並びボタンは、すぐに行動したい人を逃さないための強力な導線になります。「とりあえず相談したい」「今すぐ予約したい」というユーザーは、わざわざ記事の最後までスクロールしてくれないことも多いので、目につきやすい場所に並べておくと効果的です。

テキストと色でクリック率を上げるコツ

ボタンの横並びレイアウトが整ってきたら、次はテキストと色に目を向けてみてください。見た目は同じでも、テキストと色の組み合わせだけでクリック率が変わることはよくあります。

横並びにしたボタン同士の関係性も意識すると、よりクリックされやすくなります。「すぐに行動したい人向けのボタン」と「もう少し情報を知りたい人向けのボタン」のように役割を分けると、読者が自分に合う選択肢を選びやすくなります。

トラブルシューティング｜Swellボタンが横並びにならないとき

よくあるチェックポイント一覧

思ったように横並びにならないときは、まず次の点を見直してみるのがおすすめです。

• ボタンがカラムや横並びブロックの中にきちんと入っているか
• カラム数が2以上になっているか
• ブロックの入れ子構造が複雑になりすぎていないか
• スマホ側の表示で、縦並びと横並びの設定が意図と合っているか
• 独自のCSSが幅や余白に影響していないか

症状ごとに、原因とチェックする場所を表に整理しました。

症状	考えられる原因	確認・対処
ボタンがずっと縦に並ぶ	カラム数が1のままになっている	カラムブロックの列数を2以上に変更する
スマホだけレイアウトが崩れる	モバイル設定と文字数のバランスが悪い	文言を短くしつつ、縦横の表示設定も見直す
ボタンの幅がバラバラになる	それぞれのボタンに個別の幅指定をしている	カラムや横並びブロック側で幅をそろえる
片方のボタンだけ改行される	ボタン同士の文字数の差が大きすぎる	テキスト量のバランスを整えて、文字数を近づける

1つずつ原因をつぶしていけば、多くのケースはそれほど時間をかけずに直せるはずです。

CSSカスタマイズを入れている場合の注意点

すでにテーマ全体にCSSカスタマイズを追加している場合は、その影響でSwellのボタンの横並びがうまくいかなくなることもあります。特に、次のような指定には注意してください。

• .wp-block-button や .wp-block-columns に対して幅やdisplayを強く指定している
• marginやpaddingを大きく取りすぎている
• メディアクエリでスマホ時の幅やフォントサイズを極端に変更している

「前はうまく表示されていたのに、最近急に崩れるようになった」という場合は、直近で追加したCSSを一度コメントアウトしてみてください。それで問題が解消されるようなら、そのコードのどこかに原因がある可能性が高いです。

よくある質問（Swellボタンを横並びにするときの疑問）

Q1. Swellのボタンを横並びにするとき、カラムと横並びブロックのどちらを使うべきですか？

どちらも正解で、目的によって使い分けるイメージです。シンプルに2つのボタンを横に並べたいだけなら、カラムブロック＋ボタンブロックがいちばん手軽で分かりやすいと思います。3つ以上のボタンをきれいに整列させたいときや、テキストやアイコンも含めてまとめて整えたいときは、横並びブロックの方が使いやすいです。まずはカラムで慣れてから、必要に応じて横並びブロックやリッチカラムを試してみると、迷いにくくなります。

Q2. スマホでもSwellのボタンを横並びにしてしまって大丈夫でしょうか？

スマホでもボタンを横並びにすること自体は問題ありませんが、タップしやすさとのバランスを見て判断する必要があります。ボタン同士の幅が狭くなりすぎると誤タップが増えてしまうので、重要なアクションのボタンはスマホでは縦並びにしておく、という選択も現実的です。実際に自分のスマホで触ってみて、「押しやすいかどうか」を軸に決めるのがおすすめです。

Q3. Swellのボタンの横並びをもっとおしゃれにしたいのですが、何から手をつければいいですか？

いきなり複雑なCSSを書き始めるより、まずは色と余白から整えるのがおすすめです。Swellのボタン設定で、サイトのブランドカラーに合った色とホバー時の色をそろえるだけでも印象が変わります。そのうえで、横並びブロックやリッチカラムを使って、ボタン周りに適度な余白をとってあげると、息苦しさのないレイアウトになります。標準の機能で整えきってから、どうしても足りない部分だけCSSで微調整する、という順番が失敗しにくいです。

まとめ｜Swellボタンを横並びにするポイントと最初の一歩

ここまでのポイントを整理します

今日からできる最初の一歩として、まずは一つ、記事の最後にカラムブロックとボタンブロックを使って2つのボタンを横に並べてみてください。

そこでPCとスマホの両方の見え方をチェックしながら、この記事で紹介した横並びブロックやリッチカラムのパターンも順番に試していけば、自分のサイトにしっくりくる横並びレイアウトが自然と見つかっていくはずです。