全幅背景内のコンテンツ再度

全幅背景内のコンテンツ幅コンテンツ、幅広コンテンツ、背景画像有り、無しなどのテストを再度まとめて行う。

全幅背景内の段落
背景にbg-wrapperクラス、背景色(グレー)指定
段落には何も指定せず。編集画面では、コンテンツ幅になるが、フロントでは、背景側のパディングの内側に広がる。エディタとフロントの見た目が不一致になる。

全幅背景内の段落
背景にbg-wrapperクラス、背景色(琥珀)指定、content-block-wrapperクラスを追加指定
bg-wrapperクラスは、スタイルで、パディング付与等のため。
段落には何も指定せず。編集画面及びフロント画面の両方で、コンテンツ幅の段落になる。フォントなどの細かな違いを除けば、一応一致する。

後は、背景画像などの指定に、bg-* クラスを追加指定するか。全幅の背景自体にカバーブロックを利用するかなどの調整が効く筈。

背景側に、content-block-wrapperクラスを指定せず、コンテンツ側にcontentwide指定をする方法もあるかも知れないが、この場合は、内側の全てのコンテンツに指定するか、もしくは、グループ等で囲み、囲み側に指定する必要がある。

全幅背景内の幅広段落(段落は幅広オプションが無いので、更にグループでラップし、幅広に。グループの背景色をピンクに!)
段落自体は、wp-blockの指定があるため、編集画面では、コンテンツ幅に制約される。
背景にbg-wrapperクラス、背景色(グレー)指定
段落には何も指定せず。編集画面及びフロント画面の両方で、幅広になる。フォントなどの細かな違いを除けば、一応一致する。

この段落をグループで囲み、content-blockクラスを付与してみる。
同じグループにalignwideも指定している。
実際にはやるべきでは無いが、フロント側では、alignwideより、content-block側が優先されてる。インポータント指定があっても、なくても。! 編集画面では、幅広(コンテンツ幅のスタイルはフロント側のみのため)
margin:0 autoは、margin-leftとmargin-rightに分けて、auto指定が必要になる。

全幅背景内の段落
背景にbg-wrapperクラス、背景色(琥珀)指定、content-block-wrapperクラスを追加指定
bg-wrapperクラスは、スタイルで、パディング付与等のため。
段落には何も指定せず。編集画面及びフロント画面の両方で、コンテンツ幅の段落になる。フォントなどの細かな違いを除けば、一応一致する。

後は、背景画像などの指定に、bg-* クラスを追加指定するか。全幅の背景自体にカバーブロックを利用するかなどの調整が効く筈。

背景側に、content-block-wrapperクラスを指定せず、コンテンツ側にcontentwide指定をする方法もあるかも知れないが、この場合は、内側の全てのコンテンツに指定するか、もしくは、グループ等で囲み、囲み側に指定する必要がある。

掲載日時: 2023年10月16日(月) 10:11