DiverのCTA(Call to Action)の設定とキレイに表示させるための工夫

Diver(ダイバー)」には多彩な機能が備わっていますが、その内の1つに「CTA」を設定することができます。

DiverでCTAを設定し、機能的できれいに表示させるための工夫も自分なりに考えて設置してみました。

CTAは、記事を作る上で必須ではないため、時間を割くのが嫌でカスタマイズを後回しにしていましたが、設置してみるとシッカリ整ったCTAが表示されて良い感じです。

クルミ
CTAは時間をかける価値のあるコンテンツでした。

CTAとは

CTA(Call To Action)の略でWeb上でユーザーにアクションを起こさせるための情報コンテンツとなります。

一番クリックされやすい記事直下に配置され、画像やテキスト、リンク等で、ユーザーを誘導するページを表示します。

「問い合わせ」や「購入ページ」など、情報をまとめてユーザーにも分かりやすくアピールできます。

Diver(ダイバー)のCTA表示方法

デフォルトではCTAは非表示

DIVERでCTAを表示させるには、記事作成ページの下部に「CTA」を表示するプルダウンメニューからできます。

後は、表示させたいCTAページを選ぶだけで設置完了です。

デフォルトではCTAは非表示設定になっています。

DIVERでは各ページごとにCTAを設置できるので、一度CTAページを作っておくと伝えたいコンテンツをわざわざ作る必要がなく、時短と手間を省くことができます。

DIVER(ダイバー)のCTAは見栄えが良さげ

テーマDIVERのCTAページ
DIVERのCTAページ

DIVERのCTA表示はこんな感じに仕上がっています。

さすが本家!キレイ。

これを見習ってこのブログにもCTAページを作ってみました。

CTAページの作り方

Diverオプション CTA新規追加を選択でCTAページにたどり着くことができます。

基本的には投稿ページと同じ要領で作ります。

CTAページで設定できる項目

DIVERのCTAページの入力画面
設定する項目
  • タイトル
  • テキスト
  • ボタン

ボタン設定では、リンク先を空白で保存しているとボタンが非表示になります。

DIVERは色んなボタンのデザインがありますが、ここではボタンのデザインは選べません。

DIVERのCTA設定の画像とカラー変更
設定する項目
  • アイキャッチ画像と位置
  • CTAカラー

アイキャッチ画像の位置は右、左、上に設置することができます。

タイトル、テキスト、背景など、基本的に色は自在に設定可能です。

CTAページを作る時に悩んだ事

  • 段落スペースが不要
  • ボタンのカスタマイズ
  • アイキャッチ画像の大きさ

CTAページは通常の記事作成とは少しだけ外観やカスタマイズに悩むところがあります。

CTAは段落(段落スペース)が不要

CTAページで悩んだのが「段落」です。

通常、記事は余白があった方が読みやすいので、WordPressではエンターを押すと自動で段落ができ、段落スペースが自動で挿入されるようになっています。

しかし、CTAページでは段落の段落スペースがあると間隔が空きすぎてスッカスカなコンテンツになってしまい、かと言って詰まった文章は読みにくいです。

流石に、文の改行があった方が文章が読みやすいので段落を無効にする必要があります。

CTAページの段落を無効にする方法

  • CSSを追加する
  • クラシックエディター(グーデンベルク)で「詩」を入れる
  • HTMLでコードを入れる

ワードプレスはデフォルトで改行すると自動的に改行され、スペース(段落スペース)ができるようになっています。

なので、対策としては上記の3つの方法がありますが、簡単なのはクラシックエディターの「詩」のブロックを挿入すれば簡単にできます。

ブロックエディターの詩のブロックをCTAに挿入

「詩」のブロックは、余白や改行などワードプレス仕様に左右されずにテキストが入力できます。

そのままでも良いのですが、「詩」の字体はDIVERとは違うので合わせるならクラシックエディタのブロックにへコピペすれば字体を合わせられます。

ボタンDIVER仕様の方が良い

きっかけスイッチのDIVERのCTAバージョン

CTAページでボタンはデフォルトで1つ設置できるようになっています。

デフォルトの仕様では、色は選べるものの、デザインは選べません。

DIVERには色んなボタンのデザインがあるので、是非使いたい。

デフォルトのボタン以外にも「ボタンを挿入」でDIVERデザインのボタンへ変更可能です。

画像は私が作ったDIVERのCTAページですが、2つボタンを表示させたかったので、ボタンをカラムで2つ並べて設置してみました。

2カラムにするとパソコンでは横並び、モバイルでは縦並びになります。

CTAの適切な画像のサイズ

DIVERでエックスサーバーのCTAを設定
DIVERのCTA設定でエックスサーバーのCTAページを作ってみた

CTAページではアイキャッチ画像がテキストと一緒のエリアに表示されます。

アイキャッチ画像のサイズは600px以上だと画像がぼやけにくかったです。

アイキャッチ画像は、CTAの画像表示エリアに拡大・縮小されて表示されるので、画像のサイズには注意が必要です。

上記の画像は欲を出してPhotoshop(フォトショップ)で加工後、透過PNGの画像を作って背景に馴染ませました。

クルミ
普通、必要ないか・・・。

CTAページは必要ないと思っていたけどあると有効活用しやすい

今回初めて「Diver(ダイバー)」でCTAページを作ってみました。

CTAって何?

必要ないんじゃない?

なくても問題ないよね?

などと思っていたのですが、DIVERのCTAは中々整った見栄えの良いコンテンツを表示してくれます。

作ってみるとなかなか良い感じです。

CTAページは一度作ってしまえば後はページを表示させるだけなので、新たにコンテンツ作る必要もなく時短になります。

最初はページを作るのが面倒なのですが、DIVERはデフォルトでいくつもCTAページを記事ごとに設定できるので有効活用してみてください。

クルミ
作るのを後回しにしてはダメな、ヤツでした。

ハイスペックテーマ「Diver(ダイバー)」は安く買える!?

サーバー契約をするとワードプレスの有料テーマ「Diver」がお得に買えます。

ロリポップ×Diver




お名前.com×Diver

さらに独自ドメインと同時申込みで、ドメインの初年度登録料が実質0円でお得。




エックスサーバー×お友達紹介



友達紹介プログラムでエックスサーバーを契約すると12か月契約で5,000OFF

契約期間に応じて最大1万円OFF

下記のボタンからエックスサーバーを契約するとお友達紹介プログラムが適用され、契約料金が割引きされます。

エックスサーバーのキャンペーン(不定期)と併用するとさらにお得です。

テーマを安く購入するよりもサーバー契約でお得にDIVERを始められます。

スポンサーリンク
このblogはワードプレスのテーマ「DIVER(ダイバー)」を使っています。
DIVERのテーマイメージ

WordPress(ワードプレス)のテーマで最初に手にしたのは「DIVER(ダイバー)」でした。

DIVER(ダイバー)を一言でいうと、カッコいい!!最初は見た目で選びましたが、洗練されたデザインに、多彩でハイスペックな機能は何年使っても飽きません。 コンテンツが増えるほどカスタマイズ性がアップし、サイトの構築が楽しくなる、そんなテーマです。常にバージョンアップを欠かさない向上心のあるテーマと共にサイトを長く大切に育てられます。 長年愛用できるハイスペックで高機能なテーマ「DIVER(ダイバー)」は、一度使うともう手放せません。

代表コンテンツ
おすすめの記事
スポンサーリンク