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

0
いいねをした人: 居ません
  • このトピックには11件の返信、3人の参加者があり、最後にm pressにより4年、 1ヶ月前に更新されました。
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • 投稿者
    投稿
  • #57234
    m press
    閲覧者
    14

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

    お世話になります。

    フッター部分に

    ・ロゴ

    ・会社情報

    ・メニュー

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

    CSSで記述が必要ですか?

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

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

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

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

    0
    いいねをした人: 居ません
    #57263
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

    0
    いいねをした人: 居ません
    #57354
    Kmical Lights
    閲覧者
    234

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

    カスタマイザーで選択できるのはPC時のカラム数で、タブレットとモバイルは1列固定となりますので、もしこれを変更したいとされる場合、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時のカラム数を教えてください)

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

    @北島さん

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

    0
    いいねをした人: 居ません
    #57439
    アバター画像キタジマ タカシ
    参加者
    2421

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

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

    1
    いいねをした人: 居ません
    #57496
    m press
    閲覧者
    14

    キタジマ 様

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

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

    0
    いいねをした人: 居ません
    #57498
    m press
    閲覧者
    14

    Kmical Lights様

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

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

    感謝致します。

    0
    いいねをした人: 居ません
    #57501
    アバター画像キタジマ タカシ
    参加者
    2421

    @m press さん

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

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

    0
    いいねをした人: 居ません
    #57540
    m press
    閲覧者
    14

    キタジマ様

    お世話になります。

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

    0
    いいねをした人: 居ません
    #57565
    アバター画像キタジマ タカシ
    参加者
    2421

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

    .children-expander {
        display: inline-block;
        position: relative;
        transition: none;
    }
    .children-expander[data-is-expanded=true] {
        transform: rotate(-90deg) translate(-.2em, -.4em);
    }
    0
    いいねをした人: 居ません
    #58001
    m press
    閲覧者
    14

    キタジマ様

    ありがとうございます!

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

    0
    いいねをした人: 居ません
    #58025
    アバター画像キタジマ タカシ
    参加者
    2421

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

    こんな感じですかね?

    .l-footer-widget-area__item:last-child {
        display: flex;
        justify-content: center;
    }
    0
    いいねをした人: 居ません
    #58495
    m press
    閲覧者
    14

    キタジマ様

    ありがとうございます!

    整いました!

    1
    いいねをした人: 居ません
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • トピック「フッター部のウィジェットを横配置にしたいです」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。