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

ページエディタ: 列について

公開日: 更新日:

列は、ClickFunnels でコンテンツを整理するうえで欠かせない要素です。行をいくつかの区画に分割し、さまざまな種類のコンテンツを並べて配置することで、バランスのとれた使いやすいレイアウトを作成できます。列を使用すると整理されたレイアウトを作成できるため、画像の横にテキストを配置したり、複数のボタンを並べたり、訪問者がスムーズに見て回れる機能リストを表示したりすることが簡単になります。この記事では、デザインに合わせて列を追加、カスタマイズ、スタイル設定する方法を説明します。

必要条件

Section titled “必要条件”

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

  • ページエディタに追加したセクションと行

列について

Section titled “列について”

ClickFunnels では、列は行の中に含まれ、コンテンツのレイアウトを区切る役割を果たします。たとえば、2 列の行を使用して、一方の列にテキストを、もう一方の列に画像を表示できます。列は柔軟で、それぞれ個別にサイズ変更、配置、カスタマイズができます。コンテンツをひと目で把握しやすく、見た目にも魅力的な整理されたレイアウトを作成するために欠かせません。

列が重要な理由は、次のことができるためです。

  • コンテンツを構造化された読みやすいレイアウトで配置する。

  • 要素の幅と間隔を制御する。

  • コンテンツを均等に分割して、バランスのとれたデザインを作成する。

  • 表示とレイアウトを調整して、モバイル対応を向上させる。

ページエディタでの列の追加

Section titled “ページエディタでの列の追加”

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

  2. セクション を追加します。

  3. 行を追加 をクリックし、ウィジェットから 列 の数 (1〜6 列) を選択します。

    「行を追加」パネルの1〜6列レイアウト

  4. レイアウトに 行 を挿入したら、各 列 に移動して目的の 要素 を挿入します。

  5. 右上の 保存 をクリックして作業内容を保存します。

列設定のカスタマイズ

Section titled “列設定のカスタマイズ”

行にカーソルを置いてマウスを列に移動すると、関連する設定 (歯車 ⚙️) アイコンが表示されます。列の設定を開くには、歯車 ⚙️ アイコンをクリックします。

上マージン

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

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

ペイント

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

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

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

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

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

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

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

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

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

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

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

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

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

左 + 右の余白 **左 + 右の余白** 設定は、列の左右両側の端とコンテンツとの間のスペースを制御します。デフォルトの余白は 16px に設定されています。複数の列にあるコンテンツ間の間隔を変更したい場合は、左 + 右の余白オプションを使用します。デバイスアイコンを使用すると、モバイル用の値を別に設定できます。幅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 をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。

  • ゴミ箱アイコン: 要素をページエディタから完全に削除します。