HTML/JS: カスタム HTML および JavaScript コードを挿入する

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels の HTML/JS 要素を使用すると、ユーザーはカスタム HTML および JavaScript コードをファネル ページ内に直接埋め込むことができます。この機能は、標準の ClickFunnels 要素が提供するものを超える独自の機能やスタイルを追加したい上級ユーザー向けに設計されています。この記事では、HTML/JS 要素に HTML と JavaScript のコードを適切に追加して、ファネル ページを強化する方法を学びます。

必要条件

  • アクティブなClickFunnelsアカウント

  • ワークスペースで作成されたページ

大事な：

  • 高度な機能: カスタム HTML/JS 要素は高度な機能です。カスタムコードを使用すると、コードが不適切であるとページの機能が損なわれる可能性があるため、HTML と JavaScript を十分に理解する必要があります。注意して使用してください。

  • サポートの制限: ClickFunnels サポートは、カスタム コードの問題のトラブルシューティングを行いません。カスタム コードは複雑でデバッグに時間がかかる場合があります。問題が発生した場合は、資格のある開発者に相談してください。

ページエディタでの HTML/JS 要素の追加

  1. ページエディタ内で、要素を 配置するセクション を追加します。

  2. そのセクション内に 行 を追加します。

  3. 行内のオレンジ色の + プラスまたは [新しい要素を追加] ボタンをクリックして、新しい要素を挿入します。

  4. MISC (その他) カテゴリから  、HTML/JS 要素を選択します。

HTML/JS 要素が追加されたら、設定サイドバーを開き、[コード エディターを開く] を選択して、エディター内で HTML と JavaScript のコードを直接入力できます。

HTML/JS 要素のカスタマイズ

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

コード エディターを開く

[ コードエディタを開く ] をクリックすると、カスタム HTML および JavaScript コードを追加するためのテキストエディタが開きます。このエディターは、HTML コードと JavaScript コードの両方をサポートしています。 HTML コードと JavaScript コードを正しく追加する方法の詳細については、以下の「 HTML コードの追加」 および「 JavaScript コードの追加 」セクションを参照してください。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ ビューでのみ表示されます。

  • モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。

  • 目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの [レイアウト] メニューをクリックして、非表示のコンテナーを見つけることができます。[すべて]、[デスクトップ]、または[モバイル]アイコンを選択して、エディターで再表示します。

  • コード (</>) アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入してコンテナの動作やスタイルを変更できます。

  • ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

HTML コードの追加

カスタム HTML/JS 要素内に HTML コードを追加するには:

  1. 設定の [コード エディターを開く] をクリックして、コード エディターを開きます。

  2. HTML コードをエディターに直接入力します。

注意：

<html>タグや<body>タグは含めないでください。カスタム HTML/JS 要素は、ページの<body>セクション内にすでに配置されています。これらのタグを追加すると、エラーやページ構造との競合が発生する可能性があります。

JavaScript コードの追加

カスタム HTML/JS 要素は JavaScript もサポートしており、インタラクティブな機能や動的な動作が可能です。

JavaScript コードを追加するには:

  1. 設定の [コード エディターを開く] をクリックして、コード エディターを開きます。

  2. <script> </script>タグで囲まれたJavaScriptコードを追加します。

手記：

jQuery は ClickFunnels ページ内で使用できるため、CDN から個別にインポートしなくても、カスタム HTML/JS 要素内で jQuery 構文を直接追加できます。

カスタムコードのトラブルシューティング

コードが期待どおりに動作しない場合:

  • コンソールにエラーがないか確認する: ブラウザの開発者ツールを開き、コンソールでエラー メッセージを確認します。

  • コード構造を確認する: HTML と JavaScript の構文が正しく、既存の要素と競合しないことを確認します。

  • 開発者に相談する: 複雑な機能については、専門の開発者に相談することを検討してください。

関連記事