セクション(背景色あり)とセクション(背景色あり)間の余白について

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

    【お使いの Snow Monkey のバージョン】バージョン: 15.4.0
    【お使いの Snow Monkey Blocks のバージョン】バージョン 12.1.0
    【お使いの Snow Monkey Editor のバージョン】バージョン 6.0.0
    【お使いのブラウザ】Chrome
    【当該サイトのURL】

    ### 実現したいこと

    セクション(背景色あり)とセクション(背景色あり)間の余白を背景色の幅に影響なく狭めたいのですが実現可能でしょうかm(__)m

     

    ### 発生している問題

    セクション(背景色あり)とセクション(背景色あり)の上下余白を狭めたい時がありまして、

    狭めると、背景色も一緒に狭まることになるんですが、上下余白だけを狭める方法に苦戦しております。

     

     

     

    ### 試したこと

    関係しているclassにmargin-bottom:0;をかけてみました。

    下の調整は、画像の「文章が入ります」の段落の下にスペースをいれることで調整が可能なんですが、上の調整が、この場合調整にスペースを入れることができないのもあって悩ましいですm(__)m!!(セクチョンの上にスペースを入れようとするとまたセクションが増やさないといけないので幅が変わってくる。)

    0
    いいねをした人: 居ません
    #85331
    キタジマ タカシ
    参加者
    1736

    ページレイアウトは何でしょうか?(1カラム?右サイドバー?等)

    0
    いいねをした人: 居ません
    #85334
    hosifuluko
    参加者
    12

    ランディングページ(ヘッダー・フッダーあり)
    に設定しています!

    0
    いいねをした人: 居ません
    #85343
    キタジマ タカシ
    参加者
    1736

    ランディングページ系テンプレートであれば、セクションを上下とも全幅にすればくっつくと思うのですがどうでしょうか?

    あと、今思ったのですがランディングページ系テンプレートの場合、わざわざ全幅にしなくてもデフォルトで全幅と同じ見た目になるので、全幅にしなくても上下くっついたほうが良いよなーと思いました…。

    0
    いいねをした人: 居ません
    #85355
    hosifuluko
    参加者
    12

    ありがとうございます!

    私の作り方が問題なのかもしれないのですが、セクションの中にセクションを入れて背景色・スリム幅を設定しておりまして、以下の場合はセクション間の余白はなくなるんですが、

    文書→セクション(全幅)

    —-余白なし—-

    文書→セクション(全幅)

    セクションの中にセクションだと、やはり余白は残ったままでした…!

    文書→セクション(全幅)→セクション(全幅、背景色、スリム幅)

    —-余白あり—-※画像のような感じに

    文書→セクション(全幅)→セクション(全幅、背景色、スリム幅)

    0
    いいねをした人: 居ません
    #85446
    キタジマ タカシ
    参加者
    1736

    あーなるほど

    セクション(スリム幅)
    ├ セクション(全幅)
    └ セクション(全幅)

    だと思っていたのですが、

    セクション(全幅)
    └ セクション(全幅/スリム幅)
    セクション(全幅)
    └ セクション(全幅/スリム幅)

    なわけですね。僕は子セクション間の余白(margin)が原因だと思っていたのですが、そうなると子セクション間の余白(margin)ではなくて、親セクションの padding が原因となりますね。

    ただ、セクションの入れ子構造が複雑なために対処が難しくなっている気がするので、可能であればブロックの入れ子構造を変えるのが良いと思います。

    セクション(全幅)
    └ セクション(全幅/スリム幅)
    セクション(全幅)
    └ セクション(全幅/スリム幅)

    という構造にしているのはどのような理由があってでしょうか?

    0
    いいねをした人: 居ません
    #85596
    hosifuluko
    参加者
    12

    ありがとうございます!

    セクション(全幅)
    └ セクション(全幅/スリム幅)
    セクション(全幅)
    └ セクション(全幅/スリム幅)

    にするようになった経緯なんですが、

    以前以下のようにしていたら

    セクション
    ├ セクション
    └ セクション

    セクションを重ねたセクションのボトムに大きく余白ができてしまいまして、

    この場合は、下のセクションのトップのpaddingを0にして調整できたのですが

    重ねたセクションの下がフッターだった時に余白の調整が難しく

     

    セクション(全幅)
    └ セクション(全幅/スリム幅)
    セクション(全幅)
    └ セクション(全幅/スリム幅)

     

    にするようになったとサイト振り返ってみて思い出しました…!

    大枠のセクションを外せばいいかと思ったんですが、やっぱりセクションで背景色をボックスのようにつけたい関係で現在セクション→セクションにしてしまっているんですが、ここが根源な気がしてきました…

    0
    いいねをした人: 居ません
    #85600
    キタジマ タカシ
    参加者
    1736

    1枚目の画像だと

    セクション
    ├ セクション
    └ セクション
    セクション

    となっていますが、

    セクション
    セクション
    セクション
    セクション

    というように全部並列に並べちゃったら良いのではないですかね?

    0
    いいねをした人: 居ません
    #85645
    hosifuluko
    参加者
    12

    すいません…!前回画像がわかりづらいんですが、

    セクション→セクション(背景色)を使う時に、左右に余白を持たせたい時がありまして、

    その場合はやはりセクション→セクションの入れ子を使っておりまして…!

    0
    いいねをした人: 居ません
    #85647
    キタジマ タカシ
    参加者
    1736

    コンテナブロックで囲って、それをスリム幅にできませんかね…?(いま PC の前にいなくて未確認です、すみません!)

    0
    いいねをした人: 居ません
    #85654
    hosifuluko
    参加者
    12

    あ!なるほど…!!

    コンテナ
    ├ セクション
    └ セクション
    └ セクション

    であれば、セクションをつんでも最後のボトムに大きな余白がでないということですね…頭が固かったです…!!

    思ったよりスリムになるので、その辺りはカスタム  CSSで調整ということですね…!!

    セクション→セクションよりも幅が調整しやすくなりましたm(__)m

    .wp-block-snow-monkey-blocks-section{
      padding: 60px;
    }
    
    .u-slim-width {
      max-width: 70rem !important;
    }
    
    .smb-section__body{
      max-width: 50rem !important;
      margin: 0 auto;
    }

    【調整後】

     

    お付き合いいただきありがとうございました…!!!

    0
    いいねをした人: 居ません
    #85669
    キタジマ タカシ
    参加者
    1736

    思ったよりスリムになるので、

    あ、そうかスリムにはチェック入れなくて良いかもですね。チェックを入れなければコンテナ幅(全幅にしないときの普通の幅)になります。

    0
    いいねをした人: 居ません
    #85701
    hosifuluko
    参加者
    12

    コンテナのスリム幅のチェック外したら(コンテナ→セクション)

    セクション→セクションのデザインと同じになりました…!!(よく考えたらそうですね…)

    コンテナで囲めばよかったんですね..とりあえずセクションで囲む脳になってました。

    ありがとうございます!

    1
    いいねをした人:
13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • トピック「セクション(背景色あり)とセクション(背景色あり)間の余白について」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ