[m press]

【お使いの Snow Monkey のバージョン】10.10.8
【お使いのブラウザ】chrome

お世話になります。

フッター部分に

・ロゴ

・会社情報

・メニュー

を横並びに設置したいのですが、これはカスタマイズからいけますでしょうか？

CSSで記述が必要ですか？

また、ブロックの幅指定をしていないので一か所サブナビゲーションの誘導矢印が

遠くに表示されています。

CSSにせよ、どう書くのがスマートなのか悩んでおります。

アドバイス、よろしくお願い致します。

♥ 0

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

[キタジマ タカシ]

このサイトのフッターみたいにってことですよね？

カスタマイザー → デザイン → フッター → フッターウィジェットエリアのカラム数で、何列に並べるか設定できます。

♥ 0

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

[Kmical Lights]

横レス失礼します（FF外から……並の挨拶ですが）。

カスタマイザーで選択できるのはPC時のカラム数で、タブレットとモバイルは１列固定となりますので、もしこれを変更したいとされる場合、My Snow Monkey などで

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-●', 'l-footer-widget-area__item c-row__col c-row__col--1-1 c-row__col--md-1-○ c-row__col--lg-1-●', $_html );
	return $_html;
},
10,
3
);

半角数字で
●の部分には、PCの時のカラム数を書き、○の部分にタブレット時のカラム数を書いて
試してみてください。
（対応していないウィジェットもあります。できない場合は表示しているウィジェット名と設定しているPC時のカラム数を教えてください）

矢印が遠くに表示される問題は、タブレット時でも２カラム以上で表示すれば収まるかと思いますが、それでも遠く離れていると感じられる場合には返信にて矢印の位置をどのようにしたいかも追加でお伝え下さい。コードを書いてみますので。

＠北島さん

タブレット時のカラム指定もカスタマイザーでできれば便利だなーと思ってるのですが、
追加って難しいですか？

♥ 0

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

[キタジマ タカシ]

タブレット時のカラム指定もカスタマイザーでできれば便利だなーと思ってるのですが、
追加って難しいですか？

そうですね、タブレットのも追加しましょう！

♥ 1

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

[m press]

キタジマ 様

ありがとうございました！
カラム数の設定はできたのですが、メニューのドロワー部分を持った分の横幅が長くて収まりが悪いです。

こちらは、どこで調整するのが良いのでしょうか？

♥ 0

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

[m press]

Kmical Lights様

こんにちは、ご丁寧に解説をありがとうございました！

とても、為になりました。

感謝致します。

♥ 0

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

[キタジマ タカシ]

@m press さん

カラム数の設定はできたのですが、メニューのドロワー部分を持った分の横幅が長くて収まりが悪いです。
こちらは、どこで調整するのが良いのでしょうか？

CSS で調整することになりますが、どう調整したいかでコードが変わってきます。どういう風にされたいですかね？（文字を v に寄せるか、v を文字に寄せるか、あるいは他にやりたい表現があるか）

♥ 0

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

[m press]

キタジマ様

お世話になります。

＞をどちらかに寄せたいとは思うのですが、＞を文字に寄せる方が良いかなと考えております。

♥ 0

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

[キタジマ タカシ]

こんな感じでどうでしょう？

.children-expander {
    display: inline-block;
    position: relative;
    transition: none;
}
.children-expander[data-is-expanded=true] {
    transform: rotate(-90deg) translate(-.2em, -.4em);
}

♥ 0

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

[m press]

キタジマ様

ありがとうございます！

うまく距離が縮まりました。
あと１点、全体は左に寄ったままなのですが、中央寄せにするにはナビゲーションの幅を指定しないとだめなのでしょうか？

♥ 0

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

[キタジマ タカシ]

HTML 的には特に指定がない場合は左寄せになっちゃいますね。

こんな感じですかね？

.l-footer-widget-area__item:last-child {
    display: flex;
    justify-content: center;
}

♥ 0

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

[m press]

キタジマ様

ありがとうございます！

整いました！

♥ 1

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

[投稿者]

投稿