アップデート対策について「横並びのブロック(例:項目、パネル等)の左右余白のとり方」

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

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

     

    ### 実現したいこと

    現在、この夏納品予定のサイト制作を行っておりまして、

    以下の記事のアップデートの影響ができるだけでないように構築しようとしているのですが、不安な点がありこちらに投稿いたしました。

     

    今後のアップデートで後方互換性に大きな影響がありそうな変更点:2021/4/27時点

     

    上記に挙げられていることは避けて制作しようと思っていたんですが、先方の要望でまさに項目やパネルの左右余白を広くしたい(例:画像1)というご要望があり避けられない状況になってきまして、

    納品後のアップデートの際にズレがないようにできないかと考えております。(納品後の運用の段階では私が関わることができないこともあり)

     

    ### 試したこと

    アップデート変更点「横並びのブロック(例:項目、パネル等)の左右余白のとり方」を拝見して、

    display: flex;からdisplay: gridに変わるということで、(検討段階とかかれていますが)以下の方法でいけないかと考えております。

     

    ①高度な設定で、classを別途つける

    「.c-row」「.c-row__col」はアップデートで変わる部分(と想定して)なのでいじらない。

    class名を別途つける。(画像2)

     

    ②パネル(項目)幅、左右の余白をつける(画像3)

    .test-p{
    max-width: 600px;
    margin: 0 auto;
    }

    .c-row–margin>.test{
    box-sizing: border-box;
    padding: 0 50px;
    width: 100px;
    }

    上記でやったことは、

    display:gridに変更になった時に、ブラウザ幅でびよーんとのびてしまわないように(例:画像4)、最大幅を決めて、個々の幅も左右余白の数値も入れておけば、変更後もズレが生じないのでは…と思ったところなんですが

     

    果たしてこれで、アップデート後もズレがなくいけるのかどうか不安な部分で、質問をした次第になります。

    検討違いなことをしているよ、こうしたら確認できるよ等ご教授いただけないでしょうか…n(__)n

    どうぞ宜しくお願いいたします!

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

    オンラインコミュニティでアンケートをとったりもしたのですが、grid への変更は現段階ではできないかなという結論です! ただ、余白のとり方を gap に変更するかはまだ検討中で可能性はあります。 gap は0、paddingmargin を変更する場合は詳細度を強めに当てておく、というのが安全なのではないかと思います。ただ、そ実際れで確実に大丈夫だと言い切るのも難しいとは思います。本来はメジャーアップデートのたびに検証・対応作業をおこなうのが理想です。

    1
    いいねをした人:
    #80015
    hosifuluko
    閲覧者
    13

    ありがとうございますm(__)m

    gridは見送られることになったのですね!

    やはり今回はアップデートの際には手を離れてしまうこともあるので、無理には左右余白をつくらないで、「グループ」「コンテナ」を利用して全体的に幅を狭めて余白感がでるようにしたいと思います..!!

    ちなみになんですが、教えていただいた方法というのは、以下の理解で合っていますでしょうか…?

    .test-p{
      gap:0 ;!important(gapをあらかじめ0にしておく)
    }
    
    .c-row–margin>.test{
      padding: 0 50px;!important
    }
    0
    いいねをした人: 居ません
    #80045
    アバター画像キタジマ タカシ
    参加者
    2421

    まだ Snow Monkey に変更を入れていないので、実際にやってから出ないとこうすれば絶対大丈夫ということは言えないのですが、とりあえずこんな感じではないでしょうか。

    .test-p {
      gap:0 !important;
      margin: xxx !important; // アップデートで margin がなくなるかもしれないので何か設定しておく
    }
    
    .test-p > .test{
      padding: 0 50px !important;
      margin: xxx !important; // アップデートで margin が変更されるかもしれないので何か設定しておく
    }
    0
    いいねをした人: 居ません
    #80118
    hosifuluko
    閲覧者
    13

    詳細に教えていただきありがとうございますm(__)m

    おかげさまで、セーフとアウトの範囲がわかってきました..!!

    あまりいじらない方向で進めたいと思います..

    ありがとうございました^^!!

    1
    いいねをした人:
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • トピック「アップデート対策について「横並びのブロック(例:項目、パネル等)の左右余白のとり方」」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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