ドキュメントPage Builder

Elements - HTML Code

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

作成対象：

  • Beginner
  • Intermediate
  • User

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

HTML Code toolbox

HTML Code toolbox {width="500" modal="regular"}

ツール
アイコン
説明
移動
移動アイコン ​ {width="25"}
HTML コードコンテナをページ上の別の有効な場所に移動します。
設定
設定アイコン ​ {width="25"}
HTML コードを編集ページが開き、コンテナのプロパティを変更できます。
非表示
​ アイコンを非表示 {width="25"}
HTML Code コンテナを非表示にします。
表示
​ アイコンを表示 {width="25"}
非表示のHTML Code コンテナを表示します。
重複
​ アイコンを複製 {width="25"}
HTML Code コンテナのコピーを作成します。
削除
​ アイコンを削除 {width="25"}
ステージからHTML Code コンテナとそのコンテンツを削除します。
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 Fonts コードとスタイル宣言を貼り付けます。

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

    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. グリッドでページを検索し、Actions​列の​ View ​を選択します。

    新しいフォントファミリーでページ見出しをプレビュー {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 テキストボックスのカーソル位置にウィジェットを挿入します。
    画像を挿入… クリックすると、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 コンテナの境界線が2行で表示されます。
      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
commerce-admin-help-page-builder