SWELL│960px付近のヘッダーの表示崩れ対策

SWELLのヘッダーを横並びにすると、ロゴ・メニュー・ウィジェットの合計幅によっては、PC表示へ切り替わる960px付近で収まらなくなる場合があります。この記事は特定のメニュー構成で余白を調整した事例です。SWELLの標準状態が必ず崩れるという意味ではありません。

横並びのヘッダーレイアウト向けです。ロゴの大きさ、メニュー数、キャッチフレーズ、ヘッダー内ウィジェットが異なるサイトで同じ結果になるとは限りません。

フォントを小さくするとか、メディアクエリを細かく入れるとかの対策は嫌なので、まずは余白をなんとかする方向で考えてみました。

さっさとなんとかしたい人向けです。

次のCSSは、ロゴとメニューが横に並ぶヘッダーの余白を調整する例です。

/* ヘッダー全体の左右の余白 */
@media (min-width: 960px) and (max-width: 1200px) {
    .l-header {
        --swl-pad_container: 16px;
    }
}

/* ロゴ全体の右の余白 */
@media (min-width: 960px) {
    .-series .l-header__logo {
        margin-right: 0;
    }
}

/* ロゴパーツの右の余白 */
@media (min-width: 960px) and (max-width: 1100px) {
    .-series .c-headLogo {
        margin-right: 0;
    }
}

/* ヘッダー内部とメニューとの余白 */
.-series-right .w-header {
    margin-left: 6px;
}

/* ヘッダー内ウィジェットを縮ませない（収まる構成でのみ使用） */
.w-header.pc_ {
    flex-shrink: 0;
}

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

MOTOKI合同会社

カスタマイズの依頼・相談

960px付近のヘッダーメニューの表示崩れ対策をする

全体のフォントサイズを下げてもいいのですが、今回は余白を調整してみます。

左右の端のpaddingを減らす

デフォルトです。

@media (min-width: 960px) {
    :root {
        --swl-pad_container: 32px;
    }
}

となっているので、少し減らすと良いです。

@media (min-width: 960px) and (max-width: 1200px) {
    .l-header {
        --swl-pad_container: 16px;
    }
}

今回のSWELL 2.19.0の検証では、1280pxで左右48px、掲載CSSを適用した960〜1200pxで左右16pxでした。

@media (min-width: 1200px) {
    :root {
        --swl-pad_container: 48px;
    }
}

ロゴの右余白を減らす（2箇所）

デフォルトでmargin-right: 24px;の値が入っています。

@media (min-width: 960px) {
    .-series .l-header__logo {
        margin-right: 24px;
    }
}

右寄せの横並びヘッダーでは、ロゴ右側のmarginを0にすることでメニューに使える幅を増やせます。

@media (min-width: 960px) {
    .-series .l-header__logo {
        margin-right: 0;
    }
}

こちらも減らせそうなので減らします。

@media (min-width: 960px) {
    .-series .c-headLogo {
        margin-right: 16px;
    }
}

0にしました。

※キャッチフレーズがある場合は余白が欲しいので1100pxとしています。

@media (min-width: 960px) and (max-width: 1100px) {
    .-series .c-headLogo {
        margin-right: 0;
    }
}

ヘッダー内部の要素にできる左の余白を調整する

ウィジェットのヘッダー内部にボタンを入れるとメニューとの間に余白ができます。

@media (min-width: 960px) {
    .-series-right .w-header {
        margin-left: 12px;
    }
}

削ります。

.-series-right .w-header {
    margin-left: 0;
}

@media (min-width: 960px) {
    .-series-right .c-gnavWrap {
        margin-left: auto;
    }
}

@media (max-width: 1080px) {
    .c-gnav>.menu-item>a {
        padding: 0 8px;
    }
}

削った結果

というような感じで削ると、画面幅960pxでもフォントのサイズを変えずにメニューが入りました。

最終的に調整したCSS

以下はこの事例の調整用CSSです。バックアップ後、追加CSSか子テーマのstyle.cssへ追加し、サイトに合わない項目は使わないでください。コンテナ余白の変数は:rootではなく.l-headerに限定し、本文やフッターへ同じ余白変更が波及しないようにしています。

/* ヘッダー全体の左右の余白 */
@media (min-width: 960px) and (max-width: 1200px) {
    .l-header {
        --swl-pad_container: 16px;
    }
}

/* ロゴ全体の右の余白 */
@media (min-width: 960px) {
    .-series .l-header__logo {
        margin-right: 0;
    }
}

/* ロゴパーツの右の余白 */
@media (min-width: 960px) and (max-width: 1100px) {
    .-series .c-headLogo {
        margin-right: 0;
    }
}

/* ヘッダー内部とメニューとの余白 */
.-series-right .w-header {
    margin-left: 6px;
}

/* ヘッダー内ウィジェットを縮ませない（収まる構成でのみ使用） */
.w-header.pc_ {
    flex-shrink: 0;
}

キャッチフレーズも入れる場合

当時の構成では、キャッチフレーズを追加すると960px幅で収まらなくなりました。

しかしキャッチフレーズは折り返されるので、ヘッダー内ウィジェットの縮み方も確認します。flex-shrink: 0は残り幅を集める指定ではなく、縮小を禁止する指定です。内容が長いと逆にはみ出すため、入る幅がある場合だけ使用してください。

.w-header.pc_ {
    flex-shrink: 0;
}

最大幅を設定するのであれば、下記のように記載してもOKです。

.w-header.pc_ {
    flex: 1;
    max-width: 156px;
}

なんとかヘッダーメニューおさまりました。

境界幅での実表示の確認

2026年10月2日にWordPress 7.1.2 / SWELL 2.19.0の横並び右寄せヘッダーで確認しました。

ロゴはPC表示160×40pxで、長いキャッチフレーズやヘッダーウィジェットを含む構成はこの比較の対象外です。

キャッチフレーズを含むヘッダーで確認する順番

キャッチフレーズを表示する場合は、まずPCの横幅でロゴ領域とメニューが重ならないか確認します。

メニュー項目数だけでなく、各項目名の長さも幅に影響します。

今回の追加確認は、1280px幅、テキストのサイト名、長いキャッチフレーズ、5項目のヘッダーメニューという構成です。

ロゴ領域とメニューの間に24pxの空きがあり、各項目の重なりとページ全体の横はみ出しはありませんでした。

Tabキーでは「通常の記事」「画像の比較」「制作事例」「お知らせ」「ご案内」の順に移動できました。

案内リンクをEnterで開き、対応するページへ到達することも確認しています。

画像ロゴやヘッダーウィジェットを使うサイトは、その構成で改めて比較してください。

ここに掲載する画面は、960px前後の全条件やスマホ表示を保証するものではありません。

境界幅の検証手順は前節を参照してください。

崩れた場合は、追加したヘッダー用CSSを外し、元の状態で同じ幅を比較します。

元の状態でも崩れる場合は、メニュー名、ロゴサイズ、キャッチフレーズの表示設定を順に確認してください。

まとめ

めちゃめちゃマニアックな記事ですが…

SWELLの元々のCSSを調整すれば、ある程度のメニュー量でも崩れずに表示できます。

貼り付け後の確認と戻し方

959px・960px・1100px・1200px前後とスマホ幅で、ロゴ・各メニュー・検索ボタンが重ならないか確認します。Tabでメニューを順に選び、フォーカス枠やサブメニューが切れないことも確認してください。余白だけで収まらなければ、メニュー項目の整理やロゴの縮小を先に検討します。修正を戻す場合は今回のCSSだけを削除し、キャッシュを消して再表示します。

2024年10月の画像は、掲載している余白調整の例です。ヘッダーはロゴやメニュー、キャッチフレーズの構成によって結果が変わるため、同じCSSでも導入先で確認してください。