この記事ではSANGO Landで配布しているフローティングCTAブロックの使い方を解説していきます。
フローティングCTAブロックは、画像やYouTube動画を追尾して表示するブロックです。ユーザーの目に留まりやすいため、注目してもらいたいコンテンツを配置するのに便利です。
[広告]CSSの勉強におすすめ
ブロックの使い方
まずはSANGO Landにアクセスしてブロックをコピーしましょう。
右上のコピーボタンをクリック！
右上のコピーボタンからブロックをコピーします。
SANGO v3系の最新版でお使いください。
使いたいページの編集画面で右クリックして貼り付け、もしくはCtrl + Vまたは⌘ + Vします。
これでアイコンブロックの設置は完了です。次は詳しい操作手順を見ていきましょう。
ブロックの特徴
各項目をブロック上でプレビューできる仕様にしています。
どのような配置にするか、エディタ上でイメージしながら作成することが可能です。
このほかスマホでは表示しない設定、一度閉じたらサイトを離れるまで再表示しない、閉じるボタン位置の変更など数クリックで変更が可能になっています。
[広告]CSSの勉強におすすめ
設定項目の解説
ここからはブロックの設定項目を見ていきます。
このブロックは以下の4通りの使いかたが可能です。
- 画像を追尾して表示
- 画像(リンク付き)を追尾して表示
- YouTube動画を追尾して表示
- 画像とYouTube動画両方を追尾して表示
YouTubeの動画を表示したい場合は動画URLを入力します。
画像のように動画視聴画面のURLをコピーして貼り付けます。
YouTube以外のURLには対応していません。
またhttps://www.youtube.com/watch?v=から始まる形式で入力しましょう。
追尾して表示したい画像を指定します。
URLや別タブで開くかの設定を指定することができます。
フローティングCTAの表示位置を指定します。
上に戻るボタンや目次へボタンと干渉する場合は数値を調節してください。
規定値は下5.5(em)、横2(em)です。
角を丸くする設定です。サイトになじませるため角丸を付けています。
角丸を付けたくない場合はスライダーを0にしてください。
動画と画像の幅を指定します。お好みの横幅に調節してください。
規定値は266(px)です。
アイコンの表示位置の設定です。
- 左寄せ
- 右寄せ
の2つが選択可能です。お好みでどうぞ。
モバイルサイズ(768px以下)でフローティングCTAを無効化します。
無効化されているときは画像のように表示されないことをプレビュー画面でも確認することができます。
セッションストレージという仕組みを使って、CTAの閉じるボタンを押した後ページを閉じるまで再表示しないことができます。
どのくらいスクロールしてからCTAを表示し始めるかの設定です。
規定値は700(上に戻るボタンと同じタイミング)に設定しています。
0にするとすぐに表示、1000にすると下のほうにスクロールしないと表示されなくなります。
右上のコピーボタンをクリック！
よくある質問
- このブロックはどこに設置すればいいですか？
- 特定の記事にだけ設置する場合は記事の下のほうに設置します。
トップページ以外の全ページに設置する場合は、条件ブロックと組み合わせてサイドバーや、フッターなどのコンテンツブロックに入れるのがおおすすめです。
- ブロックが見つかりません
- SANGO Landからコピーすることができます。
- 設定項目がありません
- 右上の⚙ボタンを押して右サイドバーを出しましょう。
各設定はフローティングCTAボタンをクリックすると右側に表示されます。
- 上下位置・左右位置を調節したい
- 右サイドバーの下からの位置、横からの位置スライドバーを操作します。
[広告]CSSの勉強におすすめ
まとめ
今回はSANGO テーマで利用できるフローティングCTAの使い方を解説しました。
このブロックに関する質問・問題・要望はSANGO Landのフォーラム、この記事のコメント、もしくはTwitterまでどうぞ！
それではまた。
ご質問・相談など
その他
SANGO FUNはWordPressテーマSANGOの魅力、使い方やカスタマイズを解説するサイトです。
この記事がお役に立ちましたら、ぜひほかのSANGOユーザーさんにも広めて頂けるととてもうれしいです。
Twitterでの拡散やフォローをお待ちしています！
めっちゃおすすめ
