色や枠線のデザインを編集する

ご利用ガイド担当チーム

2021年11月18日 06:55

ポップアップは、文字の色や枠線の太さ、ポップアップの幅などのデザインを設定できます。Webサイトに合わせて違和感のないデザインに仕上げましょう。

ポップアップのデザイン設定の表示方法

［ステップ編集］画面の［表示コンテンツの編集］にある［ポップアップ全体（ボックス）のデザインを変更する］をオンにすると、ポップアップのデザインを設定する項目が表示されます。

項目の内容

番号	項目	内容
1	枠線の色	カラーコードを入力するか、カラーピッカーを使って枠線の色を指定します。
2	文字の色	カラーコードを入力するか、カラーピッカーを使って文字の色を指定します。
3	枠線の太さ	枠線の太さを0～5pxの間で設定します。
4	背景色	カラーコードを入力するか、カラーピッカーを使って背景色を指定します。
5	ポップアップの幅	ポップアップの幅をピクセル数か、画面の幅に対する％で指定します。

CSSを記述すれば、ポップアップを角丸にしたり要素の余白を調整したりなど、細かくデザインを調整できます。CSSのカスタマイズ方法は「ポップアップの見た目を変更するには？」でも紹介しているので、参照してください。

［ステップ編集］画面の下にある［表示オプション］をオンにすると、ポップアップが表示されるときのアニメーションや遅延表示を設定できます。

項目の内容

番号	項目	内容
1	アニメーションの時間	ポップアップの表示開始から終了までのアニメーションにかかる時間（スピード）を、0～5秒の間で指定します。標準は0.25秒です。
2	遅延表示	2つ目以降のポップアップが表示されるまでの秒数を指定します。開始ステップでは設定できません。
3	フェードの利用	チェックを付けると、ポップアップが徐々に表示されるフェード効果が適用されます。その代わり、画面端から出てくるようなアニメーションはなくなります。
4	カスタムCSSクラス	特別な表示オプションを設定するときの項目です。詳しくは担当コンサルタントにお問い合わせください。

［表示オプション］の［遅延表示］は、2つ目以降のステップ用の設定です。開始ステップに遅延表示を設定したいときは「遅延表示を設定する」を参考に、パターンの表示タイミングを設定してください。