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

公開日: 2024年11月15日更新日: 2026年10月27日

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

必要条件

アクティブなClickFunnelsアカウント
ワークスペースで作成されたページ

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

ページエディタ内で、要素を 配置するセクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + (プラス) または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
その他 カテゴリから、HTML/JS 要素を選択します。

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

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

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

上マージン

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

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

コードエディタを開く

コードエディタを開く をクリックすると、カスタム HTML および JavaScript コードを追加するためのテキストエディタが開きます。このエディターは、HTML コードと JavaScript コードの両方をサポートしています。エディター右側の拡大アイコンでエディターを大きく表示し、X アイコンで閉じます。コードはエディターを閉じたときに要素に適用されます。HTML コードと JavaScript コードを正しく追加する方法の詳細については、以下の「HTML コードの追加」および「JavaScript コードの追加」セクションを参照してください。
HTML / JS の設定でコードエディタを開くボタンを強調表示

コントロールパネル

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

すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ごみ箱 (🗑️) アイコン: ページエディターからコンテナーを完全に削除します。

詳細設定

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

詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。

HTML コードの追加

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

設定の コードエディタを開く をクリックして、コードエディター を開きます。
HTML コードをエディターに直接入力します。

JavaScript コードの追加

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

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

設定の コードエディタを開く をクリックして、コードエディター を開きます。
<script> </script>タグで囲まれたJavaScriptコードを追加します。

エディターでのコードの表示

ページエディターはカスタムコードを実行しません。代わりに、エディターのキャンバス上の要素には カスタムJavaScript / HTML というプレースホルダーが表示されます。HTML と JavaScript の動作を確認するには、ページをプレビューするか公開してください。

構文エラーのチェック

コードエディターは、入力中にコードの HTML 構文エラー (閉じていないタグなど) をチェックします。

エラー一覧: エラーはコードの下に一覧表示され、それぞれに行番号と列番号 (例: Line 3, Col 5) と簡単な説明が表示されます。エラーをクリックすると、コード内のその位置に移動します。
赤い枠線: コードにエラーが残ったままコードエディターを閉じると、エディターのキャンバス上で要素が赤い枠線で囲まれます。
エラーメッセージ: 上部バーの警告アイコンから開けるページのエラー一覧に、カスタムHTML/JS要素に構文エラーが含まれています。クリックしてエディターを開きます。 と表示されます。メッセージをクリックすると、最初のエラーの位置でコードエディターが再び開きます。
保存時の警告: エラーがあるページを保存すると、ページにエラーがあります というウィンドウが表示されます。エラーを解決 をクリックするとエラー一覧が表示され、とにかく保存 をクリックするとエラーを修正せずにページを保存します。

コード内でのマージタグの使用

{{blog.url}} や {{course.url}} のような二重波かっこで囲まれたマージタグは、デフォルトではカスタムコード内で置き換えられず、入力したとおりにページに表示されます。マージタグを値に置き換えるには、要素の 高度な 設定を開き、動的に生成された をオンにします。詳細については、詳細設定 - スタイルのカスタマイズを参照してください。

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

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

コンソールにエラーがないか確認する: ブラウザの開発者ツールを開き、コンソールでエラーメッセージを確認します。
コード構造を確認する: HTML と JavaScript の構文が正しく、既存の要素と競合しないことを確認します。
開発者に相談する: 複雑な機能については、専門の開発者に相談することを検討してください。