カウントダウン部品

カウントダウンタイマーは2種類あり、日にちをセットするとその日に向かってカウントダウンが開始される「期間タイマー」と

初観覧から何日間という感じで観覧者個別でカウントダウンが始まる「クッキータイマー」の2種類があります。

それぞれのタイマーは、病魔で表示するタイプとミリ秒まで表示するタイプが選べます。

カウントダウン配置部品は、ヘッダーではなく本文内に配置するカウントダウン部品類です。

本文に配置するカウントダウン部品は、セットしたヘッドタイマーに連動して動きます。

ヘッダー最上部につくタイマーの解説
.
os

上記はヘッダー最上部につくヘッダタイマーのサンプルです。「期間タイマーのミリ秒表示」のバージョンです。

ヘッドに着くタイマーの帯の色と文字の色はサイトごとに自由に変えていけます。入力欄で日にちをセットしたら、あとはテンプレートを選択するだけです。詳しい設置方法等は、左上メニューの「使い方」の中の「カウントダウン」を参照してください。

ヘッダー最上部につくタイマーとカウントダウン部品の動作

まずは大きなくくりで解説しますと「期間タイマー」は期間が終了するとヘッドタイマーと本文に配置するカウントダウン部品は、設定した終了時の文字を出します。この文字と帯や部品類は文字を表示したまま残ります。(期間が過ぎると内容が切り替わる部品もあります)

「クッキータイマー」は少し違う動きをします。観覧者個別で何日間という動きをするので、期間が終わると、ヘッドタオイマーも本文に配置するカウントダウン部品もページから消えてなくなります。

こちらも、部品の中にはタイマーと連動して表示部品を切り替える部品もあります。例えば、期間中は値引きなどのセールを打つときに購入ボタンと値段を2つ作りタイマーと連動させて表示させたりします。

本文に配置するカウントダウン部品類のサンプルです。

テンプレートでカウントダウンタイマー付きを選んで、日にち等をセットし終わっていることが条件です。(タイマーの設置は左上の「使い方」のほうで参照してください)

記事内タイマー01
.

この部品は、上記のように文字としてのカウンダウン部品です。文字の色は自由に変えられます。何箇所配置してもOKです。

文字の色はエディターではなくコードを編集します。編集の仕方はこの右下にある解説ボタンを押してください。

「期間タイマー」をセットしたサイトに配置すると、終了後は、セットした終了後の文字に切り替わりそのまま残ります。

「クッキータイマー」をセットしたサイトに配置すると、終了後はサイトから消えて見えなくなります。

「記事内タイマー01」編集解説
テンプレートでタイマー付きを選択して日にちとうのセットをしてあれば、あとは配置ボタンで配置すればそのまま動き出します。
この部品は 文字の色を変えられます。
<div class="aka" style="color: #1652a4;">.</div> こんな記述が部品内にあります。 ピンクの部分が文字の色のコードなので好きな色のコードと差し替えてください。(コードは右上にあるピッカーで作りコードをコピペして差し替えてみてください)
記事内タイマー02
.

この部品は、上記のように色を引いた帯の上に黒い文字のカウンタダウンがセンター配置で表示される部品です。何箇所配置してもOKです。入りきるなら他の部品内に入れても大丈夫です。

文字の色は固定ですが、帯の色は何色でも入れられます。エディターではなくコードを編集します。編集の仕方はこの右下にある解説ボタンを押してください。

「期間タイマー」をセットしたサイトに配置すると、終了後は、セットした終了後の文字に切り替わりそのまま残ります。

「クッキータイマー」をセットしたサイトに配置すると、終了後はサイトから消えて見えなくなります。

「記事内タイマー02」編集解説
テンプレートでタイマー付きを選択して日にちとうのセットをしてあれば、あとは配置ボタンで配置すればそのまま動き出します。
この部品は 文字の色はこていですが、帯の色は変えられます。
<div class="time-ps02" style="background-color: #d3fff0;">
こんな記述が部品内にあります。 ピンクの部分が帯の色のコードなので好きな色のコードと差し替えてください。(コードは右上にあるピッカーで作りコードをコピペして差し替えてみてください)
記事内タイマー03
.

この部品は、上記のように色を引いた帯の上に白い文字のカウンタダウンがセンター配置で表示される部品です。何箇所配置してもOKです。入りきるなら他の部品内に入れても大丈夫です。

文字の色は固定ですが、帯の色は何色でも入れられます。エディターではなくコードを編集します。編集の仕方はこの右下にある解説ボタンを押してください。

「期間タイマー」をセットしたサイトに配置すると、終了後は、セットした終了後の文字に切り替わりそのまま残ります。

「クッキータイマー」をセットしたサイトに配置すると、終了後はサイトから消えて見えなくなります。

「記事内タイマー03」編集解説
テンプレートでタイマー付きを選択して日にちとうのセットをしてあれば、あとは配置ボタンで配置すればそのまま動き出します。
この部品は 文字の色はこていですが、帯の色は変えられます。
<div class="time-ps02" style="background-color: #FF0000;">
こんな記述が部品内にあります。 ピンクの部分が帯の色のコードなので好きな色のコードと差し替えてください。(コードは右上にあるピッカーで作りコードをコピペして差し替えてみてください)
記事内タイマー04
.

この部品は、上記のように点線ではさまれたカウンタダウンがセンター配置で表示される部品です。何箇所配置してもOKです。入りきるなら他の部品内に入れても大丈夫です。

点線の色は固定ですが、文字の色は何色でも入れられます。エディターではなくコードを編集します。編集の仕方はこの右下にある解説ボタンを押してください。

「期間タイマー」をセットしたサイトに配置すると、終了後は、セットした終了後の文字に切り替わりそのまま残ります。

「クッキータイマー」をセットしたサイトに配置すると、終了後はサイトから消えて見えなくなります。

「記事内タイマー04」編集解説
テンプレートでタイマー付きを選択して日にちとうのセットをしてあれば、あとは配置ボタンで配置すればそのまま動き出します。
この部品は 罫線の色はこていですが、背景色と文字の色は変えられます。
<div class="time-ps04" style="background-color: #FFFFFF;">
こんな記述が部品内にあります。 ピンクの部分が帯の背景の色のコードなので好きな色のコードと差し替えてください。(コードは右上にあるピッカーで作りコードをコピペして差し替えてみてください)
<div class="aka" style="color: #000000;">.</div>
こんな記述が部品内にあります。 ピンクの部分が文字の色のコードなので好きな色のコードと差し替えてください。
タイマー連動エリア部品 (期間タイマーでもクッキータイマーでも使えます)
is

タイマーの期間中に表示されるエリアです。

タイマーの期間が切れた後に表示されるエリアです。

is

この部品は、セットしたタイマーに連動して動きます。2つの部品配置エリアがあり、タイマーの期間中と期間後でそのエリアが自動で切り替わります。エリア内は何をいれても構いませんので部品類を使いくんでいっても良いし文字をいれて文章を切り替えても良いし使い方は自由です。 クッキータイマーで使うなら、値段と購入ボタンを2つ作りそれぞれのリンク先を別々にセットして、期間割りにきなどもできます。使い方は自由です。この部品は消えずに切り替わる部品です。

「はみだし帯-01」編集解説
<!-- ○○○○期間内エリアここから○○○○ -->
<p class="ps">タイマーの期間中に表示されるエリアです。</p>
<!-- ○○○○期間内エリアここまで○○○○ -->
こちらの注釈内に部品等をはいちしていきます。上記はタイマーの期間内に表示される部品のエリアです。
<!-- ○○○○期間終了後エリアここから○○○○ -->
<p class="ps">タイマーの期間が切れた後に表示されるエリアです。</p>
<!-- ○○○○期間終了後エリアここまで○○○○ -->
こちらの注釈内に部品等をはいちしていきます。上記はタイマーの期間終了後に表示される部品のエリアです。
タイマー連動サンプル (期間タイマーでもクッキータイマーでも使えます)
os
期間限定(初観覧から3日間)のタイムセール割引!

期間内にご購入の場合は、20,000円を15,000円に割引させて頂きます。

.
  • 15,000
  • (税込)
解説PDF・50ページ / DVD・2枚
os
  • 20,000
  • (税込)
解説PDF・50ページ / DVD・2枚
os
os

この部品は、上記の部品に価格と購入ボタンをそれぞれセッットした参考的な部品です。文字を打ち替えて使っても構いません

このサンプルは期間タイマーにセットされているのですごく日にちが残っていますが、この感じでの使い方ならクッキータイマーで初観覧から3日間とかという使い方が良いかと思います。

「はみだし帯-01」編集解説
この部品は、上の部品を使いそれぞれのエリアに部品を入れて組んでみたサンプルです。こんな宮にタイマー自体を期間内のエリアに入れると効果的です。このまま孤児を打ち替えて使ってもOKです。
実際に動きを確かめるには

実際にセットした部品がタイマーと連動して切り替わるかどうかを確かめるには、

「期間タイマー」なら試しに過去の時間をセットしてみると切り替わっているかどうかがわかります。

切り替わる瞬間を見るなら、何年何月何日の何時までセットできるので、近い時間にセットすれば切り替わる瞬間が確認できると思います。

「クッキータイマー」こちらは初観覧から最短でも1日なので、1日まつしかないのでチャンスは1日に1回いだけです。のがすと以降は通常部品は消えてしまいますし、切り替えエリア部品は切り替わった後の表示になってもうタイマーは出てきません

(クッキ名の設定をかえれば、クッキータイマーはリセットされます)でも切り替わる瞬間を見るのは1日に1回いだけのチャンスなのでなかなか厳しいです。

os
os