検索結果

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

こちらはSIRIUS2 ver.1.230から搭載された追加機能で、サイトの下部（フッター近く）に『お問い合わせページ』などへの誘導を促すリンクを背景画像と共に設置できるCTA機能になります。『CTA』とは？CTA（Call To Actionの略）とは本来は”訪問者に注意喚起させて行動を誘導する”ことを意味します。これが転じてウェブ上では（一般的には）商品やサービスの購入を促す画面を指します。「いますぐ購入する」とか「メルマガ登録はコチラ」といったようなドでかくて目立ったボタンリンクをあなたも何度か見たことがあるんじゃないでしょうか。ああいうのを見るとついついポチットやってしまいそうになるんですよね。もちろんそれを狙ってるわけです、サイト運営側としては。こんな感じです。「お問い合わせ」以外にも一般的なCTAとしても使えます。設定画面＜下部CTA＞機能は通常のCTA機能とは別の独立した設定画面が用意されてます。リボンメニューのコンテンツタブ→下部CTAをクリックすると設定画面が開きます。基本設定縮小版①下部CTAの表示表示/非表示の選択。チェックOFFにしても設定は保存されます。②テキストボタンリンクに表示させるテキスト。デフォルトで「お問い合わせ」が入ってますがもちろん変更可能。③リンク先URLリンクURL。内部URLでも外部URLでもOK。④背景画像背景に表示させたい画像の指定。幅広での表示（※PC表示時）になるので横長の画像推奨です。またどんな画像を選択しても最終的には「cta_bg.jpg」での保存になります。画像を変更した時も画像自体が変わるだけでファイル名は常に「cta_bg.jpg」のまま。⑤背景色背景画像の上にかぶせる色。いわゆるオーバーレイに指定したい色の設定。色や透明度などは後述する『詳細設定』タブ内で指定。この背景色ですが「見出し」と「説明文」のテキストカラーは白固定で、ボタンリンク上のテキストは背景色と同色というちょっと不思議な仕様のようです。そのため背景色に明るい色を指定してしまうとテキストが見にくくなります。どうしてもテキストカラーを変えたいという方はやり方の一例をこちらでご紹介してますので参考までにどうぞ。⑥見出し見出し文。デフォルトで「CONTACT US」が入ってますがもちろん変更可能。⑦説明文見出しを補足するサブテキスト表示エリア。デフォルトで「説明文」が入ってますがこちらも変更可。＜下部CTA＞は1サイトにつき1個のみとなります。詳細設定縮小版①表示するページどのページに表示させるかの設定。デフォルトでは全部にチェックが入ってます。「特定のページだけ下部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）します。（”コピー”だと編集画面に残ってしまうので”カット”にします）これでテキストカラーが変わります。このやり方で「テキスト」や「説明文」のテキストカラーを変更することもできます。もちろんテキストの大きさの変更も可。他のCTAとの違いSIRIUS2には複数のCTA機能が搭載されてます。それぞれ設定画面の開き方や設定画面そのものが異なってるので若干わかりにくいのが難点ですが、この際それは置いといてそれぞれの表示の違いを検証してみます。まずベース地には下のような画像を用意してみました。そしてこちらがパーツ＜CTA＞での設定画面です。見出しや説明文等は他のと同じにしてあります。こちらはメイン（記事下）とフッター（フッターエリア内）での表示にしてみます。そしてこちらは＜下部CTA＞の設定画面。これらを一気に表示したのが下の画像です。同じ”CTA”でもレイアウトにかなり差がありますね。スマホでは縦並び表示になります。ちなみに《Volar2》の独自CTAを有効化するとパーツ＜CTA＞の部分は下のようになります。（※PC表示時＆メイン部分のみ変化）ということであとは”どの位置にCTAを表示させるか”などの取捨選択になるでしょうか。タップ可能な電話番号も表示可SIRIUS2 ver.1.230にて追加搭載された＜電話番号の挿入機能＞を使えば、タップで発信画面が表示される電話番号を表示させることもできます。まずは先のリンク先を参考に”電話番号”を作成します。作成したら生成されたコードをコピーします。続いて下部CTAを開き、『説明欄』にペーストします。上の例だと電話番号だけ”黒”色なので”白”に統一してみます。しかしながら文字色などは下部CTA側の制御外になるので（必要なら）＜電話番号挿入機能＞側で済ませます。たとえば文字色を白に合わせたいなら＜電話番号挿入機能＞の設定内でテキストを白にし、それによって生成された新たなコードで差し替えます。

パーツ→＜CTA＞は積極的にアピールしたい商品やサービスを画像とテキストで表示できる機能です。デザイン済みなので、あとはイメージ用の（背景）画像を選択し、タイトルとリンク先URLを入力するだけの簡単設定。特にアクセスしてほしいページがある場合は積極的に活用するといいんじゃないでしょうか。『CTA』とは？CTA（Call To Actionの略）とは本来は”訪問者に注意喚起させて行動を誘導する”ことを意味します。これが転じてウェブ上では（一般的には）商品やサービスの購入を促す画面を指します。「いますぐ購入する」とか「メルマガ登録はコチラ」といったようなドでかくて目立ったボタンリンクをあなたも何度か見たことがあるんじゃないでしょうか。ああいうのを見るとついついポチットやってしまいそうになるんですよね。もちろんそれを狙ってるわけです、サイト運営側としては。設定＜CTA＞の設定画面を開くには、【パーツ】→＜CTA＞→【CTA管理】→【追加】もしくは【パーツ】→＜CTA＞→【CTAの追加】から開けます。基本設定すでにいくつか設定済みの画面でご説明していきます。①背景画像背景に表示する画像を指定します。PCではサンプル画像のようにコンテンツエリアの右半分（か左半分）しか表示されません。②見出し見出しが必要なら書いておきます。空白なら表示されず、次の③コンテンツが見出し位置までせり上がって表示されます。③コンテンツCTA内で表示するコンテンツを入力します。（HTMLタグ使用可）④画像位置画像をデフォルト（右側）で表示するか左側で表示するか。リンク設定ここはボタンリンク専用の設定項目です。①リンク先URLリンク先のURLを記入します。右端の”ページ選択アイコン”をクリックするとサイト内のページ選択画面になるので、その場合は自動でURL（※実際にはページID）が入力されます。②アンカーテキストボタンリンク内に表示するテキストです。③属性右端の三角をクリックすると「新しいウインドウ（or タブ）で開く」と「noffolow」が出てくるので、用途に応じてチェックを入れます。（”noffolow”はアフィリエイトリンクなんかで使ったりします）④文字サイズボタンリンク内の文字サイズを変更したい場合はここで調整します。（”0”でデフォルトサイズ）レイアウト設定①レイアウトデフォルトのレイアウトデザインが上記サンプル画像です。もう一つのレイアウトが「横並び」。下の画像のようにテキストとボタンリンクが並列表示になります。スマホではいずれも縦一列表示になります。②角丸ここをONにすると四隅が角丸になります。カラー設定①背景色コンテンツエリア（※画像が隠れてるエリア）の背景色を指定できます。（デフォルトは白っぽいグレー？）②文字色見出し・コンテンツ全体のテキストカラーを指定できます。（”見出しだけ”といった設定はありません）③グラデーションここはよくわかりません。④背景色ボタンリンクの背景色を指定できます。⑤文字色ボタンリンクのテキストカラーを指定できます。表示位置任意の位置CTAの表示箇所ですが、記事内の任意の位置に表示したいのであれば、CTAを表示したい箇所で記事装飾メニューのパーツ→＜CTA＞→【CTAタグの挿入】→【※挿入したいCTAの管理ID】と選択すると下のような独自タグが挿入されます。これで完了。記事下・追従型・フッター固定表示CTAと言えば一般的には記事下での常時固定表示というイメージが多いかと思います。ただその設定方法がマニュアルのどこを見ても書いてなさそうなのでしばらく放置していたんです。（ただの見落とし？）でもありましたね、「ページの設定」の中に。ということでそのやり方をご紹介します。トップページでの設定編集画面の左側にある【サイト構成】画面上の「トップページ」上で右クリック→ページの設定を選択します。下のような画面が出るので「CTA」をクリックします。ここが「記事下・追従型・フッター」の設定箇所であると同時に各CTAのベースとなる設定箇所でもあります。メインに設定したCTAはカテゴリーページでは記事一覧の上に表示されます。予めCTA管理画面で各CTAは設定済みという前提で話を進めます。たとえば記事下表示用の『メイン』に、作成済みの「CTAメイン」（※CTA用管理ID）を指定したとします。結果、ページの下の方に該当するCTAが表示されます。続いて『追従』CTAにも設定してみます。こちらはページをスクロールすると途中で右下にふわっと出現し、そのまま固定表示（追従）になるというもの。いったん表示されるとその後は×ボタンをクリックしない限りずっと表示されたままという仕様のようです。追従型は記事下のような横並びではなく、スマホでの表示同様上から順にの表示レイアウトになります。追従型のCTAはデフォルトではページの長さの半分の位置までスクロールされると表示されるようになってます。もしももっと下の方までスクロールしてから表示されるようにしたい場合は、上部メニューからテンプレート→スタイルシート編集→ユーザー指定スタイルと開き、以下のスタイルを加筆してみてください。赤文字の数値を増やせばスクロールの早い段階で表示され、減らせば下の方までスクロールしないと表示されないようになります。@media (min-width: 1025px) { #cta-fixed { bottom: 50%; }}最後は『フッター』CTA。こちらは”背景画像はなし”でページ最下段にブラウザ幅全体の背景色にタイトルとリンクボタンだけというシンプルなレイアウトで表示されます。（背景色は固定っぽい？）筆者ブラウザ幅いっぱいの表示になるので背景画像は非表示という仕様なんでしょうか。記事ページでの設定今度は個々の記事ページで『ページの設定』を開いてみます。同じようにCTAの項目が出てきますが、こちらでは「トップページと同じ設定」という新たな選択肢がデフォルト設定になってます。新規で記事を作成する際は最初から「トップページと同じ設定」が選択された状態かつ表示ONでの設定になるみたいです。（カテゴリーページ新規作成時も同様）ただし一つ問題があります。この設定の場合、たとえばトップページでの『メイン』のCTA設定は完了しているものの、一時的に表示設定をOFF（非表示）にしている場合は記事ページでもCTAは非表示になってしまうということです。そのため記事ページでは一括して同じCTAを表示したいのであれば、トップページでもCTAの表示設定はONにしておく必要があります。もしもトップページだけは非表示にしたいということであれば、テンプレートを直接いじるのが簡単です。（スタイル設定でもできます）やり方は上部メニューからテンプレート→HTMLテンプレート編集→トップページと開き、以下のワードを探します。<% ctaMain %>これを下のようにコメントアウトすればトップページのみCTAは非表示になります。<!-- ★<% ctaMain %>★ -->ちなみに追従CTAは<% ctaFixed %>フッターCTAは<% ctaFooter %>になります。また特定の記事ページでCTAを非表示にしたいのであれば表示設定をOFFにすればそのページだけは非表示になります。あるいはそのページだけ別のCTAを表示したい場合はCTAの選択を変えるだけで機能します。表示したいページの［ページの設定］を開くと【CTA】タブ内に表示設定があります。パーツ＜CTA＞は（すべてのエントリーページで表示などの）一括設定はないようです。そのため一括設定がお好みなら（表示位置は最下段で固定ですが）＜下部CTA＞機能を使うという手もあります。パーツ機能はデザインモードでもテキストモードと同じくSIRIUS2の独自タグでの表示になるので、（ブラウザ or内蔵）プレビューでの表示チェックが不可欠になります。《Volar2》独自レイアウト《Volar2》では＜CTA＞標準レイアウトのほかに独自レイアウトも追加してみました。概要は＜CTA＞追加のレイアウト-Volar2をご覧ください。