幅広、全幅

幅広、全幅

子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
ワイドウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
子テーマのスタイルで、テーマサポートに、ブロックスタイル、幅広、横幅を追加した。
エディタ上では、両方とも適用された。
html :where(.wp-block)[data-align=wide]{max-width:1100px;}
html :where(.wp-block)[data-align=full]{max-width:none;}

になっている。

ワードウィジェットカテゴリ指定で、サイドバーを消し、コンテント幅制限を削除したらフロントでも適用された。
viewport-wide, viewport-wide-bg との調整が必要
本来なら、html幅の制限との調整も必要だが!

取り敢えず、両者ともviewport-wide と同じスタイルを当て、alignwideは、max1100となるよう、パディングを計算して調整。
画面幅が1100px以で計算するように修正。サイドバーがあっても広がるので、修正。

基本ブロック(wp-block)

幅広(alignwide)

全幅(alignfull)

上下のマージンの調整などが必要、段落同様に1emにするか。?

グループで囲み、グループを全幅にしてみた。内側のカラムズは、840px幅になっている。
が、フロント画面では一杯に広がる。合わせるなら、フロント用のスタイル追加が必要
viewport-wide-bgでは、背景の確認ができないので、こっちを使うほうがわかり易いかも。

背景画像の上下に、スペーサーを入れてある。スタイルで調整するより便利かも知れない。

掲載日時: 2023年6月5日(月) 09:41