ページのレイアウトを変更する
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
このトピックで説明する手順には、エクスペリエンス エディターを使用します。
レイアウトは、ページを列に分割するレスポンシブグリッドを使用します。「行スプリッタ」コンポーネントと「列スプリッタ」コンポーネントを使用して、ページ構造をさらに定義し、使用可能なスペースを水平方向と垂直方向に分割できます。
ページを作成すると、デフォルトでは、ヘッダー、メイン、フッターの3つのプレースホルダーを含む基本レイアウトが含まれます。これらのプレースホルダーに Column Splitter または Row Splitter コンポーネントを追加できます。最後に、新しく追加した列または行にコンポーネントを追加します。
また、コンポーネントのグリッド設定を変更することで、ページのレイアウトを変更することもできます。
列スプリッターコンポーネントを追加する
列スプリッターコンポーネントを使用すると、ページを列に分割することでページに構造を追加できます。列スプリッターコンポーネントは、他のコンポーネントのプレースホルダーにすぎず、コンテンツだけを保持することはできません。たとえば、特定の列にテキストを追加するには、まずその列にリッチテキストコンポーネントを追加する必要があります。
このトピックでは、エクスペリエンス エディターで列スプリッター コンポーネントを使用する方法について説明します。ただし、Pagesでコンポーネントを使用することもできます。
列スプリッターコンポーネントをページに追加するには:
-
ページを開き、ツールボックスを開きます。
-
Page Structureセクションから、Column Splitterコンポーネントを追加するプレースホルダにドラッグします。ドラッグすると、プレースホルダが青色に変わります。
または、HomeタブでComponentをクリックしてSelect a renderingダイアログ ボックスを開きます。
-
フローティング ツールバーで、
Add a new column at the end of the splitterをクリックします。追加した列を表示するには、ツールバーの下のどこかをクリックします。
-
列を追加または再配置するには、新しいツールバーで、次の項目をクリックします。
-
Add a new column
- 現在選択されている列の隣に列を追加します。 -
Move the selected column to the right
- 現在選択されている列を1つ右に移動します。 -
Move the selected column to the left
- 現在選択されている列を1つ左に移動します。 -
Remove the selected column
- 現在選択されている列を削除します。
-
-
コンポーネントを列に追加するには、ツールバーからコンポーネントをドラッグするか、列を選択してから「 Add here」をクリックします。たとえば、画像コンポーネントを挿入してロゴを追加します。
行スプリッターコンポーネントを追加する
行スプリッターコンポーネントを使用すると、ページを行に分割できます。行スプリッターコンポーネントは、他のコンポーネントのプレースホルダーにすぎず、コンテンツだけを保持することはできません。たとえば、特定の行にテキストを追加するには、まずリッチテキストコンポーネントを行に追加する必要があります。
このトピックでは、エクスペリエンス エディターで行スプリッター コンポーネントを使用する方法について説明します。ただし、Pagesでコンポーネントを使用することもできます。
行分割コンポーネントをページに追加するには:
-
ページを開き、ツールボックスを開きます。
-
Page Structureセクションで、Row Splitterコンポーネントをコンポーネントを追加するプレースホルダにドラッグします。ドラッグすると、プレースホルダが青色に変わります。
または、HomeタブでComponentをクリックしてSelect a renderingダイアログ ボックスを開きます。
-
フローティング ツールバーで、Add a new row at the end of the splitterをクリックします。追加した行を表示するには、ツールバーの下のどこかをクリックします。
-
行を追加または再配置するには、新しいツールバーで、次の項目をクリックします。
-
Add a new row
- 現在選択されている列の隣に列を追加します。 -
Move the selected row down
- 現在選択されている列を1つ右に移動します。 -
Move the selected row up
- 現在選択されている列を1つ左に移動します。 -
Remove the selected row
- 現在選択されている列を削除します。
-
-
コンポーネントを行に追加するには、ツールボックスからコンポーネントをドラッグするか、行を選択してからAdd hereをクリックします。
