ページエディタ:行の追加
公開日: 更新日:
ClickFunnels では、行を使って各セクション内のコンテンツを配置します。行を追加して列を設定すると、さまざまな要素をページ上の思いどおりの位置に配置できます。この記事では、行の追加、列の設定、行の設定のカスタマイズについて順を追って説明し、洗練された見やすいページを作成する方法を紹介します。
-
アクティブな ClickFunnels アカウント
-
ワークスペースで作成したページ
-
エディタに追加したセクション
ページエディタでの行の追加
Section titled “ページエディタでの行の追加”-
ClickFunnels アカウントで、新しいセクションを追加する ページ に移動します。
-
ページのサムネイル をクリックしてページエディタを開きます。
-
行を追加したいセクション内の領域にカーソルを合わせ、表示される 行を追加 ボタンをクリックします。
-
画面右側の 行を追加 パネルに、いくつかのオプションが表示されます。
-
1 列 から 6 列 までを選択して、標準の列レイアウトを選びます。
-
コンテンツと画面サイズに応じて列幅が自動的に調整されるレスポンシブレイアウトにするには、高度な の下にある フレックス を選択します。
-
-
選択した列レイアウトで行が表示されたら、右側の 要素 メニューから要素を選んで直接追加できます。要素 (見出し、画像、ボタンなど) をクリックして、任意の列に追加します。
-
セクションの外側をクリックしてカスタマイズを続けるか、右上の 保存 をクリックして作業内容を保存します。
行のカスタマイズ
Section titled “行のカスタマイズ”行の設定を開くには、青い枠線 が表示されるまで行にカーソルを合わせます。次に、右上にある 歯車 ⚙️ アイコン をクリックします。行の設定パネルが開き、行の外観とレイアウトをカスタマイズできます。
上マージン
上マージン 設定では、現在のコンテナ (セクション、行、フレックス、要素) と、そのすぐ上にあるコンテナとの間のスペースを調整できます。前のコンテナが存在しない場合、マージンは親コンテナを基準に適用されます。前にコンテナが追加されていない場合は、本文 が親になります。
デバイスアイコン (🖥️ と 📱) を使用すると、デスクトップとモバイルで上マージンの値を個別に設定できます。モバイルの値を指定しない場合は、デフォルトでデスクトップの設定が引き継がれます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズをまたいで一貫した間隔を作成します。
ペイント
ペイントカラーは、セクション、行、列、フレックスコンテナ などのコンテナに適用される定義済みのカラーセットです。これらのカラーセットは、見出し、サブ見出し、段落、箇条書きリスト、背景、オーバーレイなど、コンテナ内のさまざまな要素のスタイルを定義します。
コンテナ設定でペイントカラーを選択すると、コンテナ内にネストされたすべての要素が、スタイルガイドの対応する色を自動的に継承します。たとえば、サブ見出しにオレンジ、テキストコンテンツに黒を指定するペイントカラーを設定すると、コンテナに追加したサブ見出しやコンテンツはこれらの定義済みの色に従います。
この機能により、ブランドのビジュアルアイデンティティに沿った一貫したデザインをページ全体で維持できます。
- プリセットペイント: スタイルガイドの設定に基づいて、「最も明るい背景」や「最も暗い背景」などの定義済みのペイントオプションから選択します。これらのオプションを使用すると、ブランディングに沿ったまとまりのあるデザインを維持できます。
- スタイルカラーを編集: 「スタイルカラーを編集」をクリックするとスタイルガイドが開き、ペイントのカラーパレットをカスタマイズできます。ペイントカラーのカスタマイズについて詳しくは、「スタイルの色をカスタマイズする方法」の記事を参照してください。
サイズと位置
サイズと位置 設定では、行の幅、パディング、列の高さを制御して、レイアウトを細かく調整できます。
-
幅: スライダーを動かすか、特定のピクセル値またはパーセンテージ値を入力して行の幅を調整し、ページ上で占めるスペースを制御します。
-
列の高さ: 全体 と 自動 のどちらかを選択して、行内の列の高さを制御します。
-
全体: 行内のすべての列を、最も高い列に合わせて同じ高さにします。
-
自動: 各列の高さを、中のコンテンツに応じて自動的に調整します。
-
パディング
パディング 設定は、コンテンツとそのコンテナ (セクション、行、列、要素など) の内側の端との間のスペースを制御します。この内側の余白によってコンテンツにゆとりが生まれ、視覚的にバランスよく見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズをまたいで一貫した間隔を作成します。
パディングのオプション:
-
上: 要素コンテナの上端とそのコンテンツの間にスペースを追加します。
-
下: 要素コンテナの下端とそのコンテンツの間にスペースを追加します。
-
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
-
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するためにギャッププロパティが追加されています。たとえば、上下のパディングを定義しなくても、アコーディオン要素内の各アコーディオンアイテムの間隔を調整できます。
デスクトップとモバイル (🖥️ と 📱) のカスタマイズ:
パディング設定では、デスクトップ 表示と モバイル 表示で別々の値を定義できます。パディングコントロールの上部にある デバイス切り替え を使用して画面モードを切り替え、それぞれの間隔を調整します。モバイルの値を指定しない場合は、デフォルトでデスクトップの設定が引き継がれます。モバイルの値は幅770px以下の画面に適用されます。設定パネルのデバイスアイコンにカーソルを合わせると、編集中の値が適用される画面幅を確認できます。
この機能により、さまざまな画面サイズに合わせてレイアウトが最適化され、モバイルとデスクトップの両方でのエクスペリエンスが向上します。
背景
背景 プロパティを使用すると、セクション、行、列、フレックスコンテナなどのさまざまなコンテナや、動画などの個々の要素に背景画像を追加してカスタマイズできます。背景オプションをオンにすると設定が有効になり、背景画像のソース、スタイル、フィット、色のオプションを設定できます。
-
画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーで直接アップロードします。
-
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
-
なし: 追加のスタイルを適用せずに、背景画像を元のサイズと位置で表示します。画像がコンテナより小さい場合は、すき間ができることがあります。
-
フルセンター: サイズを変更せずに画像をコンテナの中央に配置します。画像がコンテナより小さい場合は、空白が残ることがあります。
-
フルセンター（パララックス）: 画像を中央に配置し、パララックススクロール効果を適用します。画像がメインコンテンツとは独立して動くため、奥行きのある見た目になります。
注:
iOS の制限により、Apple のモバイルデバイスではパララックス効果が自動的に無効になります。iOS デバイス (Safari およびその他の WebKit ブラウザ) では、CSS でパララックススクロールを実装する中心的な仕組みである
background-attachment: fixedのサポートが限定的であるか、まったくサポートされていません。レイアウトの整合性を保つため、背景はデフォルトで静的なスタイル (例: フルセンター) になります。 -
幅100%にフィル: アスペクト比を維持したまま画像を拡大して、コンテナの幅全体を覆います。上下が切り取られる場合があります。
-
幅と高さ100%にフィル: 画像を引き伸ばして、コンテナの幅と高さの両方を埋めます。アスペクト比を維持するため、画像の一部が切り取られます。
-
繰り返さない: 画像を繰り返さずに 1 回だけ表示します。使われていないスペースは空白のままになります。
-
繰り返す: 画像をタイル状に並べて、コンテナの幅と高さの両方を覆います。
-
水平に繰り返す: コンテナの幅方向にのみ画像を繰り返します。
-
垂直に繰り返す: コンテナの高さ方向に沿って画像を縦に並べます。
-
-
画像フィット: コンテナ内での画像の位置 (例: 中央、左上、右下) を指定して、配置を整えます。
-
色: このオプションでは、背景 と 前景 の色を設定できます。
-
背景色: 背景画像を使用しない場合は、単色またはグラデーションの色を背景に直接適用できます。カラーピッカーでカスタムカラーを選ぶか、統一感を出すためにスタイルガイドから色を選択します。背景画像を使用している場合、背景色は通常表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗したときの代替として表示されたりすることがあります。
-
前景色: 背景画像の上にオーバーレイを追加します。不透明度を調整して、画像に色味を付けたり、やわらかい印象にしたりできます。このレイヤーによって読みやすさを高めたり、画像にスタイリッシュな色合いを加えたりできます。
-
-
背景動画: 動画を背景として使用するには、「背景動画」オプションをオンにします。YouTube または Vimeo の動画 URL を入力すると、その動画がコンテナの背景に設定されます。
注:
背景動画オプションは、セクション、行、フレックス コンテナでのみ使用できます。
ボーダー
ボーダー 設定では、要素の周囲にボーダーを追加してスタイルを設定し、ページ上での視覚的な輪郭や区切りを強調できます。
-
スタイルプリセット (1、2、3): スタイルガイドの定義済みのボーダースタイルから選択します。これらのプリセットを使用すると、ページ全体で一貫したボーダースタイルを要素にすばやく適用できます。
-
スタイルを編集: スタイルガイドのプリセットのボーダースタイルを変更するには (そのスタイルを使用するすべての要素に影響します)、スタイルを編集 を選択してグローバル設定でデザインを調整します。
-
上書き: 上書き オプションを使用すると、グローバルなスタイルガイドの設定に影響を与えずに、この要素のボーダー設定だけをカスタマイズできます。
-
ボーダー: 要素のどの辺にボーダーを表示するかを選択します。上、下、左、右のボーダーを自由に組み合わせることができます。
-
ボーダースタイル: デザインの好みに合わせて、ソリッド、ダッシュ、ドットなど、ボーダーの線のスタイルを選択します。
-
カラー: カラーピッカーを使用してボーダーの色を選択します。スタイルガイドの色またはカスタムカラーを選択して、ボーダーの色をデザインの配色に合わせることができます。
-
ストロークサイズ: ストロークサイズ スライダーを使用するか、特定のピクセル値を入力してボーダーの太さを調整し、細い輪郭線から太いフレームまで作成できます。
シャドウ
シャドウ 設定では、要素にシャドウ効果を適用して奥行きや強調を加え、見た目を向上させることができます。シャドウのプロパティをカスタマイズする方法は次のとおりです。
-
スタイル: ページのスタイルガイドにある定義済みのシャドウスタイルから 1 つを選択します。番号付きのスタイル (1、2、3) をクリックすると、スタイルガイドで定義されたプリセットのシャドウ設定が適用されます。
-
シャドウスタイル: インセット (要素の内側のシャドウ) と アウトセット (要素の外側のシャドウ) のどちらかを選択して、目的のシャドウ効果を作成します。
-
X方向: シャドウの水平方向の位置を調整します。正の値ではシャドウが右に、負の値では左に移動します。
-
Y方向: シャドウの垂直方向の位置を制御します。正の値ではシャドウが下に、負の値では上に移動します。
-
ブラー: シャドウの端のぼかし具合を制御します。値を大きくするとより拡散したやわらかいシャドウになり、値を小さくするとシャドウがくっきりします。
-
スプレッド: シャドウのサイズを調整します。正の値ではシャドウが広がり、負の値では狭くなります。
-
カラー: カラーピッカーを使用してシャドウの色を設定します。
コーナー
コーナー 設定では、要素の角の丸み (border-radius) を調整して、丸みのある角やシャープな角を自由に作成できます。
-
スタイルプリセット (1、2、3): スタイルガイドで設定された定義済みのコーナースタイルから選択します。これらのプリセット (1、2、3) を使用すると、ページ全体のデザインに合ったスタイルをすばやく適用できます。
-
スタイルを編集: スタイルガイドでスタイルを直接変更するには (そのスタイルを使用するすべての要素に影響します)、スタイルを編集 をクリックしてグローバル設定でプリセットを調整します。
-
上書き: スタイルガイドを変更せずにカスタムのコーナー設定を適用するには、上書き をクリックします。これにより、この要素だけのコーナー半径を調整できます。
-
すべての角: スライダーを調整するか、ピクセルまたはパーセンテージで特定の値を入力して、4 つの角すべてに同じ border-radius を設定します。
-
エッジを分ける: エッジを分ける を有効にすると、各角を個別に調整できます。左上、右上、左下、右下 の角にそれぞれ異なる値を設定して、独自の形状を作成できます。
モバイルで列を表示
モバイルで列を表示 設定では、小さな画面で行内の列をどのように表示するかを制御できます。この設定は、高度な タブの 高度なCSS の下にあります。オプションはアイコンで表示されます。デフォルトでは、読みやすさのために、モバイルデバイス（幅770px以下の画面）では行内の列が縦に積み重ねられます。この設定を使用すると、デザインの好みに合わせて表示を調整できます。
-
垂直 (デフォルト): 列を縦に積み重ねて、小さな画面でも読みやすくします。
-
水平: デスクトップ画面と同じ横並びのレイアウトを維持して、列を横に並べて表示します。
-
垂直 (逆順): モバイルでの列の縦の積み重ね順を逆にして、別の表示順にします。たとえば、デスクトップでコンテンツが画像、テキストの順に配置されている場合、モバイルで逆順を使用すると、テキスト、画像の順に積み重ねて、話の流れを保つことができます。
-
水平 (逆順): モバイルで列を逆の順序で横に並べて表示します。
コントロールパネル
コントロールパネル は、ページエディタ内のすべてのコンテナ (セクション、行、フレックス、要素) の下部に表示され、そのコンテナの重要な設定や操作にすばやくアクセスできます。各アイコンの意味は次のとおりです。
-
すべて: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) で表示されます。
-
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: コンテナをページ上で非表示にします。クリックすると、コンテナはエディタ内で非表示になりますが、削除はされません。非表示にしたコンテナは、上部のナビゲーションバーにある レイアウト メニューから確認できます。エディタで再表示するには、すべて、デスクトップ、またはモバイルのアイコンを選択します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ゴミ箱 (🗑️) アイコン: コンテナをページエディタから完全に削除します。
高度な設定
コンテナ (セクション、行、列、要素) をさらにカスタマイズできるように、ClickFunnels には、スタイル、高度な CSS、アニメーション、レンダリングロジックを制御できる 高度な 設定が用意されています。1 か所に情報が多くなりすぎないよう、またドキュメントを簡潔に保つため、これらの高度な機能は個別の記事で説明しています。詳しくは次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に生成する方法、コンテナを配置する方法、z-index を適用する方法を説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加、開始・終了エフェクトの制御、アニメーションの遅延の調整方法を説明します。
-
詳細設定 - ロジックのカスタマイズ: 要素に条件付きロジックを適用する方法と、カスタム属性を追加する方法を説明します。
行のレイアウトは、列を直接操作して整理できます。任意の列にカーソルを合わせると、上端にインラインコントロールが表示されます。
-
列設定 ( ⚙️ 歯車アイコン):
歯車 ⚙️ アイコンをクリックすると、選択した列の設定が開きます。ここでは、行内の他の列に影響を与えずに、その列だけのボーダー、パディング、マージン、背景、シャドウ、コーナーのスタイル (およびその他の外観オプション) を細かく調整できます。
使用例: 中央のカードを別の背景で目立たせたい場合、片側に区切り用のボーダーを追加したい場合、注目の列に追加のパディングを付けたい場合など。 -
列を削除:
ゴミ箱 🗑️ アイコンをクリックすると、選択した列 (とその内容) が削除されます。残りの列は自動的に再配置されます。たとえば、3 列の行から 1 列を削除すると、2 列の行になります。グリッドをすばやく簡素化したり、紹介するアイテムが少ない場合にレイアウトを調整したりするのに使用します。 -
列の入れ替え:
各列の間には入れ替えコントロールが表示されます。クリックすると、隣り合う 2 つの列の位置が入れ替わります (例: 列 1 を列 2 の位置に移動、またはその逆)。次のような場合に便利です。-
行を作り直さずに、売れ筋商品を先頭に配置したい場合。
-
コンテンツを並べ替えて読みやすい流れにしたい場合 (例: モバイルの積み重ね設定と組み合わせて、デスクトップでは画像 → テキスト、モバイルではテキスト → 画像にする)。
-
-
幅の調整 (ドラッグハンドル):
列の境界にあるドラッグハンドルをクリックしたまま左右にドラッグして、列の幅を調整します。重要な列により多くのスペースを割り当て、補助的な列のスペースを減らすことができます。例:-
中央の商品カードを広くして、注目のオファーを強調する。
-
画像とコピーのレイアウトを 70/30 に分割する。
-
サイドバーの列を狭くして、メインコンテンツのスペースを広げる。
-
-
列を追加:
行にカーソルを合わせ、行のツールバーにある 列を追加 をクリックすると、列をもう 1 つ追加できます (1 行あたり最大 6 列)。行にすでに 6 列ある場合、ボタンには 列を追加できません と表示されます。