TwitterでSONICの最新情報をGET

ファーストビューで商品を訴求する「フロントページCTA」

2 min 1,098 views
フロントページCTAの機能

アフィリエイトサイトでは、トップページのファーストビューが重要です。

サイトのトップに訴求メッセージと商品リンクを表示する機能が、「フロントページCTA」機能です。

スマホと表示する画像を変更したり、背景画像だけの登録もできます。

フロントページCTAのポイント
  • テキストを入れるだけデザインスキル不要
  • キャッチフレーズ・本文・イメージ画像を設定可能
  • ボタンリンクもかんたん設置
  • HTMLやショートコードも利用可能
  • スマホとPCで別の画像も挿入可能
  • 再利用ブロックやABテストと組み合わせOK上級者向け

フロントページCTAの機能

フロントページCTAは、フロントページ(サイトのトップページ)に任意のCTAボックスを表示する機能です。

説明文エリアにはショートコードが使えるので、THE SONICの機能を合わせて使ってください。

THE SONICフロントページCTA

フロントページCTAの使い方

カスタマイザーSONICオリジナル機能フロントページCTA設定

フロントページCTAは、見出しと説明文・ボタンテキストとURLの4つを入力するだけで利用できます。

THE SONICフロントページCTA

その他にも、背景用の画像・ボックスイメージ(CTAボックスの横に表示される画像)を挿入することも可能です。お好みで設定してください。

THE SONICフロントページCTA

応用の使い方

フロントページCTAを更に使いこなす機能が、「HTMLカスタムボックス」です。

THE SONICフロントページCTA

CTAボックス内のデザインを自由に変更できます。

自由にカスタマイズしたいユーザーのためにこだわりました!

くま

くま

HTML用カスタムボックスを応用すれば、再利用ブロックのテキストをショートコードで挿入したり、ABテストのコンテンツを表示してクリック率を集計できます。

POINT
  • 再利用ブロックに登録したコンテンツが使える
  • ABテストでクリック率の集計ができる

画像だけ表示させたい

フロントページCTA

再利用ブロック管理から、「フロントページCTAエリアに挿入したいデザイン」を作成してください。

エディタの「カバーブロック」「メディアと文章ブロック」は、手軽に美しいデザインが作れておすすめです。

くま

くま

カバーブロックを使った場合
フロントページCTA

背景の透過率を変更したり、テキスト無しで画像だけ表示することができます。画像メインで使いたい場合におすすめです。

下の動画でも解説させていただいてます。

「メディアと文章」ブロックを使った場合
フロントページCTA

画像とテキスト、中央で分割された2カラムデザインを作りたい場合におすすめです。

コンテンツの横幅と画像の横幅を揃えたい場合は(下図)

メディアと文章の「高度な設定」にhbと追記してください。

再利用ブロックを作成すると、専用のショートコードが作られます。

再利用ブロックのショートコード

このショートコードを、フロントページCTAのHTML用カスタムボックスに挿入してください。

フロントページCTAの応用

スマホの画像を変更したい場合

スマホでは画像が縦に長過ぎると感じた場合や、スマホに別の画像を表示したいと感じた場合には以下のように設定してください。

  1. 再利用ブロック管理画面から新しく再利用ブロックを作成します。
  2. PC用の画像を表示する「カバー」ブロックを追加します
  3. カバーブロックの非表示設定を「PC・タブレットで表示」にします
  4. モバイル用の画像を表示する「画像」ブロックを追加します
  5. 画像ブロックの非表示設定を「モバイルで表示」にします
  6. 作成した再利用ブロックのショートコードを、フロントCTAの「HTML用カスタムボックス」に挿入します
スマホとPCの表示
PC用にはカバーブロックを使います
スマホとPCの表示
モバイル用には画像ブロックを使います

このショートコードを、フロントページCTAのHTML用カスタムボックスに挿入してください。

WordPressテーマおすすめ機能HTML用カスタムボックス

ABテストをしたい場合

クリック率を集計したい場合は再利用ブロックを2つ作成し、ABテストに登録してください。

計測用のショートコードが作成されます。

ABテストで作成したショートコードを、HTML用カスタムボックスに挿入します。

フロントページCTAの応用

エディタで作成した自由なデザインをフロントページに表示させましょう。

くま

くま

THE SONIC

THE SONIC

収益とライティングを"1UP"させるWordPressテーマ「THE SONIC(ソニック)」を開発しています。
アフィリエイター・ブロガー・WordPress開発者の合作テーマです。3つの視点からWordPressテーマをリデザインしました。

FOLLOW

カテゴリー:
CTAエリア
関連記事