- このトピックには10件の返信、3人の参加者があり、最後に
により1年、 7ヶ月前に更新されました。
-
投稿
-
【お使いの 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は見出しとフォームのグループにつけたクラス)
↓ブラウザ幅になりません。
よろしくお願いいたします。
いいねをした人: 居ませんesさん！ありがとうございます！
やりたいことはまさにそれで、私の管理画面側のプレビューもその通りになっているのですが、
表側の画面ではやはり画面全体の幅にはならず・・・設定等の問題でしょうか？
いいねをした人:徳本さん、こんにちは。改めまして、先日はTwitterでもご対応いただき、ありがとうございました。^^
あらら、そうなのですね。。私の方はデモ環境でCSSもゼロの状態でしたので、試しに徳本さんが記述されているCSSを反映してみたところ、下記画像のとおり、それでもフォームの要素は中央に問題なく配置されていました。※加えて、管理画面でのブロックの内容も見えるようにしてみました。
反映したCSSは、
.c-entry__content { position: relative; overflow: hidden; }から
.attachment-large { border: 3px solid #ccc; }まで、です。
Snow Monkey の設定でそうなってしまっているのかまでは確認できなかったのですが、もし可能であれば一度初期状態でお試しいただいて、問題が生じる部分の切り分けができるとよいかもですね。
私の方でも、設定でそうなってしまう可能性があるのかは、引き続き確認してみようと思います。
取り急ぎのお返事で申し訳ないのですが、よろしくお願いいたします。^^いいねをした人:徳本さん
追伸です。
設定を見直していて、あ、これかな！というものがあったので、一度こちらをご確認いただけますか？
カスタマイザーの画面で固定ページを表示させた状態で、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 -->いいねをした人:esさん、お時間を取っていただいて本当にありがとうございましたm(_ _)m
感謝しています( – 人 – )
とりあえず現状の報告としましては
カスタマイザーの固定ページのデザイン設定：フル幅
—–
新規固定ページ1：
テンプレート – フル幅
セクションブロック – 全幅
→ セクションブロック – 全幅表示◯ ただし、その他のページの要素も全幅になっていて希望のレイアウトではない。
—–
新規固定ページ2 :
テンプレート – 1カラム
セクションブロック – 全幅
→ セクションブロックも親要素内に収まってしまう×
—–
該当ページ :
テンプレート – フル幅
セクションブロック – 全幅
→ セクションブロックも親要素内に収まってしまう×
—–
という感じで、該当ページではフル幅にできるところは全部フルにしたと思うのですがNGです。
ただ、新規固定ページの時と動きが違うので私のCSSが何か影響している可能性はあるかもしれないと思っています・・・
もし、何かわかる方いらっしゃったらご助言いただけますと助かります・・・m(_ _)m
いいねをした人:本来は es さんが書かれているようにサイドバーがないレイアウトの場合は全幅にするだけで希望の表示になるはずです。ただ、全幅が適用されるのはルート（ページ直下）のブロックだけなので、例えばグループの中のセクションとかだと、セクションに全幅設定したとしても全幅になりません。
ちょっと確認ができていないので、ご提示頂いた URL をあとでパソコンで確認してみますね。
いいねをした人:確認してみましたが、これマジで不思議ですね…セクションブロック（とその背景色に必要な要素）自体はちゃんと全幅になっていて、デベロッパーツールでみても幅100%になっているのになぜか背景色はコンテナー幅で表示されちゃうという…。
ちょっともっと詳しく調べないとわからないので、平日に時間をとって改めて見てみます。時間かかってしまいすみません！
いいねをした人:あ！ Snow Monkey のバージョンが古いからかも？ Snow Monkey Blocks の最新版は基本的には Snow Monkey の最新版で意図した表示がされるようにつくっているので、Snow Monkey だけが古いと表示が崩れる可能性が高いです。もし Snow Monkey のバージョンを最新にできるのであればアップデートしてみてください。
いいねをした人:
- トピック「親要素をはみ出してブラウザ幅に背景色がついたコンテンツを入れたい。」には新しい返信をつけることはできません。