【SANGO】フローティングCTAブロックの使い方

この記事ではSANGO Landで配布しているフローティングCTAブロックの使い方を解説していきます。

フローティングCTAブロックは、画像やYouTube動画を追尾して表示するブロックです。ユーザーの目に留まりやすいため、注目してもらいたいコンテンツを配置するのに便利です。

ブロックの使い方

ブロックをコピー

まずはSANGO Landにアクセスしてブロックをコピーしましょう。

右上のコピーボタンをクリック!

右上のコピーボタンからブロックをコピーします。

SANGO v3系の最新版でお使いください。

ブロックを貼り付け

使いたいページの編集画面で右クリックして貼り付け、もしくはCtrl + Vまたは⌘ + Vします。

これでアイコンブロックの設置は完了です。次は詳しい操作手順を見ていきましょう。

ブロックの特徴

各項目をブロック上でプレビューできる仕様にしています。

どのような配置にするか、エディタ上でイメージしながら作成することが可能です。

このほかスマホでは表示しない設定、一度閉じたらサイトを離れるまで再表示しない、閉じるボタン位置の変更など数クリックで変更が可能になっています。

設定項目の解説

のじはた
のじはた

ここからはブロックの設定項目を見ていきます。

このブロックは以下の4通りの使いかたが可能です。

  1. 画像を追尾して表示
  2. 画像(リンク付き)を追尾して表示
  3. YouTube動画を追尾して表示
  4. 画像とYouTube動画両方を追尾して表示

【YouTube】画像URL

YouTubeの動画を表示したい場合は動画URLを入力します。
画像のように動画視聴画面のURLをコピーして貼り付けます。

YouTube以外のURLには対応していません。

またhttps://www.youtube.com/watch?v=から始まる形式で入力しましょう。

【画像】表示する画像

追尾して表示したい画像を指定します。

リンク先URL

URLや別タブで開くかの設定を指定することができます。

下からの位置・横からの位置(em)

フローティングCTAの表示位置を指定します。

上に戻るボタンや目次へボタンと干渉する場合は数値を調節してください。

規定値は下5.5(em)、横2(em)です。

角丸の大きさ(px)

角を丸くする設定です。サイトになじませるため角丸を付けています。

角丸を付けたくない場合はスライダーを0にしてください。

横幅(px)

動画と画像の幅を指定します。お好みの横幅に調節してください。

規定値は266(px)です。

閉じるボタン位置

アイコンの表示位置の設定です。

  • 左寄せ
  • 右寄せ

の2つが選択可能です。お好みでどうぞ。

モバイルで非表示にする

モバイルサイズ(768px以下)でフローティングCTAを無効化します。

無効化されているときは画像のように表示されないことをプレビュー画面でも確認することができます。

一度閉じたら表示しない

セッションストレージという仕組みを使って、CTAの閉じるボタンを押した後ページを閉じるまで再表示しないことができます。

しきい値

どのくらいスクロールしてからCTAを表示し始めるかの設定です。

規定値は700(上に戻るボタンと同じタイミング)に設定しています。

0にするとすぐに表示、1000にすると下のほうにスクロールしないと表示されなくなります。

右上のコピーボタンをクリック!

よくある質問

このブロックはどこに設置すればいいですか?
特定の記事にだけ設置する場合は記事の下のほうに設置します。
トップページ以外の全ページに設置する場合は、条件ブロックと組み合わせてサイドバーや、フッターなどのコンテンツブロックに入れるのがおおすすめです。
ブロックが見つかりません
SANGO Landからコピーすることができます。
設定項目がありません
右上の⚙ボタンを押して右サイドバーを出しましょう。
各設定はフローティングCTAボタンをクリックすると右側に表示されます。
上下位置・左右位置を調節したい
右サイドバーの下からの位置、横からの位置スライドバーを操作します。

まとめ

今回はSANGO テーマで利用できるフローティングCTAの使い方を解説しました。

このブロックに関する質問・問題・要望はSANGO Landのフォーラム、この記事のコメント、もしくはTwitterまでどうぞ!

それではまた。

( 。•ᴗ• )੭⁾⁾

コメントを残す

コメント欄は記事内容の質問などにご活用ください。すべての質問にはお答えできませんので予めご了承ください。
テーマのリクエストや機能の質問はSANGOフォーラムに直接ご質問ください。