SWELL│リストを横3列に折り返して表示する方法

2022.12.312024.03.05

フッターのウィジェットにカテゴリーを設置した場合、縦に長く表示されていまいます。

カテゴリー毎に横に並べつつ、表示したくないでしょうか？

本記事ではリストを好きな列数で折り返すカスタマイズを紹介します。

実際のリストの3列表示は下記のサイトから確認できます。

CGメソッド

CGメソッド | CG・映像デザイナーの技術サイト本サイト､CGメソッド（シージーメソッド）ではPCを使ってビジュアルを制作するデザイナーの為のTIPSや技術､ツールなどの情報を提供するサイトです｡

SWELLでフッターのカテゴリーリストを横3列で表示する方法

SWELLでフッターのカテゴリーリストを横3列で表示する方法は簡単です。

CSSを挿入するだけです。

STEP

ウィジェットの設定

管理画面＞外観＞ウィジェットからカテゴリーのウィジェットを設置します。

STEP

CSSの挿入

管理画面＞外観＞テーマファイルエディタ＞style.cssに下記のCSSを挿入します。

.w-footer__box ul {
    display: flex;
    flex-wrap: wrap;
}
.w-footer__box li {
    width: 33%; /*PCの場合*/
}
@media (max-width: 1200px) {
	.w-footer__box  ul li {
		width: 50%; /*スマホの場合*/
	}  
}
.w-footer__box .children {
    margin-bottom: 1.5em!important;
}
.w-footer__box .children .cat-item {
    width: 100%;
}