• Skip to primary navigation
  • Skip to main content

石崎力也のコンサルティング「いしこん」

年収1000万円以上のネットビジネス経営者を対象にデジタルコンテンツの販売方法とマーケティングオートメーションの導入方法に関する情報を発信するブログ。

  • いしこん 2.0
  • 無料ウェビナー
  • もう1本読む?
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • ログイン
    • 新規登録はこちら
    • アカウントを持っている
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 5-23 クリックファネルでクリックしてページ内ジャンプするリンクの作り方

5-23 クリックファネルでクリックしてページ内ジャンプするリンクの作り方

Last updated on 2021年4月14日 By 石崎 力也

今回はClickFunnelsでクリックするとページ内でスクロールしてジャンプしてくれるようなリンクを作っていきます。

今回お届けするノウハウはこちら

  • Step1. 「BUTTON」と「HEADLINE」を挿入する
  • Step2. 「BUTTON」を設定する
  • Step3. 「HEADLINE」を設定する
  • やり方を動画で見る

Step1. 「BUTTON」と「HEADLINE」を挿入する

「ADD NEW ELEMENT」をクリックして「BUTTON」と「HEADLINE」を選択します。今回はボタンとテキストのリンクで飛ばすものも作りたいので、大きめのテキストが入る「HEADLINE」を用意してみましょう。

まずは下準備をします。飛ばしたい場所のSectionのSETTINGタブに行き、右下の「GET CSS INFO」と出ている「#」をクリックします。そうすると上に「Title:」、下に「CSS ID Selector:」がある画面が出てきます。

「Title:」は「Section」などの単純な名前になっていると思いますが、これをユニークな名前に変更します。飛ばすときにこの名前を使うため、他の名前とかぶっていると他のSectionに飛んでしまったりして不具合の原因になるので、例えば購入の所に飛ばすのであれば「PurchaseSection」のような名前にします。入力したらコピーして「UPDATE」をクリックします。「CSS ID Selector:」の「#section–89682」もコピーして控えておきます。

Step2. 「BUTTON」を設定する

次にボタンのSETTINGSタブから「EDIT ACTION」の「SET ACTION」に行きます。スクロールに関しては2通りのやり方があり、「SCROLL TO ROW / SECTION ON PAGE」と「GO TO WEBSITE URL」で設定できます。

  • SCROLL TO ROW / SECTION ON PAGE:選択肢がたくさんあるときに例えば「p」を押すと「Purchase」が出てきたりします。「PurchaseSection (section)」を選択するとPurchaseのSectionに飛ぶようになります。
  • GO TO WEBSITE URL:SETTINGSタブに行き、「EDIT ACTION」の「SET ACTION」から「GO TO WEBSITE URL」を選択して、先ほどの「PurchaseSection」という名前をコピーします。ここからが重要です。「#scroll」と全部小文字で入れて、「-」を入れた後に「セクション名」と書いてある日本語の部分を先ほどコピーした「PurchaseSection」にします。これを全部選択してコピーしておきます。ここで「GO TO WEBSITE URL」に貼り付けます。設定した後は結局両方とも同じ挙動になります。

Step3. 「HEADLINE」を設定する

テキストの所も全部テキストを選択してもいいですし、一部だけ(下の図の例の場合は「Headline」のみ)ということもできるのでリンクを作ってください。そうしたら「#」の所に先ほどコピーしたものを入れて「#scroll-PurchaseSection」という名前にします。

ちょっとお見せしたいものがあるので、もう一つ作っていきます。「CSS ID Selector:」の所の「#section–89682」はページ内のジャンプで使えます。

例えば「#」の所に入れて「#section–89682」にすると挙動が変わるので、この2つの違いをよく見ておいてください。上はスクロールあり、下はスクロールなしでジャンプしてくれます。セーブしてプレビューで見ていきます。

新しく作ったボタンをクリックしてみます。「Click to Sign Up」のボタンはどちらも挙動が一緒だと思います。次はテキストです。

  • 上の「Headline」はスクロールありのほうです。クリックするとスクロールしました。
  • 下の「Headline」は「CSS ID Selector:」を直接貼り付けたものです。これはClickFunnelsのヘルプにも何も書いていないのですが、クリックするとスクロールではなく時間をかけずに一瞬で飛んでしまうのがわかると思います。これはお好みになるのですが、どちらがいいのかを試してみてください。

ちなみに今のやり方はボタンのほうでもできて、「SET ACTION」で「GO TO WEBSITE URL」に直接「CSS ID Selector:」の名前を入れます。そうするとボタンの挙動がスクロールではなくなります。

ということで、細かい差異はあるのですが、私はスクロールのほうがページ内でジャンプしたことがわかりやすいので良いのではないかと思っています。いろいろ試して使ってみてください。今回は以上です。

やり方を動画で見る

ClickFunnels(クリックファネル)の使い方・操作方法の一覧ページに戻る

Filed Under: ClickFunnels

知っていることはお金になる…1度限りのウェビナーをご用意しました

石崎力也のコンサルティング「いしこん」

Copyright © 2023 · Rikiya "Sales Funnel" Ishizaki