フッター内の指定したリストだけをPCで3列、幅960px以下で2列、400px以下で1列に並べます。
旧例のようにフッター内のすべてのul・liへ適用せず、追加クラスwaza-three-columnsを付けたulだけを対象にします。
フッターのウィジェットにカテゴリーを設置した場合、縦に長く表示されることがあります。
以下の2枚は旧版の配置例です。
現在の400px以下で1列になる表示は、後半の公開見本と撮影記録を参照してください。
本記事ではリストを好きな列数で折り返すカスタマイズを紹介します。
以下は旧版の配置を紹介した参考サイトです。
現在のコードとの一致は保証しません。
SWELLでフッターのカテゴリーリストを横3列で表示する方法
列数はリストの親要素の幅ではなく、画面幅で切り替わります。
PC画面内の狭いウィジェットでも3列になるため、設置先で文字の折り返しを確認してください。
対象リストへ追加クラスを付け、専用CSSを記述します。
変更前のCSSとウィジェット構成を保存してください。
旧版の.w-footer__box全体に適用するCSSを導入済みなら、今回のCSSと併用せず置き換えます。
管理画面の外観＞ウィジェットで、フッターへリストまたはカテゴリー一覧ブロックを設置します。高度な設定の追加CSSクラスにwaza-three-columnsを指定し、出力されたulにクラスが付く構成で使います。
追加CSSまたは子テーマのstyle.cssに下記のCSSを挿入します。親テーマのファイルを直接編集するとテーマ更新で消えるため、子テーマで管理します。
.w-footer__box ul.waza-three-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75em 1em; }
.w-footer__box ul.waza-three-columns > li { width:auto; min-width:0; overflow-wrap:anywhere; }
.w-footer__box ul.waza-three-columns ul { display:block; }
.w-footer__box ul.waza-three-columns ul li { width:auto; }
@media (max-width:960px) { .w-footer__box ul.waza-three-columns { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:400px) { .w-footer__box ul.waza-three-columns { grid-template-columns:1fr; } }- 幅961px以上は均等な3列
- 幅401〜960pxは2列、400px以下は1列
で折り返すようにしています。
CSSの設定が終わったら、フッターを確認しましょう。
入れ子のリストを記事内で確認する
次の見本は掲載CSSと同じフッター用の外枠・追加クラスを使っています。
カテゴリー名は親の項目だけ横へ並び、WordPressとSWELLの子項目は最初の列の中で縦に並びます。
長い名前の折り返しとTabのリンク順を確認できます。
サイト共通のフッターとは別の見本です。
まとめ
記事数が多いサイトはカテゴリーがどうしても増えてしまいます。
ということで、できるだけまとめて見えるように、カテゴリーリストを横3列にしてみました。
気になった方は是非試してみてください。
旧版のコードはGitHubのMOTOKI-LLC/WAZA-codeにもまとめています。
ブロック式ウィジェットでは、対象のリストブロックを選択し、高度な設定の追加CSSクラスへwaza-three-columnsと入力します。
生成されるulにこのクラスが付いたことを確認してください。
カテゴリーなど別のウィジェットが生成するulへは、クラスを付けない限り適用しません。
CSSは追加CSSまたは子テーマのstyle.cssへ貼り付け、以前の.w-footer__box全体へかける規則は置き換えます。
入れ子のリストは縦に並べたままです。
旧画像は配置の参考で、今回の400px以下の1列表示とは異なります。
戻すときは追加クラスと今回のCSSを外します。
幅1280・768・390pxと長い項目名、Tabキーによるリンク順を確認してください。
公開見本の操作確認
2026年10月2日、公開見本を961px・960px・401px・400px・390px幅で確認しました。
親の項目はそれぞれ3列・2列・2列・1列・1列となり、子の項目は親の中で縦に並びます。
PCとスマホ幅でTabの移動順と青いフォーカス枠を確認し、スマホ幅でWordPressの子項目からEnterでカテゴリーへ移動しました。
これは記事内見本の検証です。
ウィジェット編集画面での保存・再表示は確認していません。
よくある質問：SWELLでリストを横3列に折り返して表示するとき
この方法では、リストがどう表示されますか？
記事では、フッター内の指定したリストだけを、PCで3列、幅960px以下で2列、400px以下で1列に並べます。幅961px以上は均等な3列、401〜960pxは2列、400px以下は1列です。
フッターのすべてのリストに、適用されますか？
適用されません。記事では、旧例のようにフッター内のすべてのul・liへ適用せず、追加クラスwaza-three-columnsを付けたulだけを対象にします。カテゴリーなど別のウィジェットが生成するulへは、クラスを付けない限り適用しません。
クラスは、どこに付けますか？
記事では、管理画面の外観＞ウィジェットで、フッターへリストまたはカテゴリー一覧ブロックを設置し、高度な設定の追加CSSクラスにwaza-three-columnsを指定します。出力されたulにクラスが付くことを確認します。ブロック式ウィジェットでは、対象のリストブロックを選択して同じクラスを入力します。
CSSは、どこに追加しますか？
記事では、追加CSSまたは子テーマのstyle.cssに挿入します。親テーマのファイルを直接編集するとテーマ更新で消えるため、子テーマで管理します。変更前のCSSとウィジェット構成を保存します。旧版の.w-footer__box全体に適用するCSSを導入済みなら、今回のCSSと併用せず置き換えます。
狭いウィジェットに置いても、列数は変わりますか？
変わりません。記事では、列数はリストの親要素の幅ではなく、画面幅で切り替わります。PC画面内の狭いウィジェットでも3列になるため、設置先で文字の折り返しを確認します。
入れ子になったリスト（子項目）は、どうなりますか？
記事では、入れ子のリストは縦に並べたままです。親の項目が3列・2列・1列になり、子の項目は親の中で縦に並びます。
公開前に、何を確認しますか？
記事では、幅1280・768・390pxと長い項目名、Tabキーによるリンク順を確認します。
どこまで検証されていますか？
記事では、2026年10月2日に、公開見本を961px・960px・401px・400px・390px幅で確認しています。ただし、これは記事内見本の検証で、ウィジェット編集画面での保存・再表示は確認していません。戻すときは、追加クラスと今回のCSSを外します。
