ドキュメントCommercePage Builder

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

要素 – HTML コード

Last update: Tue Oct 14 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

  • 初心者
  • 中級
  • ユーザー

HTML コード コンテンツタイプを使用して、Page Builder ステージ ​ にHTML、CSS、JavaScript コードのスニペットを追加します。 例えば、カスタム HTMLを追加し、ページ上の要素に適用できる CSS クラスを宣言する場合があります。 また、サードパーティのプロバイダーから受け取ったロゴ、ボタン、バナーのコードのスニペットを追加する場合もあります。

HTML コードツールボックス

HTML コード ツールボックス ​ {width="500" modal="regular"}

ツール
アイコン
説明
移動
​ 移動アイコン ​ {width="25"}
HTML コードコンテナをページ上の別の有効な場所に移動します。
設定
​ 設定アイコン ​ {width="25"}
「HTML コードを編集」ページが開きます。このページで、コンテナのプロパティを変更できます。
Hide
​ アイコンを非表示 ​ {width="25"}
HTML コードコンテナを非表示にします。
表示
​ アイコンを表示 ​ {width="25"}
非表示のHTML コードコンテナを表示します。
複製
​ 複製アイコン ​ {width="25"}
HTML コードコンテナをコピーします。
削除
​ 削除アイコン ​ {width="25"}
HTML コードコンテナとそのコンテンツをステージから削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

HTML コードを追加

次の例は、Google Font コードを埋め込み、現在のスタイルシートを上書きするカスタム見出しクラスを宣言する方法を示しています。

手順 1:Google フォントを選択する

  1. Google Fonts サイトにアクセスし、使用するフォントファミリーを選択します。

  2. ページの <head> セクションに埋め込む生成されたコードをコピーし、一時的にテキストエディターに貼り付けます。

    • 埋め込みフォントコード
    • CSS ルール

  3. 見出しクラスを <style> タグで囲み、各見出しクラスにフォントファミリルールを追加します。

    このコードは Page Builder に貼り付けられます。

    code language-html 
    <style>
   h1 {color: teal; font-family: 'Khand', sans-serif; }
   h2 {color: teal; font-family: 'Khand', sans-serif; }
   h3 {color: teal; font-family: 'Khand', sans-serif; }
</style>

手順 2：ページへのコードの追加

  1. ストアの 管理者 サイドバーで、Content/Elements/Pages​に移動します。

  2. フォントを使用できるページを探し、編集モードで開きます。

  3. 下にスクロールして、「Content」セクションを展開します。

  4. Page Builder パネルで Elements を展開し、HTML Code プレースホルダーをステージ上の行、列、タブセットにドラッグします。

    赤いガイドラインを使用して、行、列、タブセット内の別のコンテンツコンテナの前または後にディバイダーを配置します。

    HTML コードのプレースホルダーのステージへのドラッグ ​ {width="600" modal="regular"}

  5. HTML コンテナにカーソルを合わせてツールボックスを表示し、設定 （ ​ 設定アイコン ​ {width="20"}）, アイコンを選びます。

  6. テキストボックスに、準備した埋め込みGoogle フォントコードおよびスタイル宣言を貼り付けます。

    読みやすくするために、スペースを 2、3 個入力してコードをインデントできます。

    HTMLのコードとスタイル ​ {width="500" modal="regular"}

  7. 必要に応じて残りの設定を更新します（詳しくは HTML コード設定の変更 ​ を参照）。

  8. 右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

    新しいフォントは、ブラウザーを使用してページを表示するとレンダリングされます。

手順 3：ページのプレビュー

  1. Currently Active​セクションで、Enable Page​を Yes に設定します。

    ​ ページの有効化 ​ {width="600" modal="regular"}

  2. 右上隅の Save 矢印をクリックし、「Save & Close」を選択します。

  3. グリッドでページを見つけ、View 列で Actions​を選択します。

    ​ 新しいフォントファミリーでページの見出しをプレビューする ​ {width="700" modal="regular"}

HTML コードの設定の変更 html-settings

  1. HTML コンテナにカーソルを合わせてツールボックスを表示し、設定 （ ​ 設定アイコン ​ {width="20"}）アイコンを選択します。

  2. テキストボックスで、必要に応じてコードを編集します。

    HTML、CSS、JavaScript コードがサポートされています。 ページの <head> セクションに属するコードスニペットは、ここに入力できます。

    エディターには、コードに特殊な要素を挿入するボタンもあります。

    table 0-row-2 1-row-2 2-row-2 3-row-2
    ボタン 説明
    ウィジェットを挿入… クリックすると、「HTML」テキストボックス内のカーソル位置にウィジェットが挿入されます。
    イメージの挿入… アップロードした画像または Gallery の画像をHTML テキストボックスのカーソル位置に挿入するときにクリックします。
    変数の挿入… クリックすると、「HTML」テキストボックス内のカーソル位置に変数が挿入されます。

  3. 必要に応じて、Advanced​設定を更新します。

    • 親コンテナ内のコードの位置を制御するには、Alignment のいずれかを選択します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2
      オプション 説明
      Default 現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
      Left 親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。
      Center 親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。
      Right 親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

      次の例では、オプションを設定して、レンダリングされたコードブロックに中央揃えを使用します。

      ​ 中央揃えのデバイダー ​ {width="600" modal="regular"}

    • コードコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2
      オプション 説明
      Default 関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。
      None コンテナの境界線の表示はしません。
      Dotted コンテナの境界線は点線で表示されます。
      Dashed コンテナの境界線は破線で表示されます。
      Solid コンテナの境界線は実線で表示されます。
      Double コンテナの境界線は二重線で表示されます。
      Groove コンテナの境界線は溝付き線で表示されます。
      Ridge コンテナの境界線は、境界線として表示されます。
      Inset コンテナの境界線は、インセットされた線として表示されます。
      Outset コンテナの境界線は、先頭行として表示されます。

    • None 以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      オプション 説明
      Border Color 見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。
      Border Width 境界線の幅のピクセル数を入力します。
      Border Radius ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

    • （オプション）コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

      複数のクラス名はスペースで区切ります。

    • コードコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。

      対応する値を図に入力します。

      table 0-row-2 1-row-2 2-row-2
      コンテナ領域 説明
      Margins コンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション：Top/Right/Bottom/Left
      Padding コンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション：Top/Right/Bottom/Left
recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d