• Skip to primary navigation
  • Skip to main content

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

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

  • いしこん 3.0
  • 無料ウェビナー
  • もう1本読む?
    • 個人事業主のためのAIツール活用術|ChatGPTから始めるビジネスの自動化・効率化マスターガイド
    • ネット広告代理店を個人で開業!Facebook広告運用のスキルを身につけて成功する方法|ツールの設定、数値分析、営業、業務効率化まで
    • 【保存版】コンテンツマーケティングのネタ切れを防ぐ!ネタの見つけ方と戦略のコツ
    • 上級者をペルソナに設定し優良顧客だけを集める方法
    • Eメールマーケティングの基礎知識|開封率と成約率の向上、セグメンテーションまで
    • 30代フリーランスが家族と一緒にオランダに移住した体験を話します
    • Webマーケティングのやり方マスター講座|ブランディング戦略、SNS発信、スケジュール管理を解説
    • ネットビジネスの始め方【これでオランダ移住を実現しました】
    • オンラインコース(講座)ビジネスの作り方・やり方
    • 会員制サイトの作り方とサブスクリプションの導入方法
    • 動画広告の作り方マスター講座|種類、活用方法から効果測定のコツまで
    • 短くて成約率の高いVideo Sales Letter(VSL)の作り方
    • エバーグリーンローンチとは?ツールの使い方を詳しく解説!
    • 個人でKindle電子書籍を出版して利益を得る方法
    • Teachable(ティーチャブル)の使い方・操作方法
    • ClickFunnels(クリックファネル)の使い方・操作方法
  • コース一覧
  • お客様の声
  • 石崎力也とは?
  • リソース
  • スクール
  • Show Search
Hide Search
現在の場所:ホーム / ClickFunnels / 5-24 クリックファネルでクリックでポップアップ表示する画像を入れる

5-24 クリックファネルでクリックでポップアップ表示する画像を入れる

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

今回はClickFunnelsでポップアップ表示する画像を入れていきます。

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

  • Step1. 「IMAGE POPUP」を挿入する
  • Step2. SETTINGSタブを設定する
  • Step3. THEMESタブを設定する
  • Step4. ADVANCEDタブを設定する
  • やり方を動画で見る

Step1. 「IMAGE POPUP」を挿入する

「ADD NEW ELEMENT」をクリックして「IMAGE POPUP」を選択します。サムネイル部分とクリックした後のフルサイズの画像を両方セットしていきます。

Step2. SETTINGSタブを設定する

  • TOP MARGIN:エレメントの上の余白を調整できます。
  • 「THUMBNAIL」と「FULL SIZE」:小さい画像をわざわざ作り直す必要はありません。両方ともURLは全く同じものが入っています。この場合はサムネイルの部分だけ「THUMBNAIL HEIGHT」を小さくして、クリックすると同じ画像が引き延ばされたような状態で出てくるように加工しています。「ADD IMAGE」をクリックして画像を追加します。「FULL SIZE」のほうも「ADD IMAGE」で同じ画像を追加します。これは別の画像でも構いません。クリックしたら別の画像が出てくるというのもありなので、クリックしたいような画像にしておいて、見てほしい画像を「FULL SIZE」のほうに入れるというやり方でもいいです。今回はサイズが大きいままやっていきます。
  • ALT TEXT:画像が表示されないときにテキストで代替するという機能です。HTMLがわかる人はピンとくるのではないかと思います。
  • 「THUMBNAIL WIDTH」と「THUMBNAIL HEIGHT」:先ほども説明したようにサムネイル部分の大きさを変えることができます。WIDTHと HEIGHTを指定することができるのですが、両方というよりは片方を指定するほうがいいと思います。片方だけを指定すると画像の縮尺の比率をうまく保ったままリサイズしてくれるので便利だと思います。

Step3. THEMESタブを設定する

テーマに関してはClickFunnelsが用意してくれているデザインをプリセットのような感じで使うことができます。枠付きのものやシャドウが付いただけのものなどがあります。

Step4. ADVANCEDタブを設定する

最初にSTYLEタブです。

  • ALIGN:画像を右、左、中央と変えることができます。
  • RADIUS:画像の枠に関する設定ができます。「Circle」にすると丸くなり、「Round Corners」にすると四角のままで角だけ丸くなります。
  • SHADOW:画像の枠にドロップシャドウを付けることができます。
  • OPACITY:画像の透明度を設定できます。サムネイルを透明にするのもいいと思います。下に行くほど透明度が上がって薄くなっていきます。
  • GREY SCALE FX:画像をフルカラーで表示するのかモノクロで表示するのかを設定できます。いちいちモノクロの画像を用意しなくてもいいので重宝すると思います。

ANIMATIONタブではディレイを設定することができます。大きく上と下に分かれていて、上のほうは1秒以上の比較的大きなディレイを表示させることができ、下のほうはミリセカンド単位の細かいディレイを表示させることができます。

上のほうは「TIMED DELAY」で効果を選択できます。「Fade In」でいいと思います。例えば60分のウェビナーで30分15秒たってからピッチのところで画像を出したいという場合に使います。

逆にJavaScriptでいうLazy Loadingのような感じでミリセカンド単位で表示したいという場合は「ANIMATION」の「TYPE」で設定します。「On Page Load」と「On Page Scroll (becomes visible)」の2種類があり、「On Page Load」のほうは、ページの読み込みから起算して指定した効果で指定した時間後に表示させるという機能です。「On Page Scroll (becomes visible)」のほうは、例えば長いセールスページなどでこの画像がある所までスクロールしてきたときから起算して、指定した時間のディレイで表示させるという機能です。

画像をたくさん配置して、クリックして詳細やグラフを見てほしいという場合にけっこう使えると思うのでやってみてください。今回は以上です。

やり方を動画で見る

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

カテゴリClickFunnels

About 石崎 力也

石川県金沢市出身。モントリオール在住。専門スキル:競艇、コピーライティング、DRM、アニメーション。このサイトの運営責任者です。2013年3月に六本木と西麻布で会社を設立し、同年11月までに全てのメディア・広告事業を軌道に乗せる。現在は、家族と一緒に、3か月に1度、住む国を変えながら生活をしています。

「デジタルマーケティング完全ガイド」を無料プレゼント0円でダウンロード

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

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki