カスタムHTMLブロックを使用すると、SeedProdページに任意のHTMLマークアップを直接埋め込むことができます。サードパーティ製ウィジェット、カスタム埋め込みコード、生のHTML出力、またはSeedProdに専用ブロックがないスニペットを追加する必要がある場合でも、このブロックを使えば直接挿入できます。
これにより、外部ツールやカスタムスクリプト、あるいはページレイアウト内に正確に配置したいHTMLベースのコンテンツを統合するのに最適です。
カスタムHTMLブロックをページに追加する
SeedProdページにカスタムHTMLブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック の下で、カスタム HTMLブロックをページの目的のセクションにドラッグ＆ドロップします。
カスタムHTMLブロックをブロックパネルからドラッグし、目的のページセクションにドロップします。
ステップ2: コンテンツ設定の構成
追加後、カスタムHTMLブロックをクリックして設定を開きます。「コンテンツ」タブでHTMLコードを入力し、フルスクリーンエディターを利用できます。
- カスタムコード：HTMLマークアップをテキストエリアに直接貼り付けまたは入力してください。有効なHTMLであれば何でも可能です。埋め込みコード、iframe、カスタム要素、スクリプトタグを含みます。
- エディタを拡大:このボタンをクリックすると、より大きな全画面コードエディタが開き、長文や複雑なHTMLスニペットの作業が容易になります
HTMLコードを「コンテンツ」タブに入力してください。より広い編集スペースが必要な場合は「エディターを拡大」ボタンをご利用ください。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、カスタムHTMLブロックのレイアウトと表示状態を制御できます。
スペース:
- 余白：カスタムHTMLブロックの周囲のスペース（上、右、下、左）を制御します。これにより、ブロックと周囲の要素の間に表示されるスペースが決まります。
- パディング：カスタムHTMLブロック内の内側の間隔（上、右、下、左）を調整します。これにより、HTMLコンテンツとブロックの端の間に余白が生まれます。
属性：
- CSS ID:カスタムHTMLブロック用に自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス:テーマまたはカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-section|html-embed)
デバイスの可視性:
- デスクトップで非表示:カスタムHTMLブロックをデスクトップ画面で非表示にする
- タブレットで非表示:タブレット端末でカスタムHTMLブロックを非表示にする
- モバイルで非表示:モバイル端末でカスタムHTMLブロックを非表示にする
アニメーション効果：
- エントランスアニメーション：カスタムHTMLブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど多数のオプションが用意されています。
カスタムHTMLブロックのスペース、属性、デバイスの表示状態、および進入アニメーションを制御するには、[詳細設定]タブを使用します。
ステップ4: 変更を保存する
カスタムHTMLブロックの設定が完了したら、必ず作業内容を保存してください。
ページにカスタムHTMLブロックを追加できました！サードパーティ製ウィジェット、カスタムフォーム、サイトに必要なHTMLスニペットなど、あらゆる要素をSeedProdページ上の任意の位置に配置できる柔軟性を提供します。