基本パーツ ＞ カウントダウン
限定販売終了日時やイベント参加の締め切り時間など、特定の日にちや時間を設定すると、残り時間を刻々とカウントダウン表示させることができるパーツです。
ちょっと専門メモ：コンバージョンを得るために、とても有効な手法と言われていますが、サイト上で多用すると逆効果になりかねませんので、必要最小限での使用をお勧めします。
一般設定
日付
カウントダウンが完了する年月日を指定します。それぞれ半角数字を使用してください。
日
日の入力欄です。
月
月の入力欄です。
年
年の入力欄です。西暦４桁で入力してください。
時間
カウントダウンが完了する時間を設定します。
時間
12時間制です。プルダウンメニューから時・分・AMかPMかを設定してください。
時間帯
日本国内向けの場合は、アジア > 東京を選択してください。
何らかの事情で海外現地時間に対して合わせる場合は、希望の時間帯を設定すると時差を自動計算してカウントダウンします。
スタイル
配置
表示方法を選択します。
数字 → 数字と文字のみを使った表示です。背景やセパレーターを設定できます。
東京オリンピック開会式まで
数字 + 残時間グラフ → 数字の外側に時間の動きを表現する円型残時間グラフを合わせて表示します。
東京オリンピック開会式まで
数字と文字
数字の色
時間を示す数字部分の色をピクセル単位で設定します。
文字色
各数字の下に表示される単位部分の文字色をピクセル単位で設定します。
数字の大きさ
時間を示す数字部分の大きさをピクセル単位で設定します。
文字の大きさ
各数字の下に表示される単位部分の文字の大きさをピクセル単位で設定します。
数字どうしの間隔
並んだ数字または残時間グラフの間隔をピクセル単位で設定します。
以下は「配置」で「数字」選択の際に表示されます
背景設定
背景エリアの色
数字の背景エリアに着色する場合に使用します。
背景エリア透過度
背景エリアに色をつけた場合、その透過度を設定します。0で透明になります。
背景エリア角丸設定
背景エリアに色をつけた場合、四隅に丸みを持たせます。数字が大きいほど丸くなります。50pxが最大です。
セパレーター
セパレーターを表示
それぞれの単位の数字の間にセパレーターを表示するかどうかを決めます。
以下は「配置」が「数字 + 残時間グラフ」の場合です
円型残時間グラフ
円の直径
カウント数字の周囲に表示される円の直径を設定します。
カウント枠の太さ
カウントに使用される円外周枠部分の太さを設定します。最大は20ピクセル(px)です。
カウント枠進行色
下地色と違う色を設定することで時間の進行を表現します。残時間と動きが視覚的に分かるよう、下地色との対比調整が必要です。
カウント枠下地色
円外周カウント枠部分の下地色を設定します。