CTA-SIRIUS2

CTA

SIRIUS2の<CTA>機能についての詳細ページ。

アイキャッチ画像

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

 

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

 

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

 

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

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

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

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

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

公式サイトによれば「サイト内の画面右下にポップアップ形式で表示させたり...」「サイドメニューに追従させたり...」することもできるそうです。

 

ただ現状では通常の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専用のスタイルを用意してます。

 

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

コメントフォーム(β版)

    ※コメントはこちらからどうぞ

    このフォームを作成するにあたって参考にしたサイト情報はこちらに載せてます