ページレイアウト

最終更新日： 2024年7月14日

トピック：
CMS

作成対象：

初心者
中級
管理者
ユーザー

ストア内の各ページのレイアウトは、ページのヘッダー、フッター、コンテンツ領域を定義する個別のセクションつまりコンテナで構成されます。レイアウトに応じて、各ページには 1 列、2 列、3 列またはそれ以上の列が含まれる場合があります。レイアウトはページの 平面図 と考えることができます。また、CMS、製品、カテゴリの各ページのデフォルトとして使用される特定のレイアウトを割り当てることができます。

ページ上では、コンテンツブロックはフロートとなり、ページレイアウトのセクションに従って使用可能なスペースが埋められます。ここで、コンテンツブロックが割り当てられて表示されます。レイアウトを 3 列から 2 列に変更すると、メイン領域の内容が拡張され、使用可能なスペースが埋められます。また、未使用のサイドバーに関連付けられているブロックが消えたように見えることにも注意してください。ただし、3 列のレイアウトを復元すると、ブロックが再び表示されます。この流動的なアプローチ リキッドレイアウト を使用すると、コンテンツを修正することなくページレイアウトを変更できます。個々のHTMLページでの作業に慣れている場合、このモジュール型の 構築ブロック アプローチには異なる考え方が必要です。

左側に棒グラフのページレイアウトを使用した、標準の 2 列

デフォルトのレイアウトを設定

管理者 サイドバーで、Stores/Settings/Configuration に移動します。
General の下の左パネルで、「Web」を選択します。
「」を展開し、「Default Layouts」セクションを展開します。
製品ページに使用する Default Product Layout を選択します。

この設定により、製品ページに対してデフォルトで使用されるレイアウトが決まります。
- No layout updates – 製品ページではレイアウトのアップデートを使用できません。
- Empty – 製品ページに空白のレイアウトを使用します。
- 1 column – 製品ページに 1 列のレイアウトを使用します。
- 2 columns with left bar – 製品ページ用に、左側にサイドバーがある 2 列のレイアウトを使用します。
- 2 columns with right bar – 製品ページ用に右側にサイドバーを持つ 2 列のレイアウトを使用します。
- 3 columns – 製品ページに対して左右にサイドバーを持つ 3 列のレイアウトを使用します。
ページビルダーが有効になっている場合は、追加の全幅オプションを使用できます。その後、ページビルダーのコンテンツツールを使用して、製品ページのレイアウトをデザインできます。
- Page -- Full Width – 製品ページに ページ – 全幅 レイアウトを使用します。
- Category -- Full Width – 製品ページに カテゴリ – 全幅 レイアウトを使用します。
- Product -- Full Width - （推奨）製品ページに 製品 – 全幅 レイアウトを使用します。
カテゴリページに使用する Default Category Layout を選択します。

この設定により、カテゴリページに既定で使用されるレイアウトが決まります。
- No layout updates - カテゴリのページでは、レイアウトの更新を使用できません。
- Empty - カテゴリページに空白のレイアウトを使用します。
- 1 column - カテゴリページに 1 列レイアウトを使用します。
- 2 columns with left bar - カテゴリページに対して、左側にサイドバーがある 2 列のレイアウトを使用します。
- 2 columns with right bar - カテゴリページに対して、右側にサイドバーを持つ 2 列のレイアウトを使用します。
- 3 columns - カテゴリページに対して左右にサイドバーを持つ 3 列のレイアウトを使用します。
ページビルダーが有効になっている場合は、追加の全幅オプションを使用できます。その後、ページビルダーのコンテンツツールを使用して、カテゴリページのレイアウトをデザインできます。
- Page -- Full Width - カテゴリページに ページ – 全幅 レイアウトを使用します。
- Category -- Full Width - （推奨）カテゴリページに カテゴリ – 全幅 レイアウトを使用します。
- Product -- Full Width - カテゴリページに 製品 – 全幅 レイアウトを使用します。
CMS ページに使用する Default Page Layout を選択します。

この設定により、CMS ページに対してデフォルトで使用されるレイアウトが決まります。
- No layout updates - CMS ページではレイアウトの更新を使用できません。
- Empty - CMS ページに空白のレイアウトを使用します。
- 1 column - CMS ページに 1 列レイアウトを使用します。
- 2 columns with left bar - CMS ページ用に、左側にサイドバーがある 2 列のレイアウトを使用します。
- 2 columns with right bar - CMS ページ用に、右側にサイドバーがある 2 列のレイアウトを使用します。
- 3 columns - CMS ページ用に左右にサイドバーを持つ 3 列のレイアウトを使用します。
ページビルダーが有効になっている場合は、追加の全幅オプションを使用できます。その後、ページビルダーのコンテンツツールを使用して、CMS ページのレイアウトをデザインできます。
- Page -- Full Width - （推奨） CMS ページに ページ – 全幅 レイアウトを使用します。
- Category - Full Width - CMS ページに カテゴリ – 全幅 レイアウトを使用します。
- Product - Full Width - CMS ページに 製品 – 全幅 レイアウトを使用します。
完了したら、「Save Config」をクリックします。