SWELLでボタンの高さが揃わない問題をCSSで解決する2つの方法

本サイトはプロモーションが含まれている場合があります。

03/06/2026

SWELLで固定ページ・カテゴリページ・投稿ページにボタンを複数並べると、文字数の違いでボタンの高さがバラバラになってしまうことがあります。

「直したいけど方法がわからない…」と試行錯誤してたどり着いた解決方法をまとめました。自分の覚え書きの役目もありますが、同じ悩みを持つ方の参考になれば嬉しいです。

Contents

この記事を読むとできること

文字数が違ってもボタンの高さが揃った状態で表示できるようになります。

SWELLのボタンの高さを整える方法

以下の手順で設定してください

STEP

カスタマイザーの追加CSSに以下を貼り付け

WordPress管理画面 → 外観 → カスタマイズ を開く
追加CSS に以下のコードを貼り付けて「公開」

/* 特定のクラスが付いた要素内でのみボタンの高さを揃える */

.button-height-fix .swell-block-fullWide .swell-block-button a {
    min-height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
}

.button-height-fix .p-tabContent .c-container > * {
    height: 100%;
}

.button-height-fix .p-tabContent .swell-block-button {
    height: 100%;
}

CSSの追加が完了したら、次のいずれかの方法でクラスを設定します。

方法1

ボタンブロック自体に直接CSSクラスを追加する

該当の記事編集画面を開く
高さを揃えたいボタンブロックを1つ選択する
右サイドバー → 「投稿」タブ → 一番下の「高度な設定」を開く
「追加CSS クラス」に、例えば button-height-fix と入力
残りのボタンにも同じ手順で button-height-fix を追加する

ボタンが4つあれば、4つすべてに同じクラス名を追加してください。

方法2

親ブロック（リッチカラム／フルワイド）にCSSクラスを追加する

まとめて設定したい場合はこちらが簡単です。親ブロックに1回設定するだけで、中のボタンすべてに効きます。

リッチカラム全体（外側の枠）を選択する
右サイドバーの「ブロック」タブ → 「高度な設定」を開く
「追加CSSクラス」に button-height-fix と入力する

カスタマイザーに追加するCSSは方法1と同じコードでOKです。

まとめ

SWELLのボタン高さ問題は、button-height-fix というCSSクラスを使って解決できます。

方法	設定箇所	向いているケース
方法1	各ボタンブロック	特定のボタンだけ揃えたい時
方法2	親ブロック（リッチカラム等）	まとめて一括設定したい時

どちらの方法でも、カスタマイザーへのCSS追加は必須です。先にCSSを貼り付けてから、クラスを設定する順番で進めてください。

うまくいかない場合は、クラス名のスペルミスや、親ブロックの選択ミスを確認してみてください。