Embed 要素を使用すると、サイトにカスタムコードのブロックを追加することができます。Core または Growth Workspace をお持ちの場合、またはアクティブなサイトプランをお持ちの場合、Embed 要素を使用してあらゆる種類のカスタム機能をアンロックすることができます。

Google DocsやSheets、ソーシャルメディアフィード、ライブチャットアプリ、フォームやアンケートなど、サードパーティ製の要素を埋め込むことができます。また、CMS Collectionフィールドを使用して、埋め込みコードを動的に更新することもできます。

このレッスンでは、次のことを学びます。

  1. Embed 要素を追加する方法
  2. Embed要素を編集する方法
  3. Embed要素に寸法を設定する方法
  4. 埋め込みコンテンツをプレビューする方法
  5. FAQとトラブルシューティングのヒント

1. Embed要素の追加方法

サードパーティのコードや独自のコードを、デザイン内の任意の場所やリッチテキスト要素に埋め込むことができます。

デザインに直接カスタムコードを追加する方法

  1. 埋め込みたいコードをクリップボードにコピーします。
  2. 追加パネルを開き、Webflow canvas に Embed 要素を追加します。
  3. ステップ 1 でコピーしたカスタム コードを貼り付けます。
  4. 保存してモーダルを閉じます。
重要: カスタム コードに開始タグや終了タグがある場合は、コードが期待どおりに動作するように、それらを必ず追加してください。また、カスタム コードに <html>、<body>、<head> タグを含めないようにします。
The Embed element is highlighted in the Add panel of the Webflow Designer.
‍ 注：コードの表示や編集を容易にするために、デフォルトで行の折り返しが有効になっていますが、HTML埋め込みコードエディターの「行の折り返し」チェックボックスをオフにすることで、この設定をオフに切り替えることができます。また、「最大化」アイコンをクリックすることで、フルスクリーン編集を有効にすることができます。
Line wrapping and full screen editing options highlighted in the HTML embed code editor.
‍プロからのアドバイス：同じ埋め込みコンテンツをサイト全体で再利用したい場合、シンボルを使って埋め込み要素を再利用可能なコンポーネントにすることができます。

2. カスタムコードを編集する方法

  1. 埋め込みたいコードをクリップボードにコピーします。
  2. カスタムコードを追加したいリッチテキスト要素にカーソルを置きます。
  3. 「プラス」アイコンをクリックして挿入メニューを表示し、「カスタムコード」ボタンをクリックします。
  4. ステップ1でコピーしたカスタムコードを貼り付けます。
The custom code button highlighted within a rich text element’s in-line editing options.

カスタムコード内でダイナミックコンテンツを使用する方法

埋め込みコードにCollectionフィールドを組み込んで、さまざまな用途に応じた情報を動的に引き出すことができます。

3.Embed要素に寸法を設定する方法

Embed要素内のカスタムコードでサイズや寸法を明示的に設定していない場合、コンテンツが親要素の幅をいっぱいに使ってしまうことがよくあります。カスタムコードに height="100%" width="100%" を追加することで、スタイルパネルから Embed 要素とコンテンツの幅と高さを調整できるようになる場合があります。

4. 埋め込みコンテンツをプレビューする方法

<iframe></iframe> タグまたは <style></style> タグで囲まれたカスタム HTML は、キャンバス上またはリッチテキスト要素内にプレビューを表示しますが、一部のコード埋め込みはライブウェブサイト上でのみ表示することができます。コードエディタで<script></script>タグが使用されると、その要素のプレースホルダがDesignerに表示されます。

The placeholder element for an HTML Embed on the Designer canvas reads, “This <script> embed will only appear on the published/exported site.”

サイトを公開またはエクスポートすると、内部のスクリプトとカスタムコードが配置された場所にレンダリングされます。カスタムドメインでサイトを公開する前に埋め込みをプレビューする必要がある場合は、.webflow.io staging サブドメインにサイトを公開することができます。

5. FAQとトラブルシューティングのヒント

Embed要素でサーバーサイドの言語を使用できますか？

Embed要素にサーバーサイド言語（Perl、PHP、Python、Rubyなど）を組み込むことはできません。Embed要素は、HTML、<style>タグ内のCSS、<script>タグ内のJSのみ対応しています。

Embed要素の文字数制限を10,000文字に増やすことはできますか？

Embed要素内のカスタムコードは、10,000文字を超えることはできません。埋め込みたいコードが長い場合は、別のサーバーに保存しておき、埋め込み時にそのスクリプトを参照することができます。また、サードパーティ製のツールを使ってカスタムコードをミニチュア化したり、複数のEmbed要素にコードを分割することもできます（ただし、これによってJavaScriptの関数が破壊されないことが条件です）。

カスタムコードが動作しません

コードが適切な開始タグや終了タグを含んでいるか、<html>タグ、<body>タグ、<head>タグを含んでいないかを再確認してください。


カスタムコードはウェブフローの基本的な機能と競合する可能性のある高度な変更であることを念頭に置くことが重要です。そのため、ウェブフローはカスタムコードの機能または完全な互換性を保証することはできません。