グローバルスタイルを編集 – Yext Help

グローバルスタイルは色、フォント、タイポグラフィなどブランドデザインの設定で、サイト全体のすべてのページに適用されます。グローバルスタイルを変更すると、すべてのページが一度に更新されるため、ブランドアイデンティティは1か所で設定するだけで済みます。

グローバルスタイルエディタにアクセスする

[ページグループ] 画面で、[グローバルスタイルを編集] をクリックします。

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

#	領域	用途
1	右パネル	色、フォント、その他のグローバルスタイリングオプションの設定
2	ページプレビュー	変更のリアルタイムプレビュー
4	ページグループ / エンティティのトグル	ページグループ、エンティティ、ロケールを切り替えてプレビューする
6	パネルのトグル	右側のパネルを折りたたむか展開して、作業スペースを広げる
7	ビューポートコントロール	デスクトップ、タブレット、モバイルを切り替えて拡大縮小する
8	変更コントロール	変更を元に戻す、やり直す、破棄する、または公開する
9	プレビュー / ライブリンク	新しいタブで共有可能なプレビューまたはライブサイトを開く
10	更新ライブラリ	最新の製品アップデートを取り込む（遅れている場合のみ表示されます）

右側のパネル (1) で、4つの基本色を入力してサイトのカラーパレットを定義します。

カラーピッカーを使用して各色の値を入力します。設定すると、システムは自動的に6種類の明度（明色と暗色のバリエーション）を生成します。これにより、手動で調整することなくサイト全体の背景色として適用できます。

アクセシビリティについて： カラーシステムはアクセシビリティを優先します。自動生成された色は、WCAG AAのコントラスト要件を満たす前景のテキスト色と自動的にペアになります。4つの基本色は背景として使用できますが、正確な値はユーザーが定義するため、WCAG AAへの準拠は保証されません。

右側のパネル (1) で、サイトのタイポグラフィ階層の各レベルに対しフォントファミリーとサイズを選択します。

フォントには1,500以上のオプションがあります。現在、ラテン文字を含むフォントのみがサポートされています。

公開する前に、エディタを使用して、サイト全体でスタイルがどのように表示されるかを確認します。

ページプレビュー (2) — 変更を加えると、プレビューにリアルタイムで反映されます。
ページグループ / エンティティのトグル (4) — 異なるページグループとエンティティを切り替えて、サイト全体でスタイルが正しく表示されていることを確認します。また、ここから直接Knowledge Graphのエンティティを開いて、内容を変更することもできます。
ビューポートコントロール (7) — デスクトップ、タブレット、モバイルビューを切り替えて、応答性を確認します。
変更をプレビュー (9) — 未公開の編集内容すべてを含む共有可能なプレビューリンクを生成します。これを活用して、配信前にステークホルダーからのフィードバックを集めます。プレビューは地域ごとの変更を反映します。ライブサイトは公開された変更のみを反映します。
パネルの切り替え (6) — 右側のパネルを折りたたむと、プレビュー作業スペースが広くなります。

注：ページグループとエンティティを切り替えてプレビューすることはできますが、グローバルスタイルエディタからセクションを追加、並べ替え、または削除することはできません。ページ構造を変更するには、レイアウトエディタを使用します。

変更は作業中に自動的に保存されます。アップデートを公開する準備ができたら：

スタイルはすべてのページとすべてのページグループで同時に公開されます。

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

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