親要素をはみ出してブラウザ幅に背景色がついたコンテンツを入れたい。

0
いいねをした人: 居ません
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #110720
    徳本 奈穂子
    参加者
    23

    【お使いの Snow Monkey のバージョン】10.7.0
    【お使いの Snow Monkey Blocks のバージョン】16.0.4
    【お使いの Snow Monkey Editor のバージョン】8.0.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】https://busiani.com/

    ### 実現したいこと

    固定ページ(デフォルトテンプレート)で一つのコンテンツだけブラウザ幅いっぱいに背景色をつけたい。

    ### 発生している問題

    「試したこと」で説明いたします↓

    ### 試したこと

    a. 下記画像のように、「お問い合わせ」という見出しとフォームをグループ化し、そのグループに対して全幅指定してみました。(要望通りのプレビュー)

    ↓表の画面は、

    ・背景色がブラウザ幅になっていない。

    ・フォームや見出し文字など内容物が左に寄っている(内容物だけ全幅になっている?)

    ようです。

     

    b. CSSのカスタマイズ

    https://haniwaman.com/inner-over/ を参考に

    .full-width {
    margin: 0 calc(50% – 50vw);
    padding: 0 calc(50vw – 50%);
    width: 100vw;
    background: #ccc!important;
    }

    を追記。(full-widthは見出しとフォームのグループにつけたクラス)

    ↓ブラウザ幅になりません。

    よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #110727
    es:エス
    参加者
    136

    こんにちは。

    セクションを使うと添付のようなイメージにできるのですが、こういうことで合っていますでしょうか?
    もし違ったらごめんなさい…。


    3
    いいねをした人:
    #110755
    徳本 奈穂子
    参加者
    23

    esさん!ありがとうございます!

    やりたいことはまさにそれで、私の管理画面側のプレビューもその通りになっているのですが、

    表側の画面ではやはり画面全体の幅にはならず・・・設定等の問題でしょうか?

    1
    いいねをした人:
    #110761
    es:エス
    参加者
    136

    徳本さん、こんにちは。改めまして、先日はTwitterでもご対応いただき、ありがとうございました。^^

    あらら、そうなのですね。。私の方はデモ環境でCSSもゼロの状態でしたので、試しに徳本さんが記述されているCSSを反映してみたところ、下記画像のとおり、それでもフォームの要素は中央に問題なく配置されていました。※加えて、管理画面でのブロックの内容も見えるようにしてみました。

    反映したCSSは、

    .c-entry__content {
    position: relative;
    overflow: hidden;
    }

    から

    .attachment-large {
    border: 3px solid #ccc;
    }

    まで、です。

    Snow Monkey の設定でそうなってしまっているのかまでは確認できなかったのですが、もし可能であれば一度初期状態でお試しいただいて、問題が生じる部分の切り分けができるとよいかもですね。

    私の方でも、設定でそうなってしまう可能性があるのかは、引き続き確認してみようと思います。
    取り急ぎのお返事で申し訳ないのですが、よろしくお願いいたします。^^

    1
    いいねをした人:
    #110765
    es:エス
    参加者
    136

    徳本さん

    追伸です。

    設定を見直していて、あ、これかな!というものがあったので、一度こちらをご確認いただけますか?

    カスタマイザーの画面で固定ページを表示させた状態で、Snow Monkey 設定のデザイン設定を見ていただくと、最下段に固定ページ設定という項目が表示されるので、そこで1カラムなりフル幅なりに変更してみて、変化があるかをご確認いただけますでしょうか。

    なおその際にトップページを表示しても固定ページ扱いとならずこの項目は出てこないので、別の固定ページを開いてみてください。
    よろしくお願いいたします。

    2
    いいねをした人:
    #110769
    es:エス
    参加者
    136

    徳本さん、何度もすみません。。

    上記の設定変更で幅広ほどだった左右幅が全幅に変更されたと思ったのですが、セクションの設定を変更した後のキャッシュとリロードのタイミングの問題で、挙動を勘違いをしていたようでした。失礼しました。

    リロードに注意して再確認したところ、セクションの設定を全幅にしていれば、ページレイアウトを右・左のサイドバーにする以外は全幅で表示されましたので、お示しのような幅広程度の幅になるという状態を再現できませんでした。

    デフォルトテンプレートなども含め、拝見するかぎり設定条件は同じように見えるのですが、なぜでしょうね。。

    あまり意味はないかもですが、一応、私の方で表現できている状態のブロックのコードを共有してみますね。フォームIDはXXXとします。

    出しゃばったのにスカッと解決できず板汚しとなってしまい、申し訳ないです。。

    <!-- wp:snow-monkey-blocks/section {"wrapperTagName":"section","containerAlign":"","contentsMaxWidth":"800px","fixedBackgroundColor":"#ccc","align":"full"} -->
    <section class="wp-block-snow-monkey-blocks-section alignfull smb-section smb-section--fit"><div class="smb-section__fixed-background" style="padding-top:0;padding-bottom:0;background-color:#ccc"></div><div class="smb-section__inner"><div class="c-container"><div class="smb-section__contents-wrapper" style="width:800px"><div class="smb-section__header"><h2 class="smb-section__title">タイトル・・・</h2></div><div class="smb-section__body"><!-- wp:heading -->
    <h2>お問い合わせ</h2>
    <!-- /wp:heading -->
    
    <!-- wp:snow-monkey-forms/snow-monkey-form {"formId":XXX} /--></div></div></div></div></section>
    <!-- /wp:snow-monkey-blocks/section -->
    1
    いいねをした人:
    #110772
    徳本 奈穂子
    参加者
    23

    esさん、お時間を取っていただいて本当にありがとうございましたm(_ _)m

    感謝しています( – 人 – )

     

    とりあえず現状の報告としましては

    カスタマイザーの固定ページのデザイン設定:フル幅

    —–

    新規固定ページ1:

    テンプレート – フル幅

    セクションブロック – 全幅

    → セクションブロック – 全幅表示◯ ただし、その他のページの要素も全幅になっていて希望のレイアウトではない。

    —–

    新規固定ページ2 :

    テンプレート – 1カラム

    セクションブロック – 全幅

    → セクションブロックも親要素内に収まってしまう×

    —–

    該当ページ :

    テンプレート – フル幅

    セクションブロック – 全幅

    → セクションブロックも親要素内に収まってしまう×

    —–

    という感じで、該当ページではフル幅にできるところは全部フルにしたと思うのですがNGです。

    ただ、新規固定ページの時と動きが違うので私のCSSが何か影響している可能性はあるかもしれないと思っています・・・

    もし、何かわかる方いらっしゃったらご助言いただけますと助かります・・・m(_ _)m

    1
    いいねをした人:
    #110794
    アバター画像キタジマ タカシ
    参加者
    2397

    本来は es さんが書かれているようにサイドバーがないレイアウトの場合は全幅にするだけで希望の表示になるはずです。ただ、全幅が適用されるのはルート(ページ直下)のブロックだけなので、例えばグループの中のセクションとかだと、セクションに全幅設定したとしても全幅になりません。

    ちょっと確認ができていないので、ご提示頂いた URL をあとでパソコンで確認してみますね。

    2
    いいねをした人:
    #110806
    アバター画像キタジマ タカシ
    参加者
    2397

    確認してみましたが、これマジで不思議ですね…セクションブロック(とその背景色に必要な要素)自体はちゃんと全幅になっていて、デベロッパーツールでみても幅100%になっているのになぜか背景色はコンテナー幅で表示されちゃうという…。

    ちょっともっと詳しく調べないとわからないので、平日に時間をとって改めて見てみます。時間かかってしまいすみません!

    2
    いいねをした人:
    #110808
    アバター画像キタジマ タカシ
    参加者
    2397

    あ! Snow Monkey のバージョンが古いからかも? Snow Monkey Blocks の最新版は基本的には Snow Monkey の最新版で意図した表示がされるようにつくっているので、Snow Monkey だけが古いと表示が崩れる可能性が高いです。もし Snow Monkey のバージョンを最新にできるのであればアップデートしてみてください。

    2
    いいねをした人:
    #110834
    徳本 奈穂子
    参加者
    23

    キタジマさん

    初歩的なことですみませんでした!フル幅にできました!!

    Snow Monkey Blocks と Snow Monkey 両方アップデートしたことで解決しました。

    お時間取らせて申し訳ありませんでした!

     

    esさんも、お時間いただいてありがとうございました!

    2
    いいねをした人:
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • トピック「親要素をはみ出してブラウザ幅に背景色がついたコンテンツを入れたい。」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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