カスタムコード埋め込み - Webflow ヘルプ

Last updated on 10/23/2025@mrbirddev

コード埋め込み要素を使用して、サイトにカスタム機能を追加しましょう。

コード埋め込み要素はHTML、<style>タグ内のCSS、<script>タグ内のJSのみをサポートします。サーバーサイド言語（例：Perl、PHP、Python、Ruby）はコード埋め込み要素に統合できません。

カスタムコードは高度な変更であり、Webflowの基本機能と競合する可能性があります。そのため、Webflowはカスタムコードの機能や完全な互換性を保証できません。また、カスタムコードの設定やトラブルシューティングに関する直接的なサポートは、カスタマーサポートポリシーの範囲外であるため、提供できません。カスタムコードに問題が発生した場合は、Webflowフォーラムでお知らせください。Webflowコミュニティ全体（スタッフを含む）が追加のサポートとリソースを提供できます。

コード埋め込み要素を追加する方法

デザインやリッチテキスト要素のどこにでもサードパーティのコードや独自のカスタムコードを埋め込むことができます。

コード埋め込み要素内のカスタムコードは50,000文字を超えることはできません。埋め込みたいコードがそれ以上の場合、別のサーバーに保存してスクリプトを参照することができます。また、サードパーティツールを使用してカスタムコードを圧縮するか、コードを複数の埋め込み要素に分割することもできます（これによりJavaScriptの機能が壊れない場合）。

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

埋め込みたいコードをクリップボードにコピー
追加パネルを開き、コード埋め込み要素をWebflowキャンバスに追加
ステップ1でコピーしたカスタムコードを貼り付け
モーダルを保存して閉じる

カスタムコードに開始タグや終了タグがある場合は、それらを追加してコードが期待通りに動作するようにしてください。また、カスタムコードに<html>、<body>、または<head>タグを含めないでください。そうしないと、ウェブサイトやレイアウトが壊れます。

コードの表示と編集を容易にするために、行の折り返しはデフォルトで有効になっていますが、コードエディタの行の折り返しチェックボックスをオフにすることでこの設定を無効にできます。また、「最大化」アイコンをクリックして全画面編集を有効にすることもできます。

プロのヒント: サイト全体で同じ埋め込みコンテンツを再利用したい場合は、コンポーネントを使用してコード埋め込み要素を再利用可能なコンポーネントに変えることができます。

リッチテキスト要素にカスタムコードを追加する方法

埋め込みたいコードをクリップボードにコピーします
カスタムコードを追加したいリッチテキスト要素にカーソルを置きます
挿入メニューを開くために「プラス」アイコンをクリックし、カスタムコードボタンをクリックします
ステップ1でコピーしたカスタムコードを貼り付けます

カスタムコード内で動的コンテンツを使用する方法

埋め込みコードにコレクションフィールドを組み込んで、さまざまな用途に情報を動的に引き出すことができます。 詳細はこちら: Webflowヘルプセンターの動的埋め込みを参照してください。

コード埋め込み要素を編集する方法

コード埋め込み要素のコードを編集するためにコードエディタを開く方法はいくつかあります。以下の方法があります: - キャンバス上のコード埋め込み要素を選択してダブルクリック - キャンバス上のコード埋め込み要素を選択してEnterキーを押す - キャンバス上のコード埋め込み要素を選択して設定の「歯車」アイコンをクリック - キャンバス上のコード埋め込み要素を選択して設定パネルのコード埋め込み設定でコードエディタを開くをクリック

知っておくと良いこと: コード埋め込み要素がキャンバス上で見えない場合は、ナビゲーターパネルから見つけて選択できます。その後、設定パネルを開き、コード埋め込み設定の下にあるコードエディタを開くをクリックしてコードを編集します。

コード埋め込み要素の寸法を設定する方法

コード埋め込み要素内のカスタムコードがサイズや寸法を明示的に設定していない場合、コンテンツは親要素の全幅を占めることがあります。カスタムコードに`height="100%" width="100%"`を追加することで、埋め込み要素とコンテンツの幅と高さをスタイルパネルから調整できるかもしれません。

埋め込まれたコンテンツをプレビューする方法

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

プレビュー、公開、またはサイトをエクスポートすると、スクリプトとカスタムコードが配置した場所にレンダリングされます。

カスタムコードの効果はプレビューモードで表示されますが、サイトが公開されるまでライブにはなりません。

カスタムスクリプトをプレビューやコメントモードから除外するには、コードを次のHTMLコメントで囲んでください:
ここにあるすべてのコードは除外されます

詳細を学ぶ: テストとフィードバックのために.webflow.ioをステージングドメインとして使用する方法を参照してください。

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

コード埋め込み要素でサーバーサイド言語を使用できますか？ サーバーサイド言語（例: Perl, PHP, Python, Ruby）をコード埋め込み要素に統合することはできません。コード埋め込み要素はHTML、<style>タグ内のCSS、<script>タグ内のJSのみをサポートしています。

コード埋め込み要素の50,000文字制限を増やせますか？

コード埋め込み要素のカスタムコードは50,000文字を超えることはできません。埋め込みたいコードが長い場合は、別のサーバーに保存し、スクリプトを参照することができます。また、サードパーティのツールを使用してカスタムコードを縮小するか、コードを複数のコード埋め込み要素に分割することも可能です（ただし、JavaScript関数が壊れない場合に限ります）。

助けて！カスタムコードが動作しません！
コードに適切な開始および終了タグが含まれていることを再確認し、<html>、<body>、または<head>タグが含まれていないことを確認してください。

2020年8月以降、新しく公開されたWebflowサイトにはjQuery v3.5.1が含まれています。カスタムコードで他のバージョンのjQueryをインポートすると、サイトでの競合や予期しない動作を引き起こす可能性があります。onClickやonHoverなどのDOMイベントに影響を与えるスクリプトも予期しない動作を引き起こす可能性があります。

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

サポートチームはカスタムコードの設定やトラブルシューティングに直接的な支援を提供することはできません。これらのトピックはカスタマーサポートポリシーの範囲外です。カスタムコードに問題が発生した場合は、Webflowフォーラムでお知らせください。Webflowコミュニティ全体（スタッフを含む）が追加の支援とリソースを提供できます。

Webflowヘルプに戻る

Last updated on 10/23/2025@mrbirddev