ドキュメントコンテンツとデザイン

[PaaSのみ]{class="badge informative" title="Adobe Commerce on Cloud プロジェクト（Adobeで管理されるPaaS インフラストラクチャ）とオンプレミス プロジェクトにのみ適用されます。"}

レイアウトの更新

最終更新日： 2026年6月16日

作成対象：

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"},{"id":"c66ffd68-0f65-42bb-aa23-b4020f12e0bd"}

カスタムレイアウトの更新を使用する前に、ストアのページの構築方法と、layout​と​ layout update ​の用語の違いを理解することが重要です。 レイアウトとは、ページの視覚的および構造的な構成を指します。 レイアウトの更新とは、ページの作成方法を上書きまたはカスタマイズできる特定のXML命令セットを指します。

Commerce ストアのXML レイアウトは、コンテナとブロックの階層構造です。 すべてのページに表示される要素もあれば、特定のページにのみ表示される要素もあります。 レイアウト、コンテナ、ブロックについて詳しくは、フロントエンド開発者ガイド​の​ レイアウトの概要を参照してください。

​ ウィジェット ​ ツールは、既存の​ コンテンツブロック ​をページのデフォルトレイアウトに簡単に追加する方法です。 さらに高度な更新を行うには、XML レイアウト更新コードをサーバーに保存し、そのファイルを管理者からカスタム レイアウト更新として参照する必要があります。 プロセスの概要については、​ レイアウト更新の使用を参照してください。

次の図では、コンテナを参照する名前は黒で、ブロックタイプ（ブロッククラスパス）は青です。

標準ブロックレイアウト図 {width="500" modal="regular"}

ブロックタイプ
説明
page/html
このブロックの名前はrootで、レイアウト内のいくつかのルート ブロックの1つです。 独自のブロックを作成し、このタイプのブロックの標準名であるrootという名前を付けることもできます。 このタイプのブロックは、ページごとに1つだけ指定できます。
page/html_head
ブロック名はheadで、ルートブロックの子です。 このタイプのブロックは1 ページにつき1つしか存在できず、削除しないでください。
page/html_notices
ブロック名はglobal_noticesで、ルートブロックの子です。 このブロックがレイアウトから削除された場合、グローバル通知はページに表示されません。 このタイプのブロックは、ページごとに1つだけ指定できます。
page/html_header
ブロック名はheaderで、ルートブロックの子です。 このブロックは、ページ上部のビジュアルヘッダーに対応し、いくつかの標準ブロックを含んでいます。 このタイプのブロックは1 ページにつき1つしか存在できず、削除しないでください。
page/html_wrapper
デフォルトのレイアウトに含まれていますが、このブロックは非推奨（廃止予定）であり、後方互換性を確保するためにのみ含まれています。 このタイプのブロックは使用しないでください。
page/html_breadcrumbs
このブロックの名前はbreadcrumbsで、ヘッダーブロックの子です。 このブロックには、現在のページのパンくずリストが表示されます。 このタイプのブロックは、ページごとに1つだけ指定できます。
page/html_footer
ブロック名はfooterで、ルートブロックの子です。 フッターブロックは、ページ下部のビジュアルフッターに対応し、いくつかの標準ブロックを含みます。 このタイプのブロックは1 ページにつき1つしか存在できず、削除しないでください。
page/template_links
標準レイアウトには、このタイプのブロックが2つあります。 top.links ブロックはヘッダーブロックの子であり、上部のナビゲーションメニューに対応します。 footer_links ブロックはフッターブロックの子であり、下部のナビゲーションメニューに対応します。

Note:​例に示すように、テンプレートリンクを操作できます。
page/switch
標準レイアウトには、このタイプの2つのブロックがあります。 store_language ブロックはヘッダーブロックの子であり、最上位の言語スイッチャーに対応します。 store_switcher ブロックはフッターブロックの子であり、ボトムストアスイッチャーに対応します。
コア/メッセージ
標準レイアウトには、このタイプの2つのブロックがあります。 global_messages ブロックには、グローバル メッセージが表示されます。 messages ブロックは、他のすべてのメッセージを表示するために使用されます。 これらのブロックを削除すると、お客様にはメッセージが表示されません。
core/text_list
このタイプのブロックは、子ブロックをレンダリングするためのプレースホルダーとしてCommerce全体で広く使用されています。
core/profiler
このタイプのブロックのインスタンスは、ページごとに1つだけです。 これは内部Commerce プロファイラーに使用されます。他の目的には使用しないでください。

レイアウトの更新を使用したブロックの配置

​ レイアウトの更新により、ページのレイアウトをカスタマイズできます。 レイアウトの更新は、​ ウィジェット ​よりも柔軟性が高くなりますが、サーバーへのアクセスとXMLの基本的な知識が必要です。

次の手順では、レイアウトアップデートを使用してブロックをページに配置する方法を示します。 具体的な例と構文に関するヘルプについては、フロントエンド開発者ガイド​の一般的なレイアウトのカスタマイズ タスク ​を参照してください。

手順1：ブロックを作成する

  1. 配置する​ ブロック ​を作成します。

  2. レイアウトの更新手順で使用されるので、block_idに注意してください。

手順2:XMLでのレイアウト更新の作成

  1. XMLのレイアウト手順を作成してCMS ブロックを参照します。

  2. テーマ用にXML ファイルが保存されているレイアウトフォルダー内のサーバーに​ レイアウト手順を保存します。

    例：

    <theme_dir>/<Namespace>_<Module>/layout

    レイアウトハンドルは、cms_page_view_selectable_で始まるファイル名の後に、CMS ページのURL キー、レイアウト更新オプション、およびxml ファイルサフィックスが続きます。 次の例では、customer-serviceはページのURL キーであり、ChatToolはレイアウト更新をページに適用するために選択するオプションです。

    cms_page_view_selectable_<customer-service>_<ChatTool>.xml

    table 0-row-2 1-row-2 2-row-2 layout-auto
    要素 説明
    CMS ページ識別子 ページのURL キーにスラッシュ （/）がアンダースコア （_）で置き換えられています。
    レイアウト更新名 カスタムレイアウトの更新​に表示されるオプション。

手順3：ページからレイアウト更新を参照する

  1. 管理者 サイドバーで、Content > Elements>Pages​に移動します。

  2. ブロックを配置するページを見つけ、編集モードで開きます。

  3. 下にスクロールして、Design セクションの 拡張セレクター を展開します。

  4. ページに関連付けられている利用可能なすべてのレイアウト更新を表示するには、Custom Layout Update メニューをクリックします。

    ​ カスタムレイアウト更新リスト ​ {width="400" modal="regular"}

  5. ページに適用するレイアウト更新を選択します。

手順4：キャッシュの保存と更新

  1. 完了したら、Save & Close​をクリックします。

  2. ワークスペースの上部にあるメッセージで、Cache Management​をクリックし、無効なすべてのキャッシュ項目を更新します。

recommendation-more-help
commerce-admin-help-content-design