SWELLのスマホでは３本線のハンバーガメニューが表示されますが、PCでは表示されません。
PCではCSSでメニューボタンを表示し、JavaScriptでフォーカス移動とキーボード操作を補います。
対象はSWELL 2.19.0の通常ヘッダーで、追従ヘッダーへの追加は含みません。
開閉時
SWELLでPC表示でハンバーガーメニューを表示する方法
表示用CSSに加え、PCで開いたときのフォーカス移動とEscape・Tab操作を補うJavaScriptを使用します。
SWELL 2.19.0の通常ヘッダーを対象にした例です。
ハンバーガメニューの表示位置を設定する
外観＞カスタマイズからヘッダーを選択、ヘッダーのレイアウト（SP ）から
以下を選択します。
- ロゴ：左 / メニュー：右
- ロゴ：中央 / メニュー：右
- ロゴ：中央 / メニュー：左
右側にハンバーガーメニューを表示したい時はメニュー：右を選びましょう。
PC表示でハンバーガーメニューを表示する
追加CSSまたは子テーマのstyle.cssへ以下を記述します。
旧版の同じセレクターの規則は置き換えます。
閉じたPCメニューをvisibility:hiddenにして、見えないリンクへのTab移動を防ぎます。
@media (min-width:960px) {
.l-header__menuBtn.sp_ { display:block!important; position:relative; }
.p-spMenu { display:block!important; }
.p-spMenu__inner { max-width:600px; }
[data-spmenu="closed"] .p-spMenu { visibility:hidden; }
[data-spmenu="opened"] .p-spMenu { visibility:visible; }
}以下はJavaScriptです。
子テーマで読み込んでいるJSファイルへ追加するか、JavaScript挿入機能のフッター欄へ1回だけ登録します。
PHPやCSS欄へ直接貼り付けないでください。
古いposition:fixedと極端なz-indexを足す例は撤回し、追従ヘッダーへの追加はこの例の対象外とします。
function wazaInitDesktopMenu() {
const menu = document.querySelector('#sp_menu');
const opener = document.querySelector('.l-header__menuBtn button[data-onclick="toggleMenu"]');
const closer = menu && menu.querySelector('button[data-onclick="toggleMenu"]');
if (!menu || !opener || !closer) return;
const desktop = window.matchMedia('(min-width:960px)');
let wasOpen = false;
const isOpen = () => document.documentElement.getAttribute('data-spmenu') === 'opened';
const sync = () => {
const open = isOpen();
opener.setAttribute('aria-expanded', String(open));
opener.setAttribute('aria-controls', 'sp_menu');
if (desktop.matches) {
if (open && !wasOpen) closer.focus();
if (!open && wasOpen) opener.focus();
}
wasOpen = open;
};
new MutationObserver(sync).observe(document.documentElement, {attributes:true, attributeFilter:['data-spmenu']});
menu.addEventListener('keydown', function (event) {
if (!desktop.matches || !isOpen()) return;
if (event.key === 'Escape') { event.preventDefault(); closer.click(); return; }
if (event.key !== 'Tab') return;
const items = Array.from(menu.querySelectorAll('a[href],button,input,select,textarea,[tabindex]')).filter(el => !el.disabled && el.tabIndex >= 0 && el.getClientRects().length && getComputedStyle(el).visibility !== 'hidden');
if (!items.length) return;
const first = items[0], last = items[items.length - 1];
if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus(); }
else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus(); }
});
desktop.addEventListener('change', function () {
wasOpen = false;
sync();
});
sync();
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wazaInitDesktopMenu, {once:true});
else wazaInitDesktopMenu();するとPC版にもハンバーガーメニューが表示されます。
ちなみにアイコンをクリックすると以下の通り。
メニュー幅は最大600pxです。
画面幅が狭い場合はテーマの幅指定が適用されます。
まとめ
このカスタマイズはハンバーガメニューにいろいろなメニューを入れつつ、
表示されるメニューをシンプルにすることができます。
気になった方はぜひ試してみてください。
GitHubのMOTOKI-LLC/WAZA-codeは旧版のため、導入にはこの本文のCSSとJavaScriptを使用してください。
検証する操作はEnterで開く、閉じるボタンへのフォーカス移動、メニュー内のTab・Shift+Tab、Escapeで閉じて元のボタンへ戻る動作です。
960px未満はSWELL本来のスマホ表示を使います。
追従ヘッダー、独自メニュー拡張、画面幅をまたぐ実テーマでの開閉状態は別途検証してください。
戻すには今回のCSSとJavaScriptを取り除きます。
元のスマホ側メニュー設定を変えた場合は、その設定も変更前へ戻します。
ヘッダー全体のz-indexを上げないため、メニューの上にヘッダーが重なる変更も避けられます。
画面幅を変えたときの開閉状態
960px未満で開閉した場合も内部の状態とaria-expandedを更新し、960px以上へ戻ったときは開いているメニュー内へフォーカスを移します。
画面幅の変更を監視しない旧例では、スマホ幅で閉じた状態が内部に反映されず、PC幅へ戻して開くときのフォーカス移動が省かれる場合がありました。
状態遷移を模したテストに加え、2026年10月3日に隔離したWordPress 7.1.2 / SWELL 2.19.0の通常ヘッダーで、960pxのEnter開閉、Tab・Shift+Tabの循環、Escapeによる閉鎖と元ボタンへのフォーカス復帰を確認しました。
開いたまま959pxへ狭めたときに開閉状態と閉じるボタンのフォーカスが保たれ、960pxへ戻した後もEscapeで閉じられました。
これは確認した幅の遷移での結果で、すべての画面幅や独自メニュー拡張の動作を確認したものではありません。
公開記事のヘッダーには今回のコードを導入していないため、本番ヘッダーでの幅変更を確認した実績とは区別します。
幅の切り替えイベントはMediaQueryListのchangeイベントで受け取ります。
追従ヘッダーは対象外です。
よくある質問：SWELLでPC表示でもハンバーガーメニューを表示するとき
SWELLでは、PCでもハンバーガーメニューを表示できますか？
記事では、SWELLのスマホでは3本線のハンバーガーメニューが表示されますが、PCでは表示されません。PCではCSSでメニューボタンを表示し、JavaScriptでフォーカス移動とキーボード操作を補います。対象はSWELL 2.19.0の通常ヘッダーで、追従ヘッダーへの追加は含みません。
ハンバーガーメニューの位置は、どう設定しますか？
記事では、外観＞カスタマイズからヘッダーを選択し、ヘッダーのレイアウト（SP）から、「ロゴ：左 / メニュー：右」「ロゴ：中央 / メニュー：右」「ロゴ：中央 / メニュー：左」のいずれかを選びます。右側にハンバーガーメニューを表示したい時は、メニュー：右を選びます。
CSSとJavaScriptは、どこに追加しますか？
記事では、CSSは追加CSSまたは子テーマのstyle.cssへ記述します。JavaScriptは、子テーマで読み込んでいるJSファイルへ追加するか、JavaScript挿入機能のフッター欄へ1回だけ登録します。PHPやCSS欄へ直接貼り付けません。
JavaScriptは、なぜ必要ですか？
記事では、PCで開いたときのフォーカス移動とEscape・Tab操作を補うためです。閉じたPCメニューはvisibility:hiddenにして、見えないリンクへのTab移動を防ぎます。
メニューの幅は、どうなりますか？
記事では、メニュー幅は最大600pxです。画面幅が狭い場合はテーマの幅指定が適用されます。960px未満はSWELL本来のスマホ表示を使います。
画面幅を変えたとき、開閉状態は保たれますか？
記事では、960px未満で開閉した場合も内部の状態とaria-expandedを更新し、960px以上へ戻ったときは開いているメニュー内へフォーカスを移します。旧例では、スマホ幅で閉じた状態が内部に反映されず、PC幅へ戻して開くときのフォーカス移動が省かれる場合がありました。
どんな操作を確認すればよいですか？
記事では、Enterで開く、閉じるボタンへのフォーカス移動、メニュー内のTab・Shift+Tab、Escapeで閉じて元のボタンへ戻る動作を確認します。
どこまで検証されていますか？
記事では、2026年10月3日に隔離したWordPress 7.1.2 / SWELL 2.19.0の通常ヘッダーで確認しています。追従ヘッダー、独自メニュー拡張、画面幅をまたぐ実テーマでの開閉状態は別途検証が必要で、公開記事のヘッダーには今回のコードを導入していません。戻すには、今回のCSSとJavaScriptを取り除き、スマホ側メニュー設定を変えた場合はその設定も変更前へ戻します。
