SWELL│フッターのサブメニューを開閉表示する方法

2022.12.312026.10.13

SWELLのフッターメニューで、1段のサブメニューをPCではホバーまたはキーボードのフォーカスで表示するCSSです。

スマホ幅やホバーできない端末では、子リンクを常に表示します。

ホバー専用にしてリンクへ到達できなくなる旧コードを置き換えました。

適用するメニューを作る

外観のメニュー編集で、親項目の下に子項目を1段配置し、フッターのメニュー位置へ割り当てます。

親項目にも実際に開けるリンク先を指定してください。

メニュー名ではなく、出力HTMLのl-footer__navとsub-menuクラスを対象にします。

カスタムウィジェットなど異なるHTMLにはそのまま適用できません。

追加CSSへ貼り付ける

追加CSSまたは子テーマのstyle.cssをバックアップし、旧版のフッター用CSSを外して次の内容を入れます。

親テーマのファイルは編集しません。

旧版のheight:0やoverflow:hiddenを残すと、子リンクが表示されない場合があります。

/* フッターメニューの1段のサブメニューを対象にします。 */
.l-footer__nav > li { position: relative; }
.l-footer__nav .sub-menu { position: static; margin: 0; padding: .5rem; list-style: none; }
.l-footer__nav .sub-menu li { height: auto; overflow: visible; }
.l-footer__nav .sub-menu a { display: block; white-space: normal; overflow-wrap: anywhere; }
.l-footer__nav a:focus-visible { outline: 3px solid #176aa6; outline-offset: 2px; }
@media (min-width: 800px) and (hover: hover) and (pointer: fine) {
  .l-footer__nav > li > .sub-menu {
    position: absolute; bottom: 100%; right: 0; z-index: 2;
    width: 16rem; max-width: calc(100vw - 2rem);
    background: #f5f5f5; color: #222; visibility: hidden;
  }
  .l-footer__nav > li:hover > .sub-menu,
  .l-footer__nav > li:focus-within > .sub-menu { visibility: visible; }
  .l-footer__nav > li > .sub-menu a { color: #222; }
}

800px以上で、ホバー可能かつ細かいポインターを持つ端末だけ上向きに開きます。

親リンクにフォーカスが入るとfocus-withinで表示し、Tabで子リンクへ進めます。

フォーカスもポインターも外れると閉じます。

800px未満では通常のリストとして表示するため、開閉操作は不要です。

記事内で操作できる見本

次の見本は、フッターメニューと同じクラスのHTMLに上のCSSを適用しています。

PCでは親リンクからTabで子リンクへ進み、次の親へ移ると前のサブメニューが閉じます。

スマホ幅では子リンクを常に表示します。

見本だけにCSSを限定しているため、サイト共通のフッターメニューとは別に操作できます。

2026年10月2日、上の公開見本で親2項目・子4項目をTabで順番に移動し、1280px幅での表示・非表示と3pxのフォーカス枠を確認しました。

799pxでは常時表示、800pxではフォーカスに応じた表示へ切り替わり、390px幅では長いリンクも枠内に収まりました。

WAZA公開記事のフッターメニュー見本。390px幅で子リンクが常時表示され、Tabで選択したリンクに青い枠が出た状態。 — 2026年10月2日撮影。SWELL 2.19.0、390px幅。記事内見本の通常リスト表示とTabフォーカス。

確認した範囲

2026年10月1日、SWELL 2.19.0を読み込んだローカルのサンプルHTMLで、1280px幅の初期非表示、親からTabで子リンクへ移動したときの表示、次の親へ移ったときの非表示を確認しました。

390px幅では常時表示・長いラベルの折り返し・横はみ出しなしを確認しました。

2026年10月3日には、隔離環境の実SWELLフッターメニューでも親2項目・子4項目を確認しました。

390px幅では子リンクが通常の流れで表示され、1280px幅ではTabで長い子リンクへ移動して表示し、Enterで検証用の固定ページへ移動できました。

これは管理画面のメニュー編集・保存を確認した結果ではありません。

マウスのホバー操作、実機タッチ、3階層以上、すべての端位置やフッター配置は未検証です。

導入サイトでは子リンクすべてを開けることと、背景との文字色のコントラストを確認してください。

画面端で切れる配置ではabsolute表示を使わず、常時表示のままにします。

戻し方

追加したCSSだけを取り除き、キャッシュを更新します。

メニューの親子関係は変更していないため、元のテーマの表示へ戻ります。

必要ならメニューの配置も変更前の状態へ戻してください。

リンクがHTMLに存在することと、検索結果へ登録されることは別です。

この表示変更によるSEO効果は計測していません。

旧版の画像と外部GitHubコードは今回の実装と一致しないため、本稿のコードを基準にしてください。

フッターまわりのCSSカスタマイズ全般はSWELL│よく使うCSSのカスタマイズ│ヘッダー・フッター、フッターにロゴや連絡先を置く方法はSWELL│フッターにロゴを入れる方法とWordPress│フッターに連絡先情報をいれるカスタマイズにまとめています。

よくある質問：SWELLでフッターのサブメニューを開閉表示するとき

フッターメニューの、サブメニューはどう表示されますか？

記事では、SWELLのフッターメニューで、1段のサブメニューをPCではホバーまたはキーボードのフォーカスで表示するCSSです。800px以上で、ホバー可能かつ細かいポインターを持つ端末だけ上向きに開きます。スマホ幅やホバーできない端末では、子リンクを常に表示します。

キーボードでも、サブメニューを開けますか？

開けます。記事では、親リンクにフォーカスが入るとfocus-withinで表示し、Tabで子リンクへ進めます。フォーカスもポインターも外れると閉じます。

どんなメニューを用意しますか？

記事では、外観のメニュー編集で、親項目の下に子項目を1段配置し、フッターのメニュー位置へ割り当てます。親項目にも、実際に開けるリンク先を指定します。

どのメニューに適用されますか？

記事では、メニュー名ではなく、出力HTMLのl-footer__navとsub-menuクラスを対象にします。カスタムウィジェットなど異なるHTMLにはそのまま適用できません。3階層以上は未検証です。

旧版のCSSは、そのまま残してよいですか？

残さないでください。記事では、追加CSSまたは子テーマのstyle.cssをバックアップし、旧版のフッター用CSSを外してから入れます。旧版のheight:0やoverflow:hiddenを残すと、子リンクが表示されない場合があります。ホバー専用にしてリンクへ到達できなくなる旧コードを置き換えています。

画面の端で、メニューが切れるときは？

記事では、画面端で切れる配置ではabsolute表示を使わず、常時表示のままにします。

どこまで検証されていますか？

記事では、390px幅で常時表示・長いラベルの折り返し・横はみ出しなしを確認し、2026年10月3日には隔離環境の実SWELLフッターメニューで、1280px幅でTabによる子リンクへの移動とEnterでの遷移を確認しています。一方、マウスのホバー操作、実機タッチ、3階層以上、すべての端位置やフッター配置は未検証です。導入サイトでは、子リンクすべてを開けることと、背景との文字色のコントラストを確認します。