カウントダウンタイマー

キャプチャ画像

商品の購入期限や限定販売期間などを目立つように表示させて訪問客の購買欲を掻き立てる手法の一つにカウントダウンタイマーというのがあります。

 

たまに見かけませんか?

”終了まであと○○日”

といったような表示を。

 

その機能がSIRIUSにも標準で搭載されてます。

 

それがこちら↓。

(※”右クリック→パーツ挿入→カウントダウンタイマー”から作成できます)

 

 

ただですね、表示がちょっと物足りないなぁと思うのは私だけでしょうか。

 

しかもiPhone(スマホ)で見た場合はかなり小っちゃくなっちゃうんですよ。

 

それに今回のように長めの文章を入れてしまうと、
(改行がきかないので)iPhone(スマホ)上では全部が見えなくなるというデメリットも生じます。

 

iPadで見てる人は時間の途中で切れちゃうので、
もはや動いているかどうかさえわからない…。

 

実際には

 

”激安商品販売終了まであと○○日○時間○分○秒。お早めに!”

と指定してあります。

 

PC上ではギリギリ全部が見えます。

※iPhone表示時のキャプチャ画像

 

キャプチャ画像

 

※iPad表示時のキャプチャ画像

 

キャプチャ画像

 

そこでカスタムテンプレート【Volar】では、自動縮小機能を備えた、
もうちょい目を引くカウントダウンタイマーを実装させてみました。


文字入りカウントダウンタイマー

イメージの違いでいくつかご用意しました。

今回使用しているスクリプトでは、”表示内容が同じでデザイン違い”は1ページ内に複数表示可能です。

 

表示内容が異なる場合はどれか一つしか表示できません。

 

グラデーション背景色以外の単一背景色・フォント色・フォントサイズ・テキストの変更は可能です。

 

テキストと日時を指定するだけのカンタン設定。

 

※シアングラデーションバック

キャプチャ画像

※黒バック

キャプチャ画像

※赤グラデーションバック

キャプチャ画像

 この記事をシェア 
キャプチャ画像

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)

PC版レイアウトに切替

スマホ版レイアウトに切替