【カスタムCSS】コーチマークの大きさを変更する
コーチマークの横幅や高さは、カスタムCSSで調整できます。
対象のサポートアクションを開き、コーチマークのステップ下部にある「詳細設定」から設定します。
設定は次の3つの手順で行います。
- 対象のコーチマークの設定画面を開きます。
- カスタムCSSで大きさを指定します。
- 表示を確認し、変更を反映します。
1. コーチマークの設定画面を開く
「QANT Web」＞「サポートアクション」から、編集したいアクションを開きます。
左側のステップ一覧で、対象のコーチマークを選択します。
ステップ下部の「詳細設定」を開き、「カスタムCSS」の「このステップのカスタムCSS」にCSSを入力します。
「内容」内の「詳細設定」とは別の設定箇所です。
カスタムCSSの設定場所については、カスタムCSS設定もご確認ください。
2. カスタムCSSで大きさを指定する
横幅を変更する
次のCSSを入力すると、横幅を400pxに指定できます。400pxの数値を、表示したい横幅に変更してください。
#rs_sa .c-coachMark {
width: 400px;
}初期状態の横幅は300pxです。
設置先の位置や画面の空きに応じて横幅が制限されるため、指定した数値より狭く表示される場合があります。
高さを調整する
高さは、文章や画像などの内容に応じて自動で変わります。
最低限の高さを指定したい場合は、min-heightを追加します。
次の例では、横幅を400px、高さを最低220pxに指定しています。
内容が多い場合は、220pxを超えて縦に伸びます。
#rs_sa .c-coachMark {
width: 400px;
min-height: 220px;
}高さを一定に固定すると、文章やボタンが収まらない場合があります。
内容に応じて高さを変えたい場合は、heightによる固定を避けてください。
3. 表示を確認し、変更を反映する
画面右側のプレビューで、大きさや文章の折り返しを確認します。
実際のサイト上で確認するには、編集画面右上の再生マークをクリックします。
サイトURLを入力し、「開く」をクリックしてください。
操作の詳細は、サイトプレビューをご確認ください。
PCとスマートフォンで、次の点を確認します。
- コーチマークが画面からはみ出していないか
- 文章や画像が見切れていないか
- ボタンが表示され、操作できるか
確認後、アクションの状態に応じて変更を反映します。
- 未公開のアクション：「保存」後に「公開」をクリックします。
- 公開中のアクション：「更新」をクリックします。
サイトプレビューには、配信URL・セグメント・スケジュールなどの配信設定は反映されません。
配信設定は別途確認してください。
設定時の注意
「このステップのカスタムCSS」に入力したCSSは、対象のステップだけに適用されます。
ブランドスタイルに入力すると、同じブランドスタイルを使用するほかのサポートアクションにも適用されます。
コーチマーク本体の大きさと、文字の大きさは別の設定です。
文字を大きくしたい場合は、コーチマーク内の「文章」の「文字サイズ」や、見出しの設定を変更してください。