THE THORのCTAの設置方法!管理画面や設定も!

  • 2020年8月3日
  • 2020年8月14日
  • THE THOR
  • 5view

こんにちは!ブログを書いて1年で月収60万円突破したみのりんです。

稼ぐ系のブログを運営している場合、一番キモとなるのは記事を読み終えた後の出口です。ラストに行動喚起をしてもらう場所を設けて商品の購入なり、メルマガへの誘導だったりしてもらいます。

ラストで決める場所がCTA(Call To Action)というもので、THE THORにも備わっています。そこで、CTAの使い方や設置方法をお伝えしていきます。

THE THORのCTAはどんなもの?

CTAとは、基本的に記事の文末のスペースに配置されたボタンをイメージしますが、大きくわけるとトップページの中にあるボタンなどもCTAのひとつと言えます。

THE THORでもトップページの画像内にあるボタン以外のCTAとして文末もしくは文中に差し込むCTAを取り上げます。このブログのCTAは以下のようになっています。

背景画像と画像の窓、ボタンとテキストを指定することでこの部分が出来上がりますが、THE THORの場合CTA管理画面でいくつか候補を作って他の部分に設置もできます。

THE THORのCTA新規追加

まずは、CTAを新しく作る方法をお伝えします。いくつか作っておいて管理もできますので、最初に作っておけば後で変更も可能です。「CTA作成」しておき「配置」の設定をします。

CTA管理 ⇒ 新規追加
  
ここで、CTAを作っていきます。作ったCTAは一覧管理としてでてきますので、あらかじめいくつか作っておいても良いと思います。
作り方はそれぞれですが、上の図の場合は、カラム分け(70:30)で下にボタンを配置してあります。

作成手順

  1. ビジュアルエディター「カラム」をクリック
  2. 2カラム7:3を選択
  3. 左にテキストと右に画像挿入
  4. スタイルからボタンを選択

1. ビジュアルエディター「カラム」をクリック

THE THORを導入するとエディターの中にカラムという文字が出てきますので▼をクリックして展開してください。

2. 2カラム7:3を選択

上記が展開できたら、その中の2カラム7:3を選びます。ここでは、どのカラムでもOKですし、テキストと画像を縦に並べても問題なければそのままでも構いません。

全体像を見ながらちょうどよいレイアウトを選んでください。

3. 左にテキストと右に画像挿入

カラムのレイアウトが配置されたら、テキストや画像を入力していきます。

4. スタイルからボタンを選択

最後に、CTAには出口が必要ですのでボタンを配置します。

スタイル ⇒ ボタン ⇒ ピンクグラデアイコンボタン
こちらもボタンは自分の好きなものを選んでください。今回は、「ピンクグラデアイコンボタン」を選んでいます。

THE THORのCTA管理と色調整

CTAを新規で作るとCTA管理一覧に追加されます。投稿ぺージや固定ページにおいて、ここで設置したCTAを選ぶ画面がでてきます。

投稿画面の右側に「記事下CTA設定」という部分がありますので、ここでどのCTAを表示させたいか指示します。

すると投稿画面に以下のようなCTAが表示されることになります。このやり方ならば、たとえばアフィリエイトでページごとに違う商品を扱う場合などにはとても便利ですよね。

さらに、この枠の色などの設定を説明します。

THE THORのCTAの全体の設定方法

CTA管理で作成するCTAの色などの設置方法です。上記のCTAの枠にはボタンと同じ系統の色を設置しています。これは、カスタマイザー部分で変更が必要なのでCTAを作成した後にやっておきましょう。

投稿ページのCTA色設定

外観 ⇒ カスタマイズ ⇒ 投稿ページ[THE] ⇒ 記事下CTA設定
デザイン設定でフレームデザインを選択しカラーで色を設定します。

選択可能なデザイン

  • フレーム無し[カラー:無]
  • シャドウフレーム[カラー:無]
  • ボーダーフレーム[カラー:線]
  • ベタ塗背景(文字白)[カラー:背景]

ここで設定をするCTAは、トップページで見るような画像等を入れればできるものではなく自分で自由に作成するものです。次の章では、トップページなどで見かける定型のものを説明します。

固定ページのCTA色設定

固定ページも投稿ページのCTAと同じようにレイアウトや色の変更が可能です。設定できる内容も同じです。

外観 ⇒ カスタマイズ ⇒ 固定ページ[THE] ⇒ 記事下CTA設定

選択可能なデザイン

  • フレーム無し[カラー:無]
  • シャドウフレーム[カラー:無]
  • ボーダーフレーム[カラー:線]
  • ベタ塗背景(文字白)[カラー:背景]

 

THE THOR、共通エリアのCTA

共通エリアのCTAはフッターのトップエリアの表示となります。

外観 ⇒ カスタマイズ ⇒ 共通エリア[THE] ⇒ フッタートップエリア[CTA]
この部分で「背景」「テキスト」「画像」「ボタン」などを設定していきます。
 ここで、あなたの設置したい画像や効果的なテキストを入力します。すべて入力が終われば「公開」をクリックします。
すると以下のようなCTAが出来上がります。

THE THORのCTAのIDコード

THE THORでCTAを作るとIDコードがカウントされます。基本的に、上記で説明した内容でほぼ設置ができると思いますが、IDコードも便利な使い方がありますのでここでお伝えします。

IDコードはどこに出てくるの?

CTAの管理画面の一覧管理にIDコードがでてきます。

このIDコードを使って、指定するCTAをデフォルトにしたりできます。

投稿ページのCTA設定

まずは、投稿ページの記事下にCTAを入れていく場合、記事を書く都度設定するのは面倒です。もし、どのCTAにするのか決まっていたらIDで指定をしてデフォルトにしていおけばいちいち設定する必要はありません。

使い方として・・・

  • 記事の後になにか入会をしてもらいたい場合
  • 特定のメルマガに誘導したい場合
  • クリックしてほしい場合など
外観 ⇒ カスタマイズ ⇒ 投稿ページ[THE] ⇒ 記事下CTA設定

「デフォルトCTAコンテンツ設定」にIDコードを入力して「公開」をクリックします。

ここにIDコードを設置すると、投稿ページの記事下CTA設定でデフォルトのCTAに設定されます。

固定ページのCTA設定

投稿ページと同じことが固定ページでできるようになっています。

外観 ⇒ カスタマイズ ⇒ 固定ページ[THE] ⇒ 記事下CTA設定
同じように設定をしてベタ塗りにした場合には以下のような感じになります。

THE THORのCTAのまとめ

THE THORのCTAには2種類あります。トップページなど共通フッターに位置するものとレイアウトなど自分自身で作るもの。

トップページのフッター部分に設置するCTA

背景画像、テキスト、ボタン、画像を設置するCTA

共通ページ全体で設定をするので、何もしなくてもブログのフッターに設置される。

投稿ページと固定ページに個別に設置するCTA

自分の作ったレイアウトと色合いのものをそれぞれの記事下に設定するCTA

投稿ページや固定ページでそれぞれどのCTAを設置するのかなど細かく決めることができます。

 

共通ページのCTAは、記事から少し遠い場所にあるのでユーザーが見てくれるか心配な時などに投稿ページや固定ページ個別に設定をしても良いですし、ケースバイケースで設置していってください。

 

今使っているテーマで満足していますか?

カスタマイズに苦労している・・・

イメージ通りのデザインにならない・・・

思ったほど稼げてない・・・

こんな悩みを抱えておられる方も多いと思います。

ブログで稼ごうと思えば、記事の質と見た目の良さなども大事な要素です。ユーザーの目を引くデザインの工夫や次の記事へのスムーズな誘導などうまく目立たせてくれるテーマでは滞在率も高くなり、Googleの評価も上がってきます。

「初期投資」は稼ぐブログをつくるための第一歩。

WordPressの有料テーマの5つの利点

  1. 検索上位を目指せる
  2. 見た目の高級感と居心地の良さ
  3. 多くの機能
  4. マニュアル&会員フォーラムなどのサポートが受けれる
  5. 多くのブロガーが使っている

有料Wordpressテーマ「THE THOR」はあなたを稼げるブロガーに導きます!

 

THE THOR はコチラから

最新情報をチェックしよう!
>最強のWordPressテーマ「THE THOR」

最強のWordPressテーマ「THE THOR」

ブログを作る上でカッコいいデザインとSEO対策は必須です。THE THORは誰でも好感がもてるデザインと、最新のSEO対策で大人気のテーマです。

CTR IMG