検索結果

当サイトで使用しているキャプチャ画像は（【Volar2】の開発ベースになってる「ベーステンプレート」のレイアウトが元になってます。【Volar2】では【パーツ】→＜CTA＞用の独自レイアウトを追加でご用意しました。※＜CTA＞についてはこちらの記事をご参照ください。CTASIRIUS2の＜CTA＞機能についての詳細ページ。概要SIRIUS2標準の＜CTA＞は見た目がおしゃれでかっこいいですよね。ただ使用する背景画像によってはいろいろ面倒な点も出てきたりします。たとえばAのようにテキストが少ない時は女性の顔が見えてます。しかしながらBのようにテキスト量が多くなるとそれに比例して画像が拡大されて顔が見えなくなってしまいます。この画像の自動拡大・縮小機能が便利なようでいて実は使いにくくもあるというか…。もちろん画像を”左側”に設定変更すれば”一応”解決はします。しかしながら「テキストブロックはどうしても左側にしたい」という見せ方のルールがある場合は解決には至りません。またブラウザの表示幅によっても画像の自動拡大・縮小のせいで見え方が変わってきます。こういった仕様なので特にテキスト込みの画像を使う時は若干の注意が必要です。サンプルとして右側にキャッチコピー的なテキストを付けてみた画像を用意してみました。CTAであれば単なるイメージ画像よりは具体的なテキストを埋め込んだ画像の方が視覚的にアピールしやすいかと思います。ですがテキストの量やブラウザ幅によっては上のように女性の顔が隠れてしまったりテキストが読みにくくなる可能性もあります。そこで【Volar2】ではPC上でもスマホでの表示と同じ縦1列表示の《【Volar2】＜CTA＞追加レイアウト》をご用意してみました。専用のモジュールを有効化するだけで下のようなレイアウトで表示されるようになります。（ブラウザ幅に左右されることもありません＆スマホでも同一レイアウトです）有効化この機能はデフォルトでは無効化されてます。有効化のやり方《【Volar2】＜CTA＞追加レイアウト》を利用するには、モジュール『【Volar2】CTA（スタイル）』の［有効］のチェックをONにします。

当サイトで使用しているキャプチャ画像は（【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）します。（”コピー”だと編集画面に残ってしまうので”カット”にします）これでテキストカラーが変わります。このやり方で「テキスト」や「説明文」のテキストカラーを変更することもできます。もちろんテキストの大きさの変更も可。