Gridレイアウト設定
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このトピックでは、以前にContent Editorで構築されたコンポーネントの設定方法について説明します。代わりにComponentsで構築されたコンポーネントについて知りたい方は、Componentsのドキュメントをご覧ください。
ページビルダーでは、グリッドレイアウトの設定が、選択したプレースホルダー内のコンポーネントのサイズや位置に影響を与えます。
このヘッダーの下に表示される設定は、サイトが使用するグリッドによって異なります。デフォルトでは、グリッドレイアウトはBootstrap v5.0に基づいて構築されており、12列で構成されています。
グリッドは画面幅やエディタービューで選択したデバイスの種類に基づく6つのレスポンシブブレークポイントをサポートします。つまり、各ブレークポイントごとにコンテナやカラムのサイズや挙動を、超小(スマートフォン画面)、小、中(タブレット)、大XL、XLLのグリッドレイアウトなどで異なる設定セットでコントロールできます。
レイアウトグリッド構成は、より低いブレークポイントから継承できますが、変更することも可能です。
-
低いブレークポイントから継承した構成とは異なるColumn Span構成を選択するには、Override inheritanceをクリックしてください。レイアウトに加える変更は、現在のブレークポイントやそれ以上のブレークポイントに影響を与えます。
-
Column Span設定をデフォルト値に戻すには、Reset to inherit sizeをクリックしてください。
コンポーネントの列数を手動で設定する場合は、使用するすべてのデバイスタイプごとにレイアウトを確認することをお勧めします。
大きなサイズに設定しない場合は、最も近い小さなデバイスサイズの設定が使われます。例えば、未設定のデスクトップは、タブレットのサイズが指定されている場合、その設定をタブレットから使います。タブレットが未設定の場合、デスクトップはモバイル用の設定を使います。
以下のパラメータも設定可能です:
-
Size - サイズ設定はエディターに表示されるグリッドサイズに依存します。以下は一般的な設定の一部です:
-
スクロールバーを使って、コンポーネントの幅として持てる列数を手動で設定します。スクロールバーが表示されない場合は、Overwriteをクリックします。
-
Auto-fit to content中身に応じて、コンポーネントをできるだけ小さくします。
-
Auto-fill rows and columns同じ領域に配置されている他の部品の数に応じて、自動的に可能な限り幅を広げます。
-
-
Offset - 内容を右に移動します。スクロールバーを使って、内容を何列分オフセットすべきかを示します。
-
Order - 同じコンテナ内に複数の要素がある場合、内容の視覚的な順序を制御する。
-
Component alignment - コンポーネントの配置方法を定義します。
-
Display - display CSSプロパティは、要素がブロック要素として扱われるかインライン要素として扱われるか、およびその子に使われるレイアウト(例えばテーブルやフレックス)を設定します。クラスは様々な効果のために組み合わせられます。