SWELLボタンの横並び設定｜縦に並んでしまう原因と3つの解決パターン

SWELLでボタンを設置したのに、なぜか縦に並んでしまった経験はありませんか。横並びにしたいはずが縦に積み重なってしまうのは、SWELLを使い始めた方が最初にぶつかりやすい壁の一つです。

結論から言うと、「カラムブロック」「横並びブロック」「リッチカラム」の3つのブロックを目的に合わせて使い分けることで、SWELLのボタン横並びの悩みはほとんど解消できます。難しいCSSの知識がなくても、エディター上の操作だけで対応できる方法がほとんどです。

この記事では、ボタンが縦に並んでしまう原因から、横並びにする3つのパターン、スマホ表示の調整方法、よくあるトラブルの対処法までを順番に解説します。WordPressブログやサイト制作に取り組み始めた方にも分かりやすい内容でお届けします。

SWELLボタンが縦に並んでしまう主な原因

まずは、ボタンが横並びにならない原因を把握しておきましょう。原因が分かると、どの方法で対処すればよいかが自然に見えてきます。

ボタンを単体で追加していることが一番の原因

SWELLボタンを横並びにするには、「ボタン単体」ではなく、ボタンを包む「コンテナブロック」が必要です。カラムブロックや横並びブロックの中にボタンを入れていない状態では、ボタンは上から下へ縦に積み重なって表示されます。

この仕組みはWordPressのブロックエディターの基本的な動作によるものです。段落や見出しと同じように、ブロック同士は原則として縦に並ぶ仕様になっています。横に並べるためには、専用の「横並び系ブロック」を使ってボタンを収める必要があります。

カラム数や設定の見落としも要因になる

カラムブロックを使っていても、カラム数が1のままになっていると横並びにはなりません。ブロックを追加したときの初期設定がそのままになっていることが多いため、カラム数を2以上に変更されているか確認するとよいでしょう。

また、「モバイルでは縦に並べる」のオプションがオンになっている場合、PC表示では横並びでもスマホでは縦に切り替わります。スマホで確認したときに縦になっていても、設定の問題であることが多く、仕様のバグではありません。

独自CSSが影響していることもある

テーマのカスタマイズでCSSを追加している場合、そのコードがボタンの幅や余白に影響して、横並びのレイアウトが崩れることもあります。特に .wp-block-button や .wp-block-columns に対して幅やdisplayを強く指定している場合は注意が必要です。

「以前は正しく表示されていたのに、最近崩れるようになった」という場合は、直近で追加したCSSをコメントアウトして確認してみてください。それで表示が戻るようなら、そのCSSに原因がある可能性が高いです。

• ボタン単体を置くだけでは横並びにならない
• カラムブロックのカラム数を2以上にする必要がある
• スマホでの縦並びは「モバイルでは縦に並べる」の設定で切り替わる
• 独自CSSの影響を受けている場合は直近のコードを確認する

SWELLボタンを横並びにする3つのパターン

ここでは、目的別に使い分けられる3つの方法を紹介します。まずはカラムブロックを使うシンプルな方法から試してみて、慣れてきたら横並びブロックやリッチカラムへ広げていく流れが分かりやすいです。

パターン1：カラムブロックを使って2つ横に並べる

もっとも手軽な方法が、カラムブロックの中にSWELLボタンを入れる方法です。記事の最後に「お問い合わせ」と「資料ダウンロード」のような2つのボタンを並べたいときに、このやり方がもっとも使いやすいです。

手順は次のとおりです。まず編集画面の「＋」からカラムブロックを追加します。テンプレートの一覧が表示されるので、「50:50」と書かれた2カラムを選択します。続いて左右それぞれのカラムの中にSWELLボタンブロックを入れ、テキストとリンク先を設定すれば完成です。

カラムブロック全体を選択した状態で、右側のパネルから中央寄せや幅の調整もできます。まずはここから試してみると、他の方法との違いも分かりやすくなります。

パターン2：横並びブロックで3つ以上をきれいに整列させる

SWELLには「横並び」ブロックが用意されており、複数の要素を均等に配置しやすい構造になっています。ボタンを3つ以上並べたい場合や、アイコンやテキストとボタンをひとまとめにして横に整列させたい場合に活躍します。

追加したい数だけ横並びブロックの中にSWELLボタンを入れ、配置設定で「均等配置」や「中央寄せ」を選びます。背景色や枠線、角丸などをブロック全体にまとめて設定できるため、料金表の下や特徴を並べるセクションなどでデザインにまとまりが出やすいです。

カラムブロックよりも「ひとかたまりのパーツ」として扱いやすく、ブロック全体のデザインをそろえたい場面で力を発揮します。

パターン3：リッチカラムで画像やテキストとセットで横並びにする

リッチカラムは、画像・見出し・説明文・ボタンなどを一つのセットとして配置できる、SWELLのオリジナルブロックです。カードのようなレイアウトを横に並べたいときや、サービス比較のセクションを作りたいときに向いています。

例えば、上部に画像、その下にプラン名や料金、簡単な説明文、最後に「詳しく見る」ボタンを配置した構成を2〜3カラムで並べると、LP（ランディングページ）のような見た目になります。カラムブロックや横並びブロックより操作がやや複雑ですが、デザイン性は3つの中で最も高いです。

• 2つ横に並べるだけならカラムブロックがもっとも手軽
• 3つ以上や複数要素をまとめるなら横並びブロックが使いやすい
• 画像・テキスト・ボタンをセットにしたい場合はリッチカラムを選ぶ
• まずカラムブロックで慣れてから他の方法へ広げていくとスムーズ

スマホ表示でボタンの横並びを調整するポイント

PC上では横並びにできても、スマホで見ると崩れてしまうケースは少なくありません。スマホでの見え方を意識した調整の考え方を整理しておきます。

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

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

申し込みや問い合わせなど重要度の高いボタンは、スマホで縦並びにして一つひとつを大きく表示させると、タップのしやすさが格段に上がります。一方、選択肢が2つで「どちらかを選ぶ」タイプのボタンは、横並びのままにして比較しやすくする方が読者の判断を助けやすいです。

ボタンの文字数と余白がスマホ崩れの原因になる

スマホ表示でボタンのテキストが途中で改行されたり、2行になってバランスが悪く見えたりする場合は、テキストの長さを見直すと解消されることが多いです。目安として、ボタンの文言は10文字前後にまとめると収まりやすいです。

「お問い合わせはこちらから」より「お問い合わせ」、「無料で資料をダウンロード」より「資料ダウンロード」のように短くするだけで、見た目が整うことは多いです。それでも崩れる場合は、ボタンブロックの設定やCSSでフォントサイズやパディングを少しずつ調整してみてください。

実機確認が調整の近道になる

スマホ表示の確認は、WordPress管理画面の「カスタマイズ」画面でスマホアイコンに切り替えて確認する方法と、実際のスマートフォンでプレビューを確認する方法の2つがあります。ページのプレビューURLをスマホで開くと、実機でのタップ感も合わせて確認できます。

「見た目は問題なさそうでも、実際に触ってみると押しにくい」というケースもあります。画面上の確認だけでなく、実機で指で触れてみて「押しやすいかどうか」を判断基準にするとよいでしょう。

• 重要なボタンはスマホで縦並びにしてタップしやすくするとよい
• テキストは10文字前後を目安に短くする
• 管理画面のプレビューだけでなく実機確認も合わせて行う
• 崩れが直らない場合はCSSのフォントサイズやパディングを微調整する

クリックされやすいボタン横並びの配置と文言の工夫

横並びのレイアウトが整ったら、次は「実際にクリックしてもらえるボタン」にするための工夫を意識しておきたいところです。置き場所と文言・色の組み合わせで、ボタンの機能する度合いが変わります。

設置場所によってボタンの役割を使い分ける

ブログ記事の場合、ボタンを設置する場所は主に「記事の末尾」「記事の途中」「ヘッダー」の3か所です。それぞれで読者が求めている行動の種類が異なるため、ボタンの役割も使い分けるとよいでしょう。

記事末は「読み終えた人が次に進む場所」なので、問い合わせや申し込みなど具体的なアクションを促すボタンが向いています。記事の途中は「まだ読み進めている人が関連情報へ移動する場所」として、「詳しく読む」や「事例を見る」のような誘導ボタンが使われます。ヘッダーは「どのページからでも目に入る場所」なので、サービスの核心に関わるボタンを設置すると効果的です。

メインとサブでボタンの色と文言を変える

2つのボタンを横並びにするとき、同じデザインで並べると読者がどちらを選べばよいか迷いやすくなります。メインのボタンはサイトのキーカラーで塗りつぶし、サブのボタンはアウトライン（枠線のみ）にするなど、優先度の差を見た目で示すとよいでしょう。

SWELLボタンには「ノーマル」「立体」「キラッと」「アウトライン」などのスタイルが用意されており、右側のサイドパネルから切り替えられます。色は「SWELL設定」→「エディター設定」→「ボタン」タブで全体のカラーを設定でき、記事ごとに個別設定を加えることもできます。

文言は「名詞＋動詞」で押した後の状態を伝える

ボタンの文言で大切なのは、「押したらどうなるか」が一目で伝わることです。「詳細はこちら」より「料金を見る」、「こちらから」より「無料で相談する」のように、名詞と動詞を組み合わせて結果を具体的に書くと、読者が安心してクリックしやすくなります。

「すぐに行動したい人向け」と「もう少し情報を集めたい人向け」で役割を分けてボタンを並べると、それぞれのニーズに応えやすくなります。例えば「申し込む」と「まずは詳細を見る」のように、段階の異なる行動を2つ並べるのも有効な構成です。

• 記事末・途中・ヘッダーでそれぞれボタンの役割を変える
• メインとサブでデザインを変えて優先度を伝える
• 文言は「名詞＋動詞」で押した後の状態を具体的に書く
• 段階の違う行動を2つ並べると異なるニーズに対応しやすい

横並びにならないときのトラブルシューティング

設定を見直してもうまくいかない場合の対処法を整理しておきます。症状ごとに原因と確認場所が異なるため、当てはまるものから順番にチェックしてみてください。

ボタンがずっと縦に並ぶときの確認手順

ボタンをどう設定しても縦にしか並ばない場合、まずブロックの入れ子構造を確認するとよいです。左側の「リスト表示」（ブロック一覧）でカラムブロックや横並びブロックの中にボタンが正しく入っているかを目で見て確認できます。

カラムブロックを使っている場合は、ブロックを選択した状態で右パネルの「カラム数」が2以上になっているかも確認してください。カラム数が1のままの場合、ブロックを使っていても横並びにはなりません。

スマホだけレイアウトが崩れるときの対処法

PCでは正しく表示されているのにスマホだけ崩れる場合、原因として多いのはボタンの文言が長すぎること、またはカラムブロックやリッチカラムの「モバイルでは縦に並べる」設定の状態です。まずボタンのテキスト量を減らしてみて、それで解消するか確認するとよいでしょう。

解消しない場合は、CSSを追加している場合にメディアクエリでスマホ時の幅やフォントサイズを極端に変更している箇所がないかも見直してみてください。直近で追加したCSSをコメントアウトして確認する方法が、原因の特定に役立ちます。

ボタンの幅がバラバラになるときの調整方法

横並びにしたボタン同士の幅がそろわない場合は、各ボタンに個別の幅指定をしているケースが多いです。カラムや横並びブロック側でまとめて幅を指定し、ボタン個別の幅設定を外すとそろいやすくなります。

また、ボタン同士のテキスト量に大きな差がある場合も、幅のバランスが崩れやすいです。文言の文字数をそろえるか、どちらかに合わせて短くすると見た目が整います。文字数を変えたくない場合は、CSSで幅を同じ値に固定する方法も選択肢です。

• 縦にしか並ばないときはカラム数とブロック構造を最初に確認する
• スマホ崩れはテキスト量の調整で解消できることが多い
• 幅のばらつきはブロック全体で幅をそろえると整いやすい
• CSSは原因の特定ができてから最後に触るとトラブルになりにくい

まとめ

SWELLのボタンを横並びにするには、ボタン単体を並べるのではなく、カラムブロック・横並びブロック・リッチカラムのいずれかの中にボタンを入れることが基本です。

まずは記事の末尾に「カラムブロック＋SWELLボタン2つ」の構成を試してみてください。PCとスマホ両方でプレビューを確認しながら、表示の崩れや文言の長さを少しずつ調整していくと、スムーズに仕上げられます。

横並びのボタンはブログの導線として大切な役割を担います。今日ご紹介した方法を参考に、読者が迷わず次の行動を取れるようなボタン配置を、ぜひ一つひとつ試してみてください。

当ブログの主な情報源

• 消費者庁：SNSなどを通じた投資や副業といったもうけ話にご注意ください
• 総務省 公式ウェブサイト
• 情報処理推進機構 公式ウェブサイト