【THE THORの使い方】記事下CTAの設定方法を詳しく解説！

ここあです。

私が使っているWordPressテーマ「THE THOR（ザ・トール）」には

記事を最後まで読んでくれたネットユーザーに対し、

行動を促すことができる「記事下CTA」の設定ができます。

CTAというのは「Call to Action（コール・トゥ・アクション）」の略で

直訳の意味は「行動喚起」。

そもそも、なぜこのCTA機能があるかと言うと、

読者に行動喚起をすることで、しっかりと行動を起こしてもらい、

商品やサービスを購入してもらうことが

できるようになるからです。

というのも、これまでの時代であれば、

Webサイトというのは「ただあれば良い」というレベルで

運営されてきたわけですが

ここ近年で個人が企業に頼ることなくビジネスをして

大金を稼げるようになったのは、Webサイトの使い方自体が

大きく変わってきているからです。

なので、 Webサイトというのは、ここ十数年で

「ただあれば良い」という時代から「ビジネスに活用する」時代へと

使い方そのものが、かなり大きく変わっています。

そして、そんなビジネスに活用できる有効な機能が

読者に直接行動を促せる「CTA」。

かなり回りくどい説明を致しましたが、

要は商品やサービスを販売し、売上げを伸ばすのに効果的な機能が

「CTA（Call to Action）」ということです。

ということで今回は、

THE THORの「記事下CTA」の設定方法について

詳しく解説させていただきます。

なので、これから先、商品やサービスの売り上げを

しっかりと伸ばしたいというあなたは

ぜひ「記事下CTA」の使い方をマスターしてくださいね。

THE THORの記事下CTAを表示させる方法

まずは「THE THOR（ザ・トール）」で

記事下CTAを表示させる方法について解説させていただきます。

THE THORで記事下CTAを表示させる場合は、

ダッシュボードメニューから外観 → カスタマイズをクリックし

続いて、投稿ページ設定［THE］をクリック。

そうすると、画面中ほどに

「記事下CTA設定」という項目があります。

記事下CTA設定をクリックすると

記事下CTAを表示させるための項目がありますので

記事下CTAを「表示する」を選択し、設定を保存してください。

そうすると、記事の最後にあなたが設定した

記事下CTAが表示されるようになります。

※CTA管理で記事下CTAを設定しないと何も表示されませんのでご注意ください。

なお、記事下CTAに関しては投稿ページと固定ページの設定箇所が

それぞれ分かれておりますので

もしも固定ページで記事下CTAを表示させる場合は

ダッシュボードメニューから外観 → カスタマイズをクリックし

固定ページ設定［THE］から、

改めて記事下CTAを設定するようにしてくださいね。

THE THORの記事下CTAはCTA管理機能で

ちょっと分かりにくい見出しになってしまいましたが＾＾；

THE THORの「記事下CTA」はダッシュボードメニューにある

「CTA管理」で行います。

そもそも記事下CTAは「CTA管理」で設定を行わなければ

何も表示されない機能になります＾＾；

ということで、まずはダッシュボードメニューから

「CTA管理」をクリックしましょう。

そうすると、このような「CTA管理画面」が開きますので

「新規追加」をクリックします。

「新規追加」をクリックすると、以下

記事下CTAを作るための画面が表示されますので

ここの編集画面で、あなたが考えている

「記事下CTA」を上手くレイアウトしてみてください。

なお、ここの編集画面で入力するタイトルは

あくまでもあなたが記事下CTAを

管理するために付けるタイトルとなりますので

「あなたが管理しやすいタイトル」を付けるようにしてくださいね。

ちなみに記事下CTAを美しく作るコツとしては

ビジュアル編集モードの「カラム」を使い、

2カラムにするとレイアウトはしやすくなります。

例えば、2カラム1：１（PC）を選択すると

入力画面が左右に分かれて表示されますので

左の枠内にアフィリエイト広告（以下のサンプル画像は自作）、

右側に説明文テキストや、リンクボタンを設置します。

ある程度、バランス良くレイアウトできたら、画面右側にある

「公開」ボタンをクリックして記事下CTAを公開しましょう。

なお、CTA管理の編集画面には、

記事下CTAがどのように表示されるか確認するための

プレビュー画面を表示させることはできません。

なので、少し手間にはなりますが、記事下CTAがレイアウトできたら

一旦、記事下CTAを公開して、記事下にどのように表示されるか

確認しながら改めて微調整をしてくださいね。

ということで、2カラムで設定すると

このようにかなり良い感じにレイアウトできます。

と、ここまでは記事下CTAの作り方を簡単に解説致しましたが

続いて、記事下CTAの設定方法の説明をさせていただきます。

THE THORの記事下CTAの設定方法

私は「THE THOR（ザ・トール）」に実装されている

このCTA管理機能は本当に秀逸だと思います。

なぜなら、

• CTAの管理機能があるので、CTAの修正が一度で済む。
• 記事ごとにそれぞれ記事下CTAの設定ができる
• 不要な記事には記事下CTAを非表示にできる
• 記事下CTAをわざわざ設定しなくても、メインのCTAはデフォルトの設定にできる

このように非常に使いやすい機能となっているからです。

つまり、先ほどあなたにご説明した通り

記事下CTAはいくらでも増やせて、しかも必要な記事に合わせて

それぞれ異なるCTAを設定することが可能です。

さらに、記事下CTAが不要な記事には無理に設定しなくても

記事下CTAを非表示にすることができます。

ということで、

CTA管理にいくつか記事下用のCTAが設定できたら

あなたがレイアウトしたい記事下CTAを表示させてみましょう。

記事下CTAの表示を「表示する」に変更すると

投稿記事編集画面のサイドバーに「記事下CTA設定」という項目が新たに表示されます。

↓この位置にあります。

さらに、先ほど説明したCTA管理の画面でいくつか複数のCTAを設定すると

このように記事に合わせて記事下CTAが選択できるようになります。

また、記事下CTAを表示させたくない場合は

「記事下CTA設定」のすぐ下にある「個別非表示設定」の項目内に

「記事下CTAを非表示にする」という項目がありますので

この項目にチェックを入れることで非表示にできます。

さらに、CTA管理に設定した記事下CTAには

それぞれ個別のIDが割り振られておりますので

この記事下CTAのIDを、投稿ページ設定［THE］内にある

記事下CTAの設定項目「デフォルトCTAコンテンツ設定」のIDとして登録すれば、

わざわざ個別に記事下CTAを設定せずとも

デフォルトの記事下CTAとして表示させることもできるようになります。

記事下CTAのデザインは全部で4種

THE THORの記事下CTAは少し簡易的なデザインになりますが

デザインの設定も可能です。

記事下CTAのデザイン設定は、ダッシュボードメニューから

外観 → カスタマイズをクリックし

投稿ページ設定［THE］内の「記事下CTA設定の中」にあります。

デザインは以下の4種類から選択できます。

• フレーム無し
• シャドウフレーム
• ボーダーフレーム
• べた塗背景（白文字）

とは言え、デフォルトの「フレーム無し」は

それがCTAだと分かりにくいので、使わない方が無難です。

ということで、記事下CTAのデザインを設定する場合は

以下の3つから選択するのをおすすめします。

• シャドウフレーム［カラー：無］
• ボーダーフレーム［カラー：線］
• べた塗背景（文字白）［カラー：背景］

シャドウフレーム［カラー：無］

「シャドウフレーム」はさりげない影が薄っらと付く

非常にシンプルなデザイン設定となっています。

ボーダーフレーム［カラー：線］

ボーダーフレームは以下のように、

あなたが設定した色の「囲み罫」が付く設定になります。

罫線が細めで上品なので、非常に使いやすいデザインです。

ちなみに、外観→カスタマイズ→追加CSSの部分に
以下のCSSコードをコピーして入力すると

記事下CTAを囲っている罫線が波線になります。

なので、他のサイトと差別化したいというあなたは

お好みでどうぞ！＾＾

べた塗背景（文字白）［カラー：背景］

この設定をすると通常は、べた塗背景で白文字になります。

※上記画像はTHE THOR公式サイトの記事下CTA

ただし、私の場合は

いろんな部分をCSSでカスタマイズしてることもあり

べた塗背景の設定をしても、テキストカラーが白にならず

こんな記事下CTAが表示されます（笑）

特に何かしているというわけではないんですが

どこかでカスタマイズしているCSSコードが

干渉していると思っています＾＾；

まぁ、CSSでカスタマイズしていれば

そんなこともありますので、気をつけてください。

ということで、べた塗り背景のパターンは

THE THOR公式サイトの記事下CTAを参考にしてくださいね。

ちなみに、ボーダーフレームの線の色や、べた塗背景の色に関しては、

デザイン設定の「カラー」がそれに該当します。

なので、少々分かりにくかったかも知れませんが

記事下CTAのデザインを設定する場合

• 影をつけるか
• 囲み罫をつけるか
• 背景色を濃い色にするか

それぞれあなたのお好みに合わせて設定してみてくださいね。

THE THORの使い方：記事下CTAの設定方法まとめ

今回はTHE THORに実装されている

「記事下CTAの設定方法」について解説させていただきました。

私はこのサイトを昨年STORKからTHE THORに切り替えたのですが

「そういや、まだ使ってない機能があったな」と

こうして、記事下CTAを使ってみようと思ったわけです。

私は当サイトからの購入特典として

THE THORのマニュアルを作っているので

もちろん、記事下CTAの存在は知っていました。

とは言え、私がCTA機能を試験的に使うだけではなく

これから記事下CTAを設定しようと考えているあなたに

少しでもお役に立てればと、記事下CTAの使い方をまとめました。

いずれにしてもTHE THORは非常に多機能なテーマなので

とにかく実装されている便利な機能をまずは自分で使ってみないことには

どんな効果があるのかすら分かりません。

だから、今回、私は試験的に記事下CTAも使ってみようと

簡易的ではありますが、設定することにしてみました。

そもそもビジネスというのは自分で仮説を立てて

その検証結果で次の改善を行っていく

「トライ＆エラー」の繰り返しです。

なので、どんなテーマを使うにしろ

どんなノウハウのビジネスをするにしろ

初めから上手くいく人なんて絶対におりませんし

何も考えずにサイトを運営していくだけで

ビジネスが成功するなんてことも基本的にはありません。

そもそもビジネスは運だけで成功できる

というものではありませんからね。

つまり、企業にしろ、個人にしろ

ビジネスが上手くいっている人というのは

それなりに上手くいく理由がきちんとあります。

だから成功しているのです。

私にはあなたが今、どんな状況かは分かりませんが

とにかくあなたがTHE THORという

素晴らしいテーマを手に入れているのであれば

THE THORの機能を最大限に生かし

「この機能を使うとどんな効果が得られるのか？」など

常に色々考えながら、サイト運営をしていただけたらと思います。

正直、私もまだまだテーマの可能性に関しては

かなり手探りな部分が多いですし、

だからこそ、自分で色々使ってみたいと

日々こうして様々な検証を積み重ねています。

ということで、記事下CTAは

• どんなことを掲載するか
• どんなデザインにして見せるか

CTAの内容やデザインによって

ネットユーザーの反応もかなり大きく変わりますので

とりあえず記事下CTAも色々と準備し

あれやこれやと入れ替えながら、読者の反応が得られるCTAというのを

自分なりに私も確立していきたいと思います。

先にもお伝えさせていただきましたが

CTAというのは、読者に行動喚起を促すための機能です。

だからこそ、ぜひあなたも

あなたのサイトを訪れるネットユーザーに響きそうな

素敵なCTAを用意し

ネットユーザーを明るい未来に導ける

そんなCTAを1つでも多く作ってみてくださいね。

ということで最後までお読みいただき

ありがとうございました！