概要
PLAINERの機能を用いることで、デモコンテンツの左下に常設のCTAを設置することが可能です。
一方で、設置したCTAと、撮影した画面のボタンが被ってしまい、デモコンテンツを進めることができなくなる場合があります。
この場合の解消方法について、ご案内いたします。
なお、CTAはコンテンツ単位で設定されるため、「特定のガイドだけ非表示にする」ケースと「そのコンテンツの全ページで非表示にする」ケースで対応方法が異なります。目的に合わせて以下をご参照ください。
全ページでCTAを一括で非表示にする場合
そのコンテンツでCTAを一切表示したくない場合は、CTA設定の「CTA表示」をオフにすることで、追加のコード記述なしに全ページ（全ガイド）で一括して非表示にできます。
デモコンテンツの編集画面を開きます。
画面右上のメニュー（︙）をクリックし、「CTA設定」を選択します。
「CTA設定」画面が開いたら、「CTA表示」のトグルをオフにします。
「保存」をクリックします。
これで、そのコンテンツの全ページでCTAが非表示になります。
再びCTAを表示したい場合は、同じ手順で「CTA表示」をオンに戻してください。
特定のガイドだけCTAを非表示にする場合
CTAは表示したままにしつつ、被りが発生している特定のガイドでのみ非表示にしたい場合は、対象ガイドにCSSを記述します。
事前に見た目を確認する
デモの編集画面では、設定したCTAボタンがキャンバスの左下にプレビュー表示されます。保存前に、CTAと撮影した画面のボタンが被っていないかをこのプレビューで確認できます。
プレビューにはCTAの色・テキスト・サイズなど、設定内容がそのまま反映されます。被りが発生している場合は、下記の設定方法で対象ガイドのCTAを非表示にしてください。
設定方法
この設定にはHTML/CSSの知識が必要となります。ご不明な点はサポートまでお問い合わせくださいませ。
PLAINERのデモコンテンツの編集画面にて、CTAを非表示にしたいガイドの編集メニューを開く
ガイドテキスト欄に
<style>.plainer-cta-button {display: none;}</style>と記載する
この方法は、記述したガイドのみに適用されます。全ページで非表示にしたい場合は、上記「全ページでCTAを一括で非表示にする場合」の手順をご利用ください。