【SWELL】ヘッダーのボタンが改行されてしまう問題を解決する方法

SWELLのヘッダーにボタンを設置していると、画面サイズによってはボタンのテキストが途中で改行されてしまい、デザインが崩れてしまうことがあります。

特に長めのテキストを使用している場合、この問題が発生しやすくなります。

解決方法

この問題は、CSSで簡単に解決できます。以下のコードをテーマのカスタムCSSに追加してください。

基本的な対処法

/* ボタンのテキストを改行させない */
.w-header .swell-block-button__link {
    white-space: nowrap;
}

/* ボタン全体の最小幅を確保 */
.w-header .swell-block-button {
    min-width: max-content;
}

/* ヘッダー内のアイテムが縮小されないようにする */
.w-header__item {
    flex-shrink: 0;
}

より確実に対応する場合

上記の方法で改善されない場合は、以下のコードも追加してみてください。

/* ヘッダー全体のレイアウト調整 */
.w-header__inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

/* ボタンの内側のスペースを調整 */
.w-header .swell-block-button__link span {
    white-space: nowrap;
    display: inline-block;
}

コード(各プロパティ)の解説

white-space: nowrap;

テキストの自動改行を無効化します。これにより、ボタン内のテキストが1行で表示されるようになります。

min-width: max-content;

ボタンに必要な最小幅を自動的に確保します。コンテンツの幅に応じて適切なサイズが設定されます。

flex-shrink: 0;

フレックスボックスレイアウトで要素が縮小されるのを防ぎます。
これにより、スペースが足りない場合でもボタンが小さくなりません。

flex-wrap: nowrap;

ヘッダー内の要素が折り返さないように設定します。

CSSの追加方法

WordPressの場合

1. WordPressダッシュボードにログイン
2. 「外観」→「カスタマイズ」を選択
3. 「追加CSS」をクリック
4. 上記のCSSコードを貼り付け
5. 「公開」ボタンをクリック

子テーマを使用している場合

子テーマのstyle.cssファイルに直接コードを追加することもできます。

注意点

• CSSを追加する前に、バックアップを取ることをおすすめします
• テーマのアップデートで設定が消えないよう、子テーマやカスタムCSSエリアを使用してください
• スマホやタブレットなど小さい画面でも表示が問題ないか、確認してください

まとめ

ヘッダーボタンの改行問題は、white-space: nowrap;を中心としたCSSで簡単に解決できます。
この方法は、ヘッダーのボタンだけでなく、他の場所で改行を防ぎたい場合にも応用できます。

SWELLのヘッダー（ナビゲーション）にボタンを追加する方法についてはこちらをご参照ください。

あわせて読みたい

【SWELL】ヘッダー（ナビゲーション）にボタンを設置する方法 WordPressテーマ「SWELL」では、ヘッダーに「お問い合わせ」や「資料請求」などのCTAボタンを簡単に設置できます。 この記事では、SWELLのヘッダーにボタンを設置する方...