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

こんにちは。

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

♥ 3

いいねをした人:

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

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

反映したCSSは、

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

から

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

まで、です。

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

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

♥ 1

いいねをした人:

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

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

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

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

あまり意味はないかもですが、一応、私の方で表現できている状態のブロックのコードを共有してみますね。フォーム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

いいねをした人:

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

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

♥ 2

いいねをした人:

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

♥ 2

いいねをした人: