CTA-SIRIUS2

アイキャッチ画像

【Volar2】の動作検証でキャプチャした画像は、基本的には【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトデザインが元になってます。

そのため他のテンプレート利用時には当サイトでご紹介しているキャプチャ画像とは若干異なる場合もあります。

また他のテンプレート利用時には場合によっては動作に多少の違いが生じる可能性もありますこと予めご了承ください。

パーツ＜CTA＞は積極的にアピールしたい商品やサービスを画像とテキストで表示できる機能です。

デザイン済みなので、あとはイメージ用の（背景）画像を選択し、タイトルとリンク先URLを入力するだけの簡単設定。

特にアクセスしてほしいページがある場合は積極的に活用するといいんじゃないでしょうか。

『CTA』とは？

CTA（Call To Actionの略）とは本来は”訪問者に注意喚起させて行動を誘導する”ことを意味します。

これが転じてウェブ上では（一般的には）商品やサービスの購入を促す画面を指します。

「いますぐ購入する」とか「メルマガ登録はコチラ」といったようなドでかくて目立ったボタンリンクをあなたも何度か見たことがあるんじゃないでしょうか。

ああいうのを見るとついついポチットやってしまいそうになるんですよね。

もちろんそれを狙ってるわけです、サイト運営側としては。

CTAの設定
【Volar2】のレイアウトデザイン
CTAの表示位置
- トップページでの設定
- 記事ページでの設定

CTAの設定

＜CTA＞の設定画面を開くには、

【パーツ】→＜CTA＞→【CTA管理】→【追加】

もしくは

【パーツ】→＜CTA＞→【CTAの追加】

から開けます。

基本設定

すでにいくつか設定済みの画面でご説明していきます。

実際のプレビュー画面では全体を表示しきれないのでハメコミ画面にて紹介します。

①背景画像

背景に表示する画像を指定します。

PCではサンプル画像のようにコンテンツエリアの右半分（か左半分）しか表示されません。

②見出し

見出しが必要なら書いておきます。

空白なら表示されず、次の③コンテンツが見出し位置までせり上がって表示されます。

③コンテンツ

CTA内で表示するコンテンツを入力します。

（HTMLタグ使用可）

④画像位置

画像をデフォルト（右側）で表示するか左側で表示するか。

リンク設定

ここはボタンリンク専用の設定項目です。

①リンク先URL

リンク先のURLを記入します。

右端の”ページ選択アイコン”をクリックするとサイト内のページ選択画面になるので、その場合は自動でURL（※実際にはページID）が入力されます。

②アンカーテキスト

ボタンリンク内に表示するテキストです。

③属性

右端の三角をクリックすると「新しいウインドウ（or タブ）で開く」と「noffolow」が出てくるので、用途に応じてチェックを入れます。

（”noffolow”はアフィリエイトリンクなんかで使ったりします）

④文字サイズ

ボタンリンク内の文字サイズを変更したい場合はここで調整します。

（”0”でデフォルトサイズ）

レイアウト設定

①レイアウト

デフォルトのレイアウトデザインが上記サンプル画像です。

もう一つのレイアウトが「横並び」。

下の画像のようにテキストとボタンリンクが並列表示になります。

スマホではいずれも縦一列表示になります。

②角丸

ここをONにすると四隅が角丸になります。

カラー設定

①背景色

コンテンツエリア（※画像が隠れてるエリア）の背景色を指定できます。

（デフォルトは白っぽいグレー？）

②文字色

見出し・コンテンツ全体のテキストカラーを指定できます。

（”見出しだけ”といった設定はありません）

③グラデーション

ここはよくわかりません。

④背景色

ボタンリンクの背景色を指定できます。

⑤文字色

ボタンリンクのテキストカラーを指定できます。

【Volar2】のレイアウトデザイン

SIRIUS2標準のCTAは見た目がおしゃれでかっこいいですよね。

ただ使用する背景画像によってはいろいろ面倒な点も出てきたりします。

たとえばAのようにテキストが少ない時は女性の顔が見えてます。

しかしながらBのようにテキスト量が多くなるとそれに比例して画像が拡大されて顔が見えなくなってしまいます。

この画像の自動拡大・縮小機能が便利なようでいて実は使いにくくもあるというか…。

もちろん画像を”左側”に設定変更すれば”一応”解決はします。

しかしながら「テキストブロックはどうしても左側にしたい」という見せ方のルールがある場合は解決には至りません。

またブラウザの表示幅によっても画像の自動拡大・縮小のせいで見え方が変わってきます。

こういった仕様なので特にテキスト込みの画像を使う時は注意が必要です。

サンプルとして右側にキャッチコピー的なテキストを付けてみた画像を用意してみました。

CTAであれば単なるイメージ画像よりは具体的なテキストを埋め込んだ画像の方が視覚的にアピールしやすいかと思います。

ですがテキストの量やブラウザ幅によっては上のように女性の顔が隠れてしまったりテキストが読みにくくなる可能性もあります。

そこで【Volar2】ではPC上でもスマホでの表示と同じ縦1列表示のCTAスタイルを追加でご用意してみました。

専用のスタイルを有効化するだけで下のようなレイアウトで表示されるようになります。

（ブラウザ幅に左右されることもありません＆スマホでも同一レイアウトです）

この機能はデフォルトでは無効化されてます。

【Volar2】CTAレイアウトは以下の2点だけが必須選択項目となります。

『基本設定』の「画像位置」が”デフォルト（右側）”
『レイアウト設定』の「レイアウト」が”デフォルト”

上記以外の（背景色や文字サイズといった）すべての設定はそのまま有効でちゃんと反映されます。

ユーザー指定スタイル内に【Volar2】CTA専用のスタイルを用意してます。

そのスタイルの先頭と後尾のコメントアウトを解除するだけで機能は有効化されます。

CTAの表示位置

任意の位置

CTAの表示箇所ですが、記事内の任意の位置に表示したいのであれば、表示位置で

メニュー→【パーツ】→＜CTA＞→【CTAタグの挿入】→【※挿入したいCTAの管理ID】

と選択すると下のような独自タグが挿入されます。これで完了。

記事下・追従型・フッター固定表示

CTAと言えば一般的には記事下での常時固定表示というイメージが多いかと思います。

ただその設定方法がマニュアルのどこを見ても書いてなさそうなのでしばらく放置していたんです。
（ただの見落とし？）

でもありましたね、「ページの設定」の中に。

ということでそのやり方をご紹介します。

トップページでの設定

まずは編集画面左側・サイト構成画面の「トップページ」上で右クリック→「ページの設定」を選択します。

（［Ctrl］＋［D］でもOK）

下のような画面が出るので「CTA」をクリックします。

ここが「記事下・追従型・フッター」の設定箇所であると同時に各CTAのベースとなる設定箇所でもあります。

メインに設定したCTAはカテゴリーページでは記事一覧の上に表示されます。

予めCTA管理画面で各CTAは設定済みという前提で話を進めます。

たとえば記事下用の『メイン』に当方で作成済みの「CTAメイン」（※CTA用管理ID）を指定したとします。

結果、ページの下の方に該当するCTAが表示されます。

筆者

先の設定内のプレビュー画面と実際の表示レイアウトが異なりますが、これは”謎”です。

続いて『追従』CTAにも設定してみます。

こちらはページをスクロールすると途中で右下にふわっと出現し、そのまま固定表示（追従）になるというもの。

いったん表示されるとその後は×ボタンをクリックしない限りずっと表示されたままという仕様のようです。

追従型は記事下のような横並びではなく、スマホでの表示同様上から順の表示レイアウトになります。

追従型のCTAはデフォルトではページの長さの半分の位置までスクロールされると表示されるようになってます。

もしももっと下の方までスクロールしてから表示されるようにしたい場合は、以下のスタイルを【テンプレート】→【スタイルシート編集】→【ユーザー指定スタイル】に加筆してみてください。

赤文字の数値を増やせばスクロールの早い段階で表示され、減らせば下の方までスクロールしないと表示されないようになります。

@media (min-width: 1025px) {
	#cta-fixed {
		bottom: 50%;
	}
}

最後は『フッター』CTA。

こちらは”背景画像はなし”でページ最下段にブラウザ幅全体の背景色にタイトルとリンクボタンだけというシンプルなレイアウトで表示されます。

（背景色は固定っぽい？）

筆者

ブラウザ幅いっぱいの表示になるので背景画像は非表示という仕様なんでしょうか。（それとも単なるHTML記載ミス？）

記事ページでの設定

今度は記事ページで『ページの設定』を開いてみます。

同じようにCTAの項目が出てきますが、こちらでは「トップページと同じ設定」という新たな選択肢がデフォルト設定になってます。

新規で記事を作成する際は最初から「トップページと同じ設定」が選択された状態かつ表示ONでの設定になるみたいです。

（カテゴリーページ新規作成時も同様）

ただし一つ問題があります。

この設定の場合、たとえばトップページでの『メイン』のCTA設定は完了しているものの、一時的に表示設定をOFF（非表示）にしている場合は記事ページでもCTAは非表示になってしまうということです。

そのため記事ページは一括して同じCTAを表示したいのであればトップページでもCTAの表示設定はONにしておく必要があります。

もしもトップページだけは非表示にしたいということであれば、テンプレートを直接いじるのが簡単です。

（スタイル設定でもできます）

テンプレート→HTMLテンプレート編集→トップページと開き、以下のワードを探します。

<% ctaMain %>

これを下のようにコメントアウトすればトップページのみCTAは非表示になります。

追従CTAは

<% ctaFixed %>

フッターCTAは

<% ctaFooter %>

になります。

また特定の記事ページでCTAを非表示にしたいのであれば表示設定をOFFにすればそのページだけは非表示になります。

あるいはそのページだけ別のCTAを表示したい場合はCTAの選択を変えるだけで機能します。

欲を言えばトップページ用・記事ページ用などの振り分け項目があるとありがたいですね。