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

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

目次

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

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

img-01.png

ポップアップのデザインの項目

img-02.png

項目の内容

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

もっと細かい調整をするには

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

表示オプションの表示方法

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

img-11.png

表示オプションの項目

img-12.png

項目の内容

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

開始ステップを遅延表示させたいときは

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

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています

コメント

0件のコメント

記事コメントは受け付けていません。