ストアリンク: ユーザーがストアリンクからストアにアクセスできるようにする

公開日: 2024年11月18日更新日: 2026年10月21日

ClickFunnels の ストアリンク 要素を使用すると、ユーザーをストアフロントに誘導するリンクを作成できます。この要素はどのページにも追加できるため、訪問者はストアを簡単に探索できます。この記事では、ストアリンク要素を追加し、ページデザインに合わせてカスタマイズする方法を学習します。

必要条件

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

ページエディタでのストアリンク要素の追加

ページエディタ内で、要素を配置する場所に セクション を追加します。
そのセクション内に行を追加します。
行内のオレンジ色の + プラス または 新しい要素を追加 ボタンをクリックして、新しい要素を挿入します。
高度な カテゴリから ストア セクションまでスクロールし、リンク 要素を選択します。

ストアリンク要素を追加すると、ページデザインに合わせて外観をカスタマイズできます。

ストアリンク要素のカスタマイズ

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

上マージン

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

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

リンク名

リンクに表示されるテキストを編集できます。たとえば、「詳細を表示」を「当店に行く」などのフレーズに変更できます。

ターゲット

クリックしたときにリンクを開く方法を設定します。

同じウィンドウ: リンクが現在のブラウザタブで開きます。
新しいタブ: リンクが新しいブラウザータブで開きます。

パディング

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

パディングオプション:

上: 要素コンテナの上部とそのコンテンツの間にスペースを追加します。
下: 要素コンテナの下部とそのコンテンツの間にスペースを追加します。
左 + 右: 要素コンテナとそのコンテンツの間の水平方向の間隔を調整します。
ギャップ: アコーディオン などの特定の要素では、コンテナ内のアイテム間の間隔を設定するために gap プロパティが追加されます。たとえば、上下にパディングを定義せずに、アコーディオン要素内の各アコーディオン項目間のギャップを調整できます。

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

パディング設定を使用すると、 デスクトップ ビューと モバイル ビューに別々の値を定義できます。パディングコントロールの上部にある デバイストグル を使用して、画面モードを切り替え、それに応じて間隔を調整します。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。

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

背景

背景プロパティを使用すると、セクション、行、列、フレックスコンテナ、またはビデオなどの個々の要素など、さまざまなコンテナの背景画像を追加およびカスタマイズできます。背景オプションをオンにすると設定がアクティブになり、背景画像のソース、スタイル、フィット、および色のオプションを構成できます。

画像URL: 背景画像の URL を入力するか、ClickFunnels の画像ギャラリーから直接アップロードします。
画像スタイル: コンテナ内での背景画像の表示方法を制御します。
- なし: 追加のスタイル設定なしで背景画像を元のサイズと位置で表示し、画像がコンテナよりも小さい場合は隙間が残る可能性があります。
- フルセンター: サイズを変更せずにコンテナ内の画像を中央に配置します。これにより、画像がコンテナよりも小さい場合は空白スペースが残る可能性があります。
- フルセンター（パララックス）: 画像を中央に配置し、パララックス(視差)スクロール効果を適用して、画像がメインコンテンツとは独立して移動するときにレイヤー化された外観を作成します。
  
  注:
  
  iOS の制限により、パララックス効果は Apple モバイルデバイスでは自動的に無効になります。iOS デバイス (Safari やその他の WebKit ブラウザー) は、視差スクロールが CSS で実装される方法の中核部分である background-attachment: fixed のサポートが制限されているか、まったくサポートされていません。レイアウトの整合性を維持するために、背景はデフォルトで静的なスタイル(フルセンターなど)になります。
- 幅100%にフィル: このオプションは、画像を拡大してコンテナの全幅をカバーし、縦横比を維持し、場合によっては垂直方向にトリミングします。
- 幅と高さ100%にフィル: これにより、画像が引き伸ばされ、コンテナの幅と高さの両方が塗りつぶされ、画像の一部がトリミングされて縦横比が維持されます。
- 繰り返さない: 繰り返さずに画像を 1 回表示します。未使用のスペースは空のままになります。
- 繰り返す: 画像をコンテナ全体に並べて、幅と高さの両方をカバーします。
- 水平に繰り返す: コンテナの幅全体でのみ画像を繰り返します。
- 垂直に繰り返す: コンテナの高さに沿って画像を垂直に重ねます。
画像フィット: コンテナ内での画像の位置 (中央、左上、右下など) を指定して、配置を改善します。
色: このオプションを使用すると、背景と前景の色を設定できます。
- 背景: 背景画像を使用したくない場合は、単色またはグラデーション色を背景として直接適用できます。カスタムカラーのカラーピッカーから選択するか、スタイルガイドから色を選択して一貫性を保ちます。背景画像を使用する場合、背景色は通常表示されませんが、画像の読み込み中に一時的に表示されたり、画像の読み込みに失敗した場合のフォールバックとして機能したりする可能性があります。
- 前景: 背景画像の上にオーバーレイを追加し、不透明度を調整して画像に色付きまたは柔らかい効果を作成できるようにします。このレイヤー化により、読みやすさが向上したり、画像に文体の色合いを追加したりできます。
背景動画: 動画を背景として使用するには、「背景動画」オプションをオンに切り替えます。YouTube または Vimeo の動画 URL を入力して、動画をコンテナの背景として設定します。

注:

「背景動画」オプションは、セクション、行、Flex コンテナでのみ使用できます。

スタイルガイドオプション

ベーススタイルガイドを選択して、ページ上で選択したスタイルガイドと一致するようにします。タイポグラフィ設定では、基本スタイルの選択に基づいてフォントのプロパティが自動的に調整されます。たとえば、サブ見出し を選択すると、ページのスタイルガイドの サブ見出し に関連付けられたプロパティが タイポグラフィ 設定に適用されます。タイポグラフィセクションでさらに調整を行うことができます。

詳細情報: スタイルフォントをカスタマイズする方法。

タイポグラフィ

タイポグラフィ設定では、要素内のテキストの外観を制御できます。これらの設定では、2 つのビューが提供されます。定義済みのスタイル (小、中、または大) を選択して、ページ全体に一貫したデザインを適用できます。定義済みのスタイルを上書きすることを選択した場合は、追加の設定が使用可能になり、文字の外観を手動でカスタマイズできます。

フォントファミリー: このオプションを使用すると、テキストのフォントタイプを選択できます。ClickFunnels は、Google Fonts ライブラリからさまざまな人気のあるフォントを提供します。さらに、ワークスペース設定 > マイアセット > フォント に移動して、独自のカスタムフォントをアップロードして使用できます。アップロードすると、カスタムフォントが選択リストに表示され、使用できるようになります。
ウェイト: このオプションは、テキストの太さを定義します。希望する強調に応じて、薄い、レギュラー、または ボールド のオプションから選択できます。細いフォントは微妙な外観を提供し、太字のフォントはより視覚的なインパクトを生み出します。
フォントサイズ: スライダーを使用するか、特定の値を手動で入力してテキストサイズを調整できます。さらに、サイズ測定には 2rem や 32px など、rem または px から選択できます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルのフォントサイズ値を個別に設定することもできます。
- Rem は、スタイルガイドで定義されている基本フォントサイズに基づく相対単位です。たとえば、テキストサイズを 2rem に選択し、スタイルガイドでデスクトップ用の基本フォントサイズを 16px に指定した場合、結果のテキストサイズはデスクトップビューで 32px になります (つまり、2rem × 16px = 32px)。
- Px は絶対測定値であり、テキストサイズを正確に制御できます。
文字間隔: 個々の文字間のスペースを調整します。スライダーを使用して値を増減するか、特定の値(レム単位で測定)を入力できます。間隔を長くすると文字が広がり、間隔を小さくすると文字が近づきます。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの文字間隔値を個別に設定することもできます。
行の高さ: テキストの行間の垂直方向のスペースを制御します。これは通常、フォントサイズのパーセンテージとして表されます。パーセンテージを大きくすると、行間のスペースが増え、特に大きなテキストブロックの場合、読みやすさが向上します。また、デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルで行の高さの値を個別に設定することもできます。
リンク: カラーピッカーを使用して、リンクテキストの色を選択します。スタイルガイドから定義済みの色を選択するか、カスタム色を作成できます。カスタムカラーピッカーを使用する場合は、スライダーを使用して色を選択するか、特定のHEXコードを入力できます。さらに、2 番目のスライダーを使用して不透明度(アルファ値)を調整できます。左に動かすと不透明度が下がり、色がより透明になり、右に動かすと完全に不透明になります。ストアリンク要素には、色、太字、アイコンの色 の個別のオプションはありません。
テキストの大文字小文字: テキストの大文字と小文字の表示方法を選択します。
- 小文字: すべてのテキストが小文字です。
- 大文字: すべてのテキストが大文字です。
- 大文字にする: 各単語の最初の文字を大文字にします。
装飾: 次のようなテキスト装飾を追加します。
- 下線: テキストの下に線を引きます。
- 取り消し線: テキストを水平線で取り消します。
- 下線 + 上線: テキストの下と上の両方に線を引きます。
不透明度: テキストの不透明度を調整します。スライダーを使用すると、テキストを多かれ少なかれ透明にすることができます。スライダーを 左 (0) に動かすと不透明度が下がり(テキストの透明度が高くなります)、右 (1) に動かすとテキストが完全に不透明になります。
アライン: コンテナ内のテキストの配置を設定します。ページのデザインに基づいて、テキストを左、中央、または右に揃えることを選択できます。

テキストの影

テキストの影 セクションは、テキストの背後に微妙なシャドウを追加し、奥行きを生み出し、読みやすさを向上させます。次のパラメータを制御できます。

オフセット-x と オフセット-y: シャドウの水平方向と垂直方向の位置を調整します。
ブラー: シャドウのぼかしやシャープさを設定します。
色: ページデザインに一致または対照するシャドウの色を選択します。

コントロールパネル

コントロールパネルは、ページエディタのすべてのコンテナ(セクション、行、Flex、および要素)の下部に表示され、そのコンテナの重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
設定パネルのヘッダーにあるコード（</>）アイコンと、下部バーの可視性・すべて・デスクトップ・モバイル・目・ゴミ箱アイコン

ALL: コンテナはすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
デスクトップ (🖥️**) アイコン**: コンテナはデスクトップビューでのみ表示されます。
モバイル(📱)アイコン:コンテナはモバイルビューでのみ表示されます。
目 (👁️) アイコン: これを使用して、ページからコンテナを非表示にします。クリックすると、コンテナはエディターで非表示になりますが、削除されません。上部のナビゲーションバーの レイアウト メニューをクリックして、非表示のコンテナーを見つけることができます。すべて、デスクトップ、または モバイル アイコンを選択して、エディターで再表示します。
コード (</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。
ごみ箱 (🗑️**) アイコン**: ページエディターからコンテナーを完全に削除します。

詳細設定

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

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