コンテンツにスキップ
ClickFunnels Help CenterClickFunnels Help CenterClickFunnels Help CenterCF クラシックヘルプセンター

ページエディタ:セクションの追加

公開日: 更新日:

セクションは、すべての ClickFunnels ページの基盤です。ページを個別の領域に分割し、それぞれに行と要素を含めることができるため、視覚的に魅力的でわかりやすい形でコンテンツを配置できます。セクションを追加すると、テキスト、画像、その他の要素を、見た目に魅力的で訪問者が操作しやすい形に整理できます。この記事では、セクションを追加し、その設定をカスタマイズし、レイアウトを調整して、訪問者の注目を集める洗練されたプロフェッショナルなページを作成する方法を説明します。

必要条件

Section titled “必要条件”

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

  • ワークスペースで作成したページ

ページエディタでのセクションの追加

Section titled “ページエディタでのセクションの追加”

  1. ClickFunnels ワークスペースでページを選択します。

  2. エディタでページを開きます。

  3. 新しいセクションを追加したいページ上の領域にカーソルを合わせ、セクションを追加 をクリックします。

  4. 開いたウィジェットには、いくつかのオプションがあります。

    • 保存済み: ワークスペースに以前保存したすべてのセクションがここに表示されます。いずれかを選択すると、保存済みセクションをインポートしてページに追加できます。

    • ユニバーサル: 以前にユニバーサルセクションとして保存したすべてのセクションがここに表示されます。いずれかを選択すると、ユニバーサルセクションをインポートしてページに追加できます。

    • 空白: セクションを一から作成する場合は、空白 を選択して 空白セクション を挿入します。

    • 高度な: セクションコンテナでフレックスレイアウトを使用する場合は、高度な を選択して フレックス コンテナを追加します。

    • その他のカテゴリ: ClickFunnels には、ヘッダー、フッター、お客様の声 など、指定されたカテゴリから選択できるさまざまな既製のセクションテンプレートが用意されています。たとえば、サイトに上部ナビゲーションバーを追加する場合は、ナビゲーション カテゴリに移動して適切なデザインを選択します。そのデザインのセクションがエディタにインポートされます。

  5. 列 の数 (1〜6 列) を指定して 行 を選択します。

  6. 行を挿入したら、各列内に 要素 (テキスト、画像、ボタンなど) を追加できます。

  7. 編集が完了したら、保存 をクリックして変更を保存します。

セクションのカスタマイズ

Section titled “セクションのカスタマイズ”

セクションにカーソルを合わせると、その境界線が 緑色 で強調表示されます。セクションの設定を開くには、セクションの右上にある 歯車 ⚙️ アイコンをクリックするか、上部の緑色のバーにある 設定 を直接クリックします。

上マージン

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

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

ペイント

ペイントカラーは、セクション、行、列、フレックスコンテナ などのコンテナに適用される定義済みのカラーセットです。これらのカラーセットは、見出し、サブ見出し、段落、箇条書きリスト、背景、オーバーレイなど、コンテナ内のさまざまな要素のスタイルを定義します。

コンテナ設定でペイントカラーを選択すると、コンテナ内にネストされたすべての要素が、スタイルガイドの対応する色を自動的に継承します。たとえば、サブ見出しにオレンジ、テキストコンテンツに黒を指定するペイントカラーを設定すると、コンテナに追加したサブ見出しやコンテンツはこれらの定義済みの色に従います。

この機能により、ブランドのビジュアルアイデンティティに沿った一貫したデザインをページ全体で維持できます。

  1. プリセットペイント: スタイルガイドの設定に基づいて、「最も明るい背景」や「最も暗い背景」などの定義済みのペイントオプションから選択します。これらのオプションを使用すると、ブランディングに沿ったまとまりのあるデザインを維持できます。
  2. スタイルカラーを編集: 「スタイルカラーを編集」をクリックするとスタイルガイドが開き、ペイントのカラーパレットをカスタマイズできます。ペイントカラーのカスタマイズについて詳しくは、「スタイルの色をカスタマイズする方法」の記事を参照してください。
サイズと位置

サイズと位置 設定では、セクションの幅と間隔を制御して、レイアウトを細かく調整できます。
セクションの「サイズと位置」設定（幅 XS〜XL、スティッキー）

  • 幅: セクションの幅 (XS、S、M、L、XL) を選択して、ページ上で占めるスペースを調整します。

  • スティッキー: セクションを画面上に固定します。ナビゲーションバーや行動喚起に最適です。スティッキーなし、スクロール時に上に固定、ロード時に下に固定 から選択します。プレビュー スティッキー を使用すると、エディタで効果を確認できます。

高さ

高度な タブで 利用可能な高さを埋める をオンにすると、ブラウザウィンドウ内の余った縦方向のスペースを埋めるようにセクションが広がります。複数のセクションでこの設定をオンにした場合は、それらのセクションで利用可能なスペースを分け合います。

💡 詳細: 詳細設定 - スタイルのカスタマイズ

パディング

パディング 設定は、コンテンツとそのコンテナ (セクション、行、列、要素など) の内側の端との間のスペースを制御します。この内側の余白によってコンテンツにゆとりが生まれ、視覚的にバランスよく見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズをまたいで一貫した間隔を作成します。

パディングのオプション:

  • 上: 要素コンテナの上端とそのコンテンツの間にスペースを追加します。

  • 下: 要素コンテナの下端とそのコンテンツの間にスペースを追加します。

  • 左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。

  • ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するためにギャッププロパティが追加されています。たとえば、上下のパディングを定義しなくても、アコーディオン要素内の各アコーディオンアイテムの間隔を調整できます。

デスクトップとモバイル (🖥️ と 📱) のカスタマイズ:

パディング設定では、デスクトップ 表示と モバイル 表示で別々の値を定義できます。パディングコントロールの上部にある デバイス切り替え を使用して画面モードを切り替え、それぞれの間隔を調整します。モバイルの値を指定しない場合は、デフォルトでデスクトップの設定が引き継がれます。モバイルの値は幅770px以下の画面に適用されます。設定パネルのデバイスアイコンにカーソルを合わせると、編集中の値が適用される画面幅を確認できます。

この機能により、さまざまな画面サイズに合わせてレイアウトが最適化され、モバイルとデスクトップの両方でのエクスペリエンスが向上します。

背景

背景 プロパティを使用すると、セクション、行、列、フレックスコンテナなどのさまざまなコンテナや、動画などの個々の要素に背景画像を追加してカスタマイズできます。背景オプションをオンにすると設定が有効になり、背景画像のソース、スタイル、フィット、色のオプションを設定できます。

「背景」と「背景動画」をオンにした背景設定

  1. 画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーで直接アップロードします。

  2. 画像スタイル: コンテナ内での背景画像の表示方法を制御します。

    • なし: 追加のスタイルを適用せずに、背景画像を元のサイズと位置で表示します。画像がコンテナより小さい場合は、すき間ができることがあります。

    • フルセンター: サイズを変更せずに画像をコンテナの中央に配置します。画像がコンテナより小さい場合は、空白が残ることがあります。

    • フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインコンテンツとは独立して動くため、奥行きのある見た目になります。

      注:

      iOS の制限により、Apple のモバイルデバイスではパララックス効果が自動的に無効になります。iOS デバイス (Safari およびその他の WebKit ブラウザ) では、CSS でパララックススクロールを実装する中心的な仕組みである background-attachment: fixed のサポートが限定的であるか、まったくサポートされていません。レイアウトの整合性を保つため、背景はデフォルトで静的なスタイル (例: フルセンター) になります。

    • 幅100%にフィル: アスペクト比を維持したまま画像を拡大して、コンテナの幅全体を覆います。上下が切り取られる場合があります。

    • 幅と高さ100%にフィル: 画像を引き伸ばして、コンテナの幅と高さの両方を埋めます。アスペクト比を維持するため、画像の一部が切り取られます。

    • 繰り返さない: 画像を繰り返さずに 1 回だけ表示します。使われていないスペースは空白のままになります。

    • 繰り返す: 画像をタイル状に並べて、コンテナの幅と高さの両方を覆います。

    • 水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。

    • 垂直に繰り返す: コンテナの高さ方向に沿って画像を縦に並べます。

  3. 画像フィット: コンテナ内での画像の位置 (例: 中央、左上、右下) を指定して、配置を整えます。

  4. 色: このオプションでは、背景 と 前景 の色を設定できます。

    • 背景色: 背景画像を使用しない場合は、単色またはグラデーションの色を背景に直接適用できます。カラーピッカーでカスタムカラーを選ぶか、統一感を出すためにスタイルガイドから色を選択します。背景画像を使用している場合、背景色は通常表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗したときの代替として表示されたりすることがあります。

    • 前景色: 背景画像の上にオーバーレイを追加します。不透明度を調整して、画像に色味を付けたり、やわらかい印象にしたりできます。このレイヤーによって読みやすさを高めたり、画像にスタイリッシュな色合いを加えたりできます。

  5. 背景動画: 動画を背景として使用するには、「背景動画」オプションをオンにします。YouTube または Vimeo の動画 URL を入力すると、その動画がコンテナの背景に設定されます。

    注:

    背景動画オプションは、セクション、行、フレックス コンテナでのみ使用できます。

ボーダー

ボーダー 設定では、要素の周囲にボーダーを追加してスタイルを設定し、ページ上での視覚的な輪郭や区切りを強調できます。

  1. スタイルプリセット (1、2、3): スタイルガイドの定義済みのボーダースタイルから選択します。これらのプリセットを使用すると、ページ全体で一貫したボーダースタイルを要素にすばやく適用できます。

  2. スタイルを編集: スタイルガイドのプリセットのボーダースタイルを変更するには (そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択してグローバル設定でデザインを調整します。

  3. 上書き: 上書き オプションを使用すると、グローバルなスタイルガイドの設定に影響を与えずに、この要素のボーダー設定だけをカスタマイズできます。

  4. ボーダー: 要素のどの辺にボーダーを表示するかを選択します。上、下、左、右のボーダーを自由に組み合わせることができます。

  5. ボーダースタイル: デザインの好みに合わせて、ソリッド、ダッシュ、ドットなど、ボーダーの線のスタイルを選択します。

  6. カラー: カラーピッカーを使用してボーダーの色を選択します。スタイルガイドの色またはカスタムカラーを選択して、ボーダーの色をデザインの配色に合わせることができます。

  7. ストロークサイズ: ストロークサイズ スライダーを使用するか、特定のピクセル値を入力してボーダーの太さを調整し、細い輪郭線から太いフレームまで作成できます。

シャドウ

シャドウ 設定では、要素にシャドウ効果を適用して奥行きや強調を加え、見た目を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。

  1. スタイル: ページのスタイルガイドにある定義済みのシャドウスタイルから 1 つを選択します。番号付きのスタイル (1、2、3) をクリックすると、スタイルガイドで定義されたプリセットのシャドウ設定が適用されます。

  2. シャドウスタイル: インセット (要素の内側のシャドウ) と アウトセット (要素の外側のシャドウ) のどちらかを選択して、目的のシャドウ効果を作成します。

  3. X方向: シャドウの水平方向の位置を調整します。正の値ではシャドウが右に、負の値では左に移動します。

  4. Y方向: シャドウの垂直方向の位置を制御します。正の値ではシャドウが下に、負の値では上に移動します。

  5. ブラー: シャドウの端のぼかし具合を制御します。値を大きくするとより拡散したやわらかいシャドウになり、値を小さくするとシャドウがくっきりします。

  6. スプレッド: シャドウのサイズを調整します。正の値ではシャドウが広がり、負の値では狭くなります。

  7. カラー: カラーピッカーを使用してシャドウの色を設定します。

コーナー

コーナー 設定では、要素の角の丸み (border-radius) を調整して、丸みのある角やシャープな角を自由に作成できます。

  1. スタイルプリセット (1、2、3): スタイルガイドで設定された定義済みのコーナースタイルから選択します。これらのプリセット (1、2、3) を使用すると、ページ全体のデザインに合ったスタイルをすばやく適用できます。

  2. スタイルを編集: スタイルガイドでスタイルを直接変更するには (そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックしてグローバル設定でプリセットを調整します。

  3. 上書き: スタイルガイドを変更せずにカスタムのコーナー設定を適用するには、上書き をクリックします。これにより、この要素だけのコーナー半径を調整できます。

  4. すべての角: スライダーを調整するか、ピクセルまたはパーセンテージで特定の値を入力して、4 つの角すべてに同じ border-radius を設定します。

  5. エッジを分ける: エッジを分ける を有効にすると、各角を個別に調整できます。左上、右上、左下、右下 の角にそれぞれ異なる値を設定して、独自の形状を作成できます。

高度な設定

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

コントロールパネル

コントロールパネル は、ページエディタ内のすべてのコンテナ (セクション、行、フレックス、要素) の下部に表示され、そのコンテナの重要な設定や操作にすばやくアクセスできます。各アイコンの意味は次のとおりです。
設定パネル下部のバー：可視性（すべて／デスクトップ／モバイル）、プレビュー、削除

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

  • デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。

  • モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。

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

  • コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

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