リンク: アンカーリンクの追加
公開日: 更新日:
ClickFunnels の リンク 要素を使用すると、ハイパーリンクやナビゲーション リンクを簡単に作成して、ユーザーを他のセクション、ページ、または外部 URL に誘導できます。この要素はボタンに代わる多用途の要素であり、ポップアップを開く、フォームを送信する、別のページに移動するなど、さまざまなアクションにクリック可能なテキスト リンクを提供できます。この記事では、ページにリンク要素を追加し、最適なユーザー エクスペリエンスを実現するためにその設定をカスタマイズする方法を学習します。
-
アクティブなClickFunnelsアカウント
-
ワークスペースで作成されたページ
ページエディタでのリンク要素の追加
Section titled “ページエディタでのリンク要素の追加”-
ページエディタ内で、要素を 配置するセクション を追加します。
-
そのセクション内に 行 を追加します。
-
行内のオレンジ色の + プラスまたは [新しい要素を追加 ] ボタンをクリックして、新しい要素を挿入します。
-
[コンテンツ] カテゴリから、[リンク] 要素を選択します。
リンク要素を追加すると、ページ デザインに合わせて外観をカスタマイズできます。
リンク要素のカスタマイズ
Section titled “リンク要素のカスタマイズ”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車アイコン (⚙️) をクリックするか、要素を直接クリックします。
上マージン
上マージン設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
リンク設定
リンク設定 では、リンクのテキストと、訪問者がリンクをクリックしたときの動作を設定できます。
-
リンク名: リンクの表示テキストを入力します。これは、ユーザーがページ上で目にするクリック可能なテキストです。
-
リンクのクリック時のアクション: ユーザーがリンクをクリックしたときの動作を選択します。使用できるアクションは次のとおりです。
-
何も起こらない: リンクをクリックしても何も起こりません。
-
リンクなし: このオプションもドロップダウンに表示されます。
-
移動先…: カスタムURL、カスタムアクションリンク、ストアページ、ブログホームページ のいずれかを選択します。カスタムURL は入力した内容の先頭に必ず
https://を追加するため、Web アドレスにのみ使用してください。/terms-and-conditionなどの相対パス、#open-popupなどのカスタムアクションコマンド、電話、テキストメッセージ、メールのリンクには、カスタムアクションリンク を使用します。新しいウィンドウで開く をオンにすると、リンクがブラウザの新しいタブで開きます。 -
注文/フォームを送信: ページ上の注文またはフォームを送信します。リダイレクトオーバーライドを有効にする をオンにすると、送信後の移動先を指定できます。
-
1クリックアップセル: ファネルステップのページでのみ使用できます。選択した後、製品を追加 をクリックして、提供する製品を選択します。
-
スクロール先…: 選択したセクション、行、または要素までページをスクロールします。
-
表示または非表示…: 選択した要素、セクション、または行を表示または非表示にします。詳しくは、「ボタンクリックでコンテンツを表示/非表示にする」の記事を参照してください。
-
ポップアップを開く…: ページのポップアップを開きます。
-
ポップアップを閉じる…: 開いているポップアップを閉じます。
-
完了をマーク…、次のレッスンへ進む…、前のレッスンに戻る…、レッスンを再スタート…: コースページのリンク用のレッスンアクションです。それぞれの動作については、「ClickFunnels でのボタン、テキスト、画像のアクションの設定」を参照してください。
-
次のステップにリダイレクト: 訪問者をファネルの次のステップに移動します。
-
ファイルをダウンロード…: 訪問者がリンクをクリックしたときに受け取るファイルを添付します。詳しくは、「ボタンをファイルのダウンロードに変える」の記事を参照してください。
-
パディング
パディング 設定は、コンテンツとそのコンテナの内側の端 (セクション、行、列、要素など) の間のスペースを制御します。この内部間隔により、コンテンツに呼吸する余地を確保し、視覚的にバランスが取れているように見えます。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
パディングオプション:
-
上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
-
下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
-
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
-
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。
デスクトップとモバイル(🖥️ & 📱)カスタマイズ:
パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。 モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。
この機能により、レイアウトがさまざまな画面サイズに合わせて最適化された状態が維持され、モバイルとデスクトップのエクスペリエンスが向上します。
タイポグラフィ
タイポグラフィ設定では、要素内のテキストの外観を制御できます。上部で、スタイルガイドのテキストスタイルのプリセット (S、M、L、XL) を選択します。プリセットを選択した状態で スタイルを編集 をクリックするとスタイルガイドでそのプリセットを変更でき (そのプリセットを使用するすべての要素に反映されます)、上書き をクリックするとこの要素だけのフォント設定を調整できます。プリセットを使わずにフォント設定を直接行うには、… を選択します。
-
フォントファミリー: このオプションを使用すると、テキストのフォント タイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > 私の資産 > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
-
ウェイト: このオプションは、テキストの太さを定義します。フォントごとにサポートされているウェイトだけが表示されるため、選択できるウェイトは選択したフォントによって異なります (例: 薄い、レギュラー、セミボールド、ボールド)。細いウェイトは控えめな印象を与え、太いウェイトはより視覚的なインパクトを生み出します。
-
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキスト サイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
-
Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
-
Px は絶対測定値であり、テキスト サイズを正確に制御できます。
-
-
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
-
行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォント サイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。 また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。
-
リンク: カラーピッカーを使用して、リンクテキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。リンク要素には、色、太字、アイコンの色 の個別のオプションはありません。
-
テキストの大文字小文字: テキストの大文字と小文字の表示方法を選択します。
-
小文字: すべてのテキストが小文字です。
-
大文字: すべてのテキストが大文字です。
-
大文字にする: 各単語の最初の文字を大文字にします。
-
-
装飾: 次のようなテキスト装飾を追加します。
-
下線: テキストの下に線を引きます。
-
取り消し線: テキストを水平線で取り消します。
-
下線 + 上線: テキストの下と上の両方に線を引きます。
-
-
不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを 左 (0) に動かすと不透明度が下がり (テキストの透明度が高くなります)、右 (1) に動かすとテキストが完全に不透明になります。
-
アライン: コンテナ内のテキストの配置を設定します。 ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで異なる配置を設定できます。
背景
背景 セクションでは、要素の背景色を設定できます。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。 カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。
テキストの影
テキストの影 セクションは、テキストの背後に微妙な影を追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。
-
オフセットX と オフセットY: 影の水平方向と垂直方向の位置を調整します。
-
ブラー: 影のぼかしやシャープさを設定します。
-
カラー: ページデザインに一致または対照する影の色を選択します。
コントロールパネル
コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
すべて: コンテナはすべてのデバイス（デスクトップ、タブレット、モバイル）で表示されます。
-
デスクトップ (🖥️) アイコン: コンテナはデスクトップ表示（幅771px以上の画面）でのみ表示されます。
-
モバイル (📱) アイコン: コンテナはモバイル表示（幅770px以下の画面）でのみ表示されます。
-
目 (👁️) アイコン: すべてのデバイスでコンテナを非表示にします。コンテナは削除されません。再表示するには、このパネルで すべて、デスクトップ、または モバイル を選択するか、上部バーの レイアウト を開いて、そのコンテナのデスクトップまたはモバイルの切り替えをオンに戻します。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ごみ箱 (🗑️) アイコン: ページ エディターからコンテナーを完全に削除します。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。