• 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-4 ClickFunnelsで画像を挿入して、カスタマイズする

5-4 ClickFunnelsで画像を挿入して、カスタマイズする

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

今回はClickFunnelsで画像を埋め込んで、カスタマイズしていきます。

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

  • Step1. 画像を挿入する
  • Step2. 画像をカスタマイズする
  • Step3. THEMESタブを設定する
  • Step4. ADVANCEDタブを設定する
  • やり方を動画で見る

Step1. 画像を挿入する

おなじみの「ADD NEW ELEMENT」をクリックします。今回使うのは「IMAGE」というエレメントです。いろいろ設定項目があるので見ていきましょう。

Step2. 画像をカスタマイズする

  • TOP MARGIN:エレメントの上部の余白を調整することができます。
  • IMAGE:画像のURLを直接入力していただいてもけっこうですし、「Uploaded Images」にあなただけの画像をアップロードして追加することもできます。「Pixabay」「IconFinder」「Unsplash」等からもいろいろ検索して出すことができます。例えば「Unsplash」で「ocean」と検索すると海の画像が出てきます。こういうものも著作権の緩いコンテンツをClickFunnelsが選んでくれているので、ここから使ってみてください。
  • BACKGROUND:ClickFunnelsであらかじめ用意された素材が入っています。他にもちょっとした画像であれば「STOCK」にいろいろな種類が用意されています。
  • MAP:地図を埋め込むこともできます。

今回は「ADD IMAGE」で画像を埋め込みました。

  • ALT TEXT:HTMLメールでもSEOに効果があるといわれていて、alt属性や代替テキストと呼ばれるものですが、それをここに設定することができます。
  • IMAGE WIDTH:画像の横幅を指定できます。
  • IMAGE HEIGHT:画像の高さを指定できます。
  • LINK URL:画像をクリックしたときのリンク先を選択でき、「LINK URL TARGET」は新しいタブで開くのか同じタブで開くのかを選択できます。「Normal」を選ぶと同じウィンドウで開くようにできます。

Step3. THEMESタブを設定する

次はTHEMESタブです。テーマに関してはいろいろなプリセットをClickFunnelsが用意してくれているので、けっこう良いものがあったりします。デザイン的なことがあまり得意ではないという方は、こういうものを使っていただくとすごくきれいにいろいろなデザインが出てくると思います。例えば枠と影が付いているようなものは使い勝手が良いと思います。

Step4. ADVANCEDタブを設定する

次はADVANCEDタブです。

STYLESタブの「ALIGN」に関してはちょっと分かりにくいのですが、例えば画像を横長の場所に配置したようなときに左側と右側のどちらに表示するかを設定できます。今回は「IMAGE WIDTH」を少し狭くしてみました。そうするとアラインメントがわかりやすくなったかと思います。「IMAGE WIDTH」を消すと元のサイズに戻すことができます。

  • RADIUS:「Circle」で画像を円形にしたり、「Round Corners」で画像の角を丸くしたりすることができます。画像の半径までは指定できないのですが、すごく良いと思います。
  • BORDER:白い枠線や黒い枠線を付けることができます。
  • SHADOW:すでに「THEMES」で変更していて少しわかりにくくなってしまうので、デフォルトに戻しておきます。「Light Shadow」「Full Shadow」「Dark Shadow」があり、下に行くほどだんだんと影が濃くなっていきます。
  • OPACITY:「Light Fade」「Strong Fade」「Stronger Fade」があり、透明度が3段階で選択できます。「Full Visible」にすると透明度が0になります。
  • GREY SCALE FX:フルカラーにするのかモノクロにするのかを選択でき、「Black & White」を選ぶと画像を変えずにモノクロの効果が得られます。

すごく使えるのがこの「OPACITY」と「GREY SCALE FX」で、例えばこれを組み合わせてプロダクトローンチのページなどで画像のサムネイルを4つ並べたときに、今見ている動画以外の部分のサムネイルを薄くして白黒にすると、クリックできないような雰囲気を出すことができます。

ANIMATIONタブは他の要素と共通しています。「TIMED DELAY」はページの読み込みからどれくらいの時間差で「Fade In」や「Fade In With Scale」を表示するかというもので、「何分何秒」という指定ができます。

「ANIMATION」では「TYPE」を選択できます。これはミリセカンドなので、「On Page Load」の場合はページが読み込まれてから何秒後にフェードインや他の効果を出すかが指定でき、「On Page Scroll (becomes visible)」ではページがスクロールされて要素が見える状態になってから何秒後にフェードインするかを指定できます。今回は以上です。

やり方を動画で見る

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

カテゴリClickFunnels

About 石崎 力也

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

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

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

Copyright © 2025 · Rikiya "Sales Funnel" Ishizaki