ドキュメントCommercePage Builder

要素 – HTMLコード

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • トピック：

作成対象：

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

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

HTMLコード ツールボックス

HTMLコード ツールボックス

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

HTMLコードを追加

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

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

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

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

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

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

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

    <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コードのプレースホルダーのステージへのドラッグ

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

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

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

    HTMLコードとスタイル

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

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

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

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

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

    ページの有効化

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

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

    新しいフォントファミリーでページの見出しをプレビューする

HTMLコード設定の変更

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

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

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

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

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

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

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

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

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

      中央揃えのデバイダー

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

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

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

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

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

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

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

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

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