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

ページ設定

ページの主なセクションは、標準的なHTML タグのセットによって制御されています。 これらのタグの中には、ページの各セクションで使用されるフォント、色、サイズ、背景色、画像の選択を決定するために使用できるものもあります。 その他の設定では、ヘッダーのロゴやフッターの著作権表示などのページ要素を制御できます。 これらのセクションは、HTML ページの基本構造に対応しており、多くの基本プロパティは管理者から設定できます。

HTML ページセクション ​ {width="700" modal="regular"}

HTMLヘッド

HTML ヘッドセクションの設定は、HTML ページの<head> タグに対応しており、各ストアビューに対して設定できます。 このセクションには、ページタイトル、説明、キーワードのメタデータに加えて、ファビコンとその他のスクリプトへのリンクが含まれています。 検索エンジンロボットの手順とストアデモ通知の表示も、この節で設定します。

HTML ヘッドの設定

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

  2. 設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. その他の設定​で、HTML Head セクションの 拡張セレクター を展開します。

    HTML Headの設定 {width="500" modal="regular"}

  4. 必要に応じてfaviconを更新します。

  5. 必要に応じて、ページタイトルの設定を更新します。

    • Default Page Title
    • Page Title Prefix
    • Page Title Suffix

    接尾辞や接頭辞をデフォルトのタイトルと共に使用して、2部または3部のタイトルを作成できます。 接頭辞または接尾辞とデフォルトのタイトルの間の区切り文字として、縦棒またはコロンを追加できます。

  6. 検索エンジン最適化(SEO)をサポートし、検索結果から顧客をストアに誘導するのに役立つメタデータを追加または変更します。

    • Default Meta Description
    • Default Meta Keywords
  7. 必要に応じて​ Scripts and Style Sheets ​を入力します。

    note
    NOTE
    Scripts and Style Sheets フィールドに入力されたすべてのJavaScriptは、コンテンツセキュリティポリシー(CSP)の設定でホワイトリストに登録する必要があります。そうしないと、チェックアウトページで実行されません。 詳しくは、​ コンテンツセキュリティポリシーを参照してください。
  8. 必要に応じて、​ デモストア通知を有効または無効にします。

  9. 完了したら、Save Configuration​をクリックします。

HTML Head フィールドの説明

フィールド
範囲
説明
Favicon Icon
ストアビュー
ブラウザーのアドレスバーとタブに表示される小さなグラフィック画像をアップロードします。 使用可能なファイル形式:ICO、PNG、APNG、GIF、JPG(JPEG)。 すべてのブラウザーがこれらの形式をサポートしているわけではありません。
Default Page Title
ストアビュー
ブラウザーで表示されるときに、各ページのタイトルバーに表示されるタイトル。 デフォルトのタイトルは、個々のページに別のタイトルが指定されていない限り、すべてのページに使用されます。
Page Title Prefix
ストアビュー
タイトルの前に接頭辞を追加して、2部または3部のタイトルを作成できます。 縦棒またはコロンは、接頭辞の末尾に区切り記号として使用して、メインタイトルのテキストと区別できます。
Page Title Suffix
ストアビュー
タイトルの後に接尾辞を追加して、2つまたは3つの部分からなるタイトルを作成できます。 縦棒またはコロンは、接頭辞の末尾に区切り記号として使用して、メインタイトルのテキストと区別できます。
Default Meta Description
ストアビュー
説明は、検索エンジンのリスト用にサイトの概要を提供します。160文字以下にする必要があります。
Default Meta Keywords
ストアビュー
ストアを表す一連のキーワード。各キーワードはコンマで区切られます。
Scripts and Style Sheets
ストアビュー
終了<head> タグの前にHTMLに含める必要があるスクリプトが含まれています。 例えば、<body> タグの前に配置する必要があるサードパーティ JavaScriptは、ここに入力できます。
Display Demo Store Notice
ストアビュー
ページ上部のデモストア通知の表示を制御します。 オプション:Yes / No

ヘッダー

ヘッダー設定は、ストアロゴへのパスを識別し、ロゴの代替テキストとウェルカムメッセージを指定します。

​ ヘッダー設定設定 {width="400" modal="regular"}

ヘッダーの設定

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

  2. 設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. その他の設定​で、Header セクションの 拡張セレクター を展開します。

  4. ストアビューに必要な変更を行います。

  5. 完了したら、Save Configuration​をクリックします。

ヘッダーフィールドの説明

フィールド
範囲
説明
Logo Image
ストアビュー
ヘッダーに表示されるロゴへのパスを指定します。 サポートされているファイル形式:PNG、GIF、JPG(JPEG)
Logo Attribute Width
ストアビュー
ロゴ画像の幅(ピクセル単位)。
Logo Attribute Height
ストアビュー
ロゴ画像の高さ(ピクセル単位)。
Welcome Text
ストアビュー
ウェルカムメッセージは、ページのヘッダーに表示され、ログインしている顧客の名前が含まれます。
Logo Image Alt
ストアビュー
ロゴに関連付けられている代替テキスト。
Translate Title
ストアビュー
Page TitleまたはMeta Titleを翻訳するかどうかを決定します。

フッター

フッター設定セクションでは、ページの下部に表示される著作権通知を更新し、終了<body> タグの前に配置する必要があるその他のスクリプトを入力できます。

​ フッター設定設定 {width="400" modal="regular"}

フッターの設定

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

  2. 設定するストアビューを見つけ、Action​列の​ Edit ​をクリックします。

  3. その他の設定​で、Footer セクションの 拡張セレクター を展開します。

  4. Copyright​と​ Miscellaneous HTML ​の設定に必要な変更を加えます。

    note
    NOTE
    Miscellaneous HTML フィールドに入力されたすべてのJavaScriptは、コンテンツセキュリティポリシー(CSP)の設定でホワイトリストに登録する必要があります。そうしないと、チェックアウトページで実行されません。 詳しくは、​ コンテンツセキュリティポリシーを参照してください。
  5. 完了したら、Save Configuration​をクリックします。

フッターフィールドの説明

フィールド
範囲
説明
Miscellaneous HTML
ストアビュー
終了<body> タグの直前に配置する必要があるサーバーに、その他のスクリプトをアップロードできる入力ボックス。
Copyright
ストアビュー
各ページの下部に表示される著作権表示。 著作権シンボルを含めるには、次のようにHTMLの文字エンティティ \&copy;を使用します。\&copy; 2021 Commerce Demo Store. All Rights Reserved. サンプルの著作権表示を必ず自分の著作権表示に置き換えてください。
Display Report Bugs Link
ストアビュー
バグ報告リンク(一部のテーマでサポートされています)が有効か無効かを判断します。
recommendation-more-help
commerce-admin-help-content-design