下部CTA-SIRIUS2

下部CTA-SIRIUS2

SIRIUS2の＜下部CTA＞機能についての詳細ページ。
カテゴリー（SIRIUS2新機能）
 

アイキャッチ画像

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

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

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

 

こちらはSIRIUS2 ver.1.220から搭載された追加機能で、サイトの下部（フッター近く）に『お問い合わせページ』などへの誘導を促すリンクを背景画像と共に設置できる機能になります。

 

こんな感じです。

 

キャプチャ画像


設定画面

＜下部CTA＞機能は通常のCTA機能とは別の独立した設定画面が用意されてます。

 

SIRIUS2上部リボンバーのコンテンツタブ→下部CTAをクリックすると設定画面が開きます。

 

キャプチャ画像

 

基本設定

キャプチャ画像

縮小版

キャプチャ画像

①下部CTAの表示
表示/非表示の選択。チェックOFFにしても設定は保存されます。
②テキスト
ボタンリンクに表示させるテキスト。デフォルトで「お問い合わせ」が入ってますがもちろん変更可能。
③リンク先URL
リンクURL。内部URLでも外部URLでもOK。
④背景画像

背景に表示させたい画像の指定。幅広での表示（※PC表示時）になるので横長の画像推奨です。

またどんな画像を選択しても最終的には「cta_bg.jpg」での保存になります。

画像を変更した時も画像自体が変わるだけでファイル名は常に「cta_bg.jpg」のまま。

⑤背景色
背景画像の上にかぶせる色。いわゆるオーバーレイに指定したい色の設定。
色や透明度などは後述する『詳細設定』タブ内で指定。

 

この背景色ですが「見出し」と「説明文」のテキストカラーは白固定で、ボタンリンク上のテキストは背景色と同色というちょっと不思議な仕様のようです。

そのため背景色に明るい色を指定してしまうとテキストが見にくくなります。

キャプチャ画像

どうしてもテキストカラーを変えたいという方はやり方の一例をこちらでご紹介してますのでご参考までにどうぞ。

⑥見出し
見出し文。デフォルトで「CONTACT US」が入ってますがもちろん変更可能。
⑦説明文
見出しを補足するサブテキスト表示エリア。デフォルトで「説明文」が入ってますがこちらも変更可。

 

詳細設定

キャプチャ画像

縮小版

キャプチャ画像

①表示するページ

どのページに表示させるかの設定。デフォルトでは全部にチェックが入ってます。

キャプチャ画像

 

「特定のページだけ下部CTAを非表示にしたい」という場合は当該ページの設定画面を開き、その他タブ内の「下部CTA」のチェックをOFFにします。

 

キャプチャ画像

②背景画像の位置

画面幅の狭くなるスマホで、背景画像のどのエリアを表示させるかの設定。0に近いほど左側のエリアが表示されます。

下のサンプルは50%（中央）と20%（左側）での見え方の違いです。

キャプチャ画像

③背景の透明度

背景画像に載せる（『基本設定』で設定した）背景色の透かし具合の設定。

数値が大きいほど色が濃くなって背景画像が見えにくくなり、数値を小さくすると背景画像が見えやすくなります。

テキストカラーの変え方

たとえば「見出し」の”CONTACT US”というテキストカラーを黒系に変えたい場合、いったんSIRIUS2の編集画面に戻って”CONTACT US”と打ち込み、装飾メニューからテキストカラーを黒系で指定してやります。

 

キャプチャ画像

 

その結果、下のようにテキストカラー用のタグで挟まれた「CONTACT US」が完成します。

 

キャプチャ画像

 

上画像のタグ込みの”CONTACT US”を全選択（Ctrl＋A）したらカット（（Ctrl＋V））します。

そのまま【下部CTA】に戻って「見出し」欄の”CONTACT US”を削除（Delete）した後にペースト（Ctrl＋V）します。

（”コピー”だと編集画面に残ってしまうので”カット”にします）

 

これでテキストカラーが変わります。

 

キャプチャ画像

 

このやり方で「テキスト」や「説明文」のテキストカラーを変更することもできます。

もちろんテキストの大きさの変更も可。