[のぶやん]

【お使いの Snow Monkey のバージョン】14.3.5
【お使いの Snow Monkey Blocks のバージョン】11.4.1
【お使いの Snow Monkey Editor のバージョン】5.0.6
【お使いのブラウザ】Chrome 91.0.4472.114
【当該サイトのURL】未開示

### 実現したいこと

カスタマイザーで選択可能な上限カラム数はPC・タブレットともに4カラムですが、PC時に5カラムとしたい。

### 試したこと

こちらのトピックを参考に、Kmical LightsさんのコードをMy Snow Monkeyで試してみましたが反応なしでした。

フッター部のウィジェットを横配置にしたいです

このトピックには11件の返信、3人の参加者があり、最後にm pressにより8ヶ月、 2週前に更新されました。…

snow-monkey.2inc.org

add_filter(
'snow_monkey_template_part_render_template-parts/widget-area/footer',
function( $_html, $_name, $_vars ) {
$_html = str_replace( 'l-footer-widget-area__item c-row__col c-row__col--1-1 c-row__col--lg-1-5', 'l-footer-widget-area__item c-row__col c-row__col--1-1 c-row__col--md-1-2 c-row__col--lg-1-5', $_html );
return $_html;
},
10,
3
);

試しにカスタマイザーのカラム数を1～4それぞれ選択してみましたが、選択数通りの横並びカラム数となり、変化はありません（添付はPC時4カラム選択時）。

追加CSSを全て削除・プラグインの停止なども併せて試してみましたが、こちらでも変わらず。

ご存知の方がいらっしゃいましたら、ご教示くださいますと幸いです。よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[GONSY]

「難しく考えず、シンプルに実装するアイディアの1つとして、どうですか？」というレベルなので、使えなかったらスルーしてください(^^;)

設定できるカラム数をフックで5カラムにするのではなく、ウィジェットエリアにはいくつもウィジェットが入るので、1カラムにしてCSSで調整するという発想です。

1. 【カスタマイズ】→【デザイン】→【フッター】→「PC時のフッターウィジェットエリアのカラム数」を1カラムにします。
   　
2. フッターのウィジェットエリアに、5つのウィジェットを入れます。
   　　
3. そしてCSSで横並びに。

.c-row--lg-margin-l {
	display: flex;
}
.l-footer-widget-area__item {
	flex: 1 0 20%;
	width: 20%;
}

※これだけだと横並びにならない可能性があるので、調整は必要かもです。

チープなアイディアですが、よかったらお試しください。

♥ 4

いいねをした人:

[GONSY]

flexの指定が間違ってました。こちらです🙇‍

.l-footer-widget-area__item {
	flex: 0 1 20%;
	width: 20%;
}

♥ 2

いいねをした人:

[のぶやん]

GONSYさん、

柔軟な発想！いただいたコードでPC5列表示ができました。

自分では思いつかない考え方・違う視点をお聞きすると楽しいですね。問題解決だけでなく、こういう体験ができるのがこのフォーラムのイイところだと実感しています。

PC表示以外も5列表示になるので、頂戴したコードにメデイアクエリを足して「PC5列・スマホ1列」にしてみました。

@media (min-width: 64em) {
	.c-row--lg-margin-l {
		display: flex;
	}
	.l-footer-widget-area__item {
		flex: 0 1 20%;
		width: 20%;
	}
}

ありがとうございました！！！

♥ 2

いいねをした人:

[投稿者]

投稿