レイアウトを編集する – Yext Help

レイアウトは、ページグループのすべてのページの構造とデザインを定義します。レイアウトはサイトのグローバルスタイルを継承しますが、個々のセクションのデザインをカスタマイズすることもでき、セクションレベルでフォント、色、コンテンツのマッピングを変更できます。各ページグループには1つのレイアウトがあり、そのグループのすべてのエンティティはそのレイアウトを使用します。

注：レイアウトテンプレートの編集では、変更内容はプレビュー中のページだけでなく、ページグループ内のすべてのページに適用されます。

レイアウトエディタにアクセスする

ページグループ画面で、編集するページグループの横にある [レイアウトを編集] をクリックします。

レイアウトエディタ。番号が付いたコールアウトはこの記事全体で参照されています。

#	領域	用途
1	右パネル	セクションプロパティを編集。コンテンツをエンティティフィールドにマッピングするか、静的な値を設定し、フォントや色を変更する
2	ページプレビュー	変更内容のライブプレビュー。任意のセクションをクリックして選択
3	左パネル	利用可能なセクションとレイアウトの概要を表示。ここからセクションをプレビューにドラッグする
4	ページグループ / エンティティのトグル	ページグループ、エンティティ、ロケールを切り替えてプレビューする
5	エンティティフィールドのトグル	Knowledge Graphフィールドがレイアウトで使用されている箇所を強調表示する
6	パネルのトグル	左右のパネルを折りたたむか展開して作業スペースを広げる
7	ビューポートコントロール	デスクトップ、タブレット、モバイルビューを切り替えて拡大縮小する
8	変更コントロール	変更を元に戻す、やり直す、破棄する、または公開する
9	プレビュー / ライブリンク	新しいタブで共有可能なプレビューまたはライブサイトを開く
10	更新ライブラリ	最新の製品アップデートを取り込む（遅れている場合のみ表示されます）

作業中は変更内容が自動的に保存されるため、作業を中断して後で再開しても、進捗状況は失われません。

セクションを追加、並べ替え、削除する

セクションはレイアウトの構成要素です。左側のパネル (3) には、セクションパネルで使用可能なすべてのセクションと、現在のレイアウトの概要が表示されます。

セクションを追加するには： セクションをセクションパネルからプレビュー (2) の希望の位置にドラッグします。

セクションの順序を変更するには：セクションをプレビュー (2) または左パネルのアウトライン (3) のいずれかにドラッグアンドドロップします。

セクションを削除するには、プレビューまたはアウトラインでセクションをクリックして選択し、表示されるアクションバーのゴミ箱アイコンをクリックします。

[ラベル表示] ボタンを使用すると、現在のレイアウトのすべての要素のコンテンツソースが静的かKnowledge Graphであるかを一目で確認できます。

注：左側のパネルの利用可能なセクションは、サイトのライブラリから取得されます。本来表示されるはずのセクションが表示されない場合は、ライブラリを更新する必要がある可能性があります。「ライブラリを更新する」をご覧ください。

セクションプロパティを編集する

プレビュー (2) またはアウトライン (3) の任意のセクションをクリックして選択します。そのプロパティが右側のパネル (1) に表示されます。一般的な操作は以下のとおりです。

コンテンツをKnowledge Graphのエンティティフィールドにマッピングするか、静的な値を設定する（「セクションプロパティをマッピングする」を参照）
フォントや色をセクションレベルで変更してグローバルスタイルを上書きする
セクション内で要素を表示または非表示にする

エンティティフィールドトグル (5) を使用して、Knowledge Graphから取り込まれたレイアウトのフィールドを強調表示します。これはコンテンツマッピングが正しく設定されていることを確認するのに役立ちます。

カスタムコードを追加する

カスタムコードコンポーネントを使用すると、カスタムのHTML、CSS、JavaScriptをページに直接追加できます。組み込みセクションを通じて利用できない機能が必要な場合に使用します。

Knowledge Graphのフィールド値をカスタムコードに埋め込むには、ハンドルバー記法を使用します。

<div class="custom-banner">
  <h2>Welcome to {{name}}</h2>
  <p>Visit us at {{address.line1}}, {{address.city}}</p>
  <p>Call us: {{mainPhone}}</p>
</div>

カスタムコードのベストプラクティス：

可能な限りJavaScriptではなく、HTMLとCSSを優先します。静的コンテンツは検索エンジンやAIクローラーにより確実にインデックスされます。JavaScriptを多用した実装は正しくインデックスされない場合があります。
最初に組み込みセクションを使用します。Yext提供のセクションはYextが管理し、アクセシビリティとSEO向けに最適化されています。カスタムコードは、組み込みのセクションの対象でない機能のみに使用します。

セクションをコピーして貼り付ける

すべての環境で同じ表示になる必要があるヘッダーやフッターなど、共有のセクションがある複数のページグループを持つ場合は、最初から再構成する代わりに、完全に構成されたセクションを1つのレイアウトからコピーして貼り付けることができます。

セクションをコピーして貼り付けるには：

「ページグループ」画面で、コピーしたいセクションがあるページグループの横にある「レイアウトの編集」をクリックします。
プレビューまたはアウトラインのセクションをクリックします。セクションの上にアクションバーが表示されます。
コピーアイコン（アクションバーの最初のアイコン）をクリックしてください。
ページグループ画面に戻り、目的のページグループの横にある [レイアウトを編集] をクリックします。
セクションがまだレイアウトに含まれていない場合は、左側のパネルからドラッグします。次にそれをクリックして選択します。
貼り付けアイコン（アクションバーの2つ目のアイコン）をクリックします。

ローカライズされた翻訳を含む、すべてのプロパティがコピーされます。通常通りプレビューし、編集して公開します。

変更内容をプレビューする

公開する前に、異なるエンティティやビューポート間の変更を確認します。

ページプレビュー（2） — 変更を加えると、プレビューにリアルタイムで反映されます。
エンティティトグル（エディタ上部）— ページグループのエンティティを切り替えて、異なるコンテンツでレイアウトが正しく表示されることを確認します。
ビューポートコントロール (7) — デスクトップ、タブレット、モバイルの表示を確認します。
変更をプレビュー (9) — すべてのローカル変更の共有可能な特定の時点のプレビューリンクを生成します。このスナップショットは、その後の編集内容を反映して更新されないことに注意してください。後続の変更を確認するには、新しいプレビューを生成します。

変更内容を公開する

変更コントロール (8) の [公開] をクリックすると、レイアウトの更新がページグループのすべてのページに同時に反映されます。ページがすでに公開されている場合、このボタンには [#ページを更新]と表示されます。

確認するには、ライブサイト (9) を開いてページをリロードし、更新内容が反映されていることを確認します。

注：デプロイメントが進行中またはサイトにエラーがある場合、[公開] ボタンは無効になります。ローカル環境での変更と保存は引き続き可能です。デプロイが完了するか、エラーが解決すると公開準備が整います。詳細については、「Pagesを表示してエラーを調査する」をご覧ください。