V4のFlexboxとコンテナウイジェットの設定を比較

投稿日:2026年10月25日

最終更新日:2026年10月27日


V4のFlexboxとコンテナの設定箇所が変わっていますので、比較してみました。
変わった箇所だけで、比較的見つけやすい場所は省略しています。
また、仕様が変わった箇所は解説付きでキャプチャを載せていますので、参考にしてください。
左がコンテナで右がFlexboxです。

HTMLタグ

コンテナのhtmlタグ
Flexboxのhtmlタグ

オーバーフロー

コンテナのオーバーフロー
スタイルのタブのサイズ

Z-index

コンテナのZindexの設定画面
FlexboxのZindexの設定画面
Flexboxは位置の設定ではZindexが使えない

Z-indexはコンテナの高度な設定のタブにあります。
Flexboxはスタイルのタブの位置にZ-indexの設定があります。
位置をデフォルトの状態でZ-indexを設定しようとすると以下のアラートがでます。

z-index は配置 (position) が設定されたエレメントにのみ機能します。重ね合わせを有効化するには、配置を relative、absolute、または fixed に変更してください。

「位置」と「配置」は同じと思って良いでしょう。
その上で、英語と日本語の対比表を作ってみました。

CSS表記日本語設定意味
relative相対元の配置を基準にする
absolute絶対親要素などを基準に自由に配置する
fixed固定画面に対して固定する
staticデフォルト(通常)通常の配置

ボックスシャドウ

シェイプ区切り

Flexboxにシェイプ区切りはこの記事を書いている時点では、なくなっています。
今後復活に期待です。

背景

Elementorのコンテナの背景
ElementorのFlexboxの背景
ElementorのFlexboxに画像を背景にする

コンテナの背景には一般的な色や画像、色のグラデーション、動画、スライドの設定があります。
一方、Flexboxには動画やスライドといった設定は見当たりません。
設定場所はスタイルの背景で比較的見つけやすいと思います。

設定の中にクリッピングとこれまでになかったメニューが追加されています。
それぞれの効果は以下のとおりです。

要素全体(Element)

コンテナ全体を対象にします。パディングを含む領域だけでなく、ボーダー部分も含めた要素全体に背景を適用する設定です。

用途:コンテナ全体に背景色や背景画像を表示する。

パディングのエッジ(Padding Edge)

コンテンツとパディングを合わせた領域が対象です。ボーダーの外側までは背景の対象にしません。

用途:ボーダーの内側に背景を収めたいとき。

コンテンツのエッジ(Content Edge)

テキストや画像など、実際のコンテンツが配置される領域が対象です。パディング部分は含みません。

用途:コンテンツ部分だけに背景を適用したいとき。

テキスト(Text)

テキストの描画部分を対象にする設定です。通常のコンテナ背景のように領域全体を塗りつぶすのではなく、文字の形に沿って背景画像などを表示する用途で使います。

用途:文字の中に画像を表示する、画像を文字で切り抜いたような演出。

ことばでは分かりづらいので、AIが画像でまとめてくれましたので、貼っておきます。

AIがまとめたElementorの背景設定のイメージ

まとめ

以上のようにこれまでと設定値が変わっていたり、仕様が変わっているケースがあるので、この記事を参考に設定位置を探してみてください。

コメントを残す