無料ブログパーツサンプル集。ダウンロード不要、簡単設置。ひと味ちがうものもあるのだ！
ブログパーツをさがせ
最新の記事
- [07/02] 美しい地球のブログパーツ「live earth」
- [07/02] 気の合うお友達をマッチングしてくれるブログパーツ「ブロ＋ブロ」
- [07/01] 海のレジャーに！波高・風向きがわかる「海快晴のブログパーツ」
- [07/01] 夏を感じるブログパーツ2種 扇風機と蚊取り豚
- [06/30] オセロ、五目並べのFlashブログパーツ
- [06/28] 知床の森を育てよう！「Discover Shiretoko」ブログパーツ
- [06/27] JS-Kitで得られたデータを元に人気のページを表示するJS-Kit Navigator
クリスマス、新年、お好みの日をカウントダウン表示させよう
最近カウントダウンの需要が高いようなのでJavaScriptを紹介しておこう。クリスマスや年越し・お誕生日など、設置も簡単なので、お好きなように改造してどぞ。
これは、本当に貼った例。
表示サンプル例。日付によって４種類の表示ができるようにしています。
- 目標までカウントダウン
- ★2007年まで、あと00日です★
- 目標の前日
- ★今日はいよいよ大晦日ですね★
- 目標の日
- ★新年あけましておめでとうございます★
- 目標から何日経過
- ★2007年を迎えて００日経ちました。★
JavaScriptを貼れるブログなら、以下をずらっとマウスで選択、「コピー」して貼り付けたい場所に「貼り付け」するだけで動作します。
<script language="JavaScript"><!--
var now = new Date();
var point = new Date(2007,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
var countup = 0 - countdown;
if(countdown > 1) {
document.write('<br><span style="color:hotpink;font-weight:bold;">★</span>2007年まで、あと', countdown ,'日です<span style="color:hotpink;font-weight:bold;">★</span><br>');
}
else if(countdown == 1) {
document.write('<br><span style="color:darkturquoise;font-weight:bold;">★</span>今日はいよいよ大晦日ですね<span style="color:darkturquoise;font-weight:bold;">★</span><br>');
}
else if(countdown == 0) {
document.write('<br><span style="color:springgreen;font-weight:bold;">★</span>新年あけましておめでとうございます<span style="color:springgreen;font-weight:bold;">★</span><br>');
}
else {
document.write('<br><span style="color:darkorange;font-weight:bold;">★</span>2007年を迎えて', countup ,'日経ちました。<span style="color:darkorange;font-weight:bold;">★</span><br>');
}
// --></script>
var now = new Date();
var point = new Date(2007,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );
var countup = 0 - countdown;
if(countdown > 1) {
document.write('<br><span style="color:hotpink;font-weight:bold;">★</span>2007年まで、あと', countdown ,'日です<span style="color:hotpink;font-weight:bold;">★</span><br>');
}
else if(countdown == 1) {
document.write('<br><span style="color:darkturquoise;font-weight:bold;">★</span>今日はいよいよ大晦日ですね<span style="color:darkturquoise;font-weight:bold;">★</span><br>');
}
else if(countdown == 0) {
document.write('<br><span style="color:springgreen;font-weight:bold;">★</span>新年あけましておめでとうございます<span style="color:springgreen;font-weight:bold;">★</span><br>');
}
else {
document.write('<br><span style="color:darkorange;font-weight:bold;">★</span>2007年を迎えて', countup ,'日経ちました。<span style="color:darkorange;font-weight:bold;">★</span><br>');
}
// --></script>
- 【お好み設定】
- 赤文字部分がカウントダウンしたい日付。上のサンプルは2007年の1月1日に設定しています。他にもクリスマスとか誕生日など、お好きなように。
- 青文字部分は表示される文章。こっちもお好みで変更可能。「''」単位の「,」区切りで順序も変えることができます。
- 緑文字部分は、改行（<br>）部分。実際に表示される文章の前後を改行ナシで表示したかったら削除してください。
- ピンク文字部分は色やスタイルを変えた見本。はさんで使います。上の例では★がそれぞれの色に変わっています。このタグを使って好きな場所を好きな色に。
ありゃ、いろいろ盛り込んだらわかりにくい？そんな方は、もっとシンプルな元ネタさん、All Aboutの「ページ作成TIPS ［10］ 新年まで毎日カウントダウン」へどうぞ。
- 2005-11-26 [e]
- 時計・カレンダー カウントダウン
- コメント : 43
- ト: 2
- ▲
43件のコメント
＞りょーちさん
2005-11-27 [1025]
りょーちさんのおかげで、来週もうちは安泰です^^
これ、ほんとにかわいいですね。サンタ続きで先に紹介させていただこうかな。ほんとにありがとうございます。
これ、ほんとにかわいいですね。サンタ続きで先に紹介させていただこうかな。ほんとにありがとうございます。
はじめまして〜
2005-12-10 [1091]
はじめまして〜
はじめてのコメントですが、いつも大変お世話になっています。
是非、このカウントダウンのスクリプト、使わせて下さい！
これからも、応援してますので
どうぞ頑張って下さいね！
はじめてのコメントですが、いつも大変お世話になっています。
是非、このカウントダウンのスクリプト、使わせて下さい！
これからも、応援してますので
どうぞ頑張って下さいね！
はじめまして。
2005-12-28 [1214]
はじめまして。カウントダウン貼り付けました。
お友達の所でも、同じ物ありました。
また、寄らせて頂きますね。
じっくり拝見して勉強させて頂きますね。
（dynaweather.com）きっと 初歩的な質問ですが
2005-12-29 [1224]
いつもお世話になっています。待ち遠しい≪早く冬休みが終わって欲しいカレンダー≫にしました。字の大きさを変えるのは どうしたらヨイのでしょうか？よろしくご指導をお願いします。
海岸通りさんへ
2005-12-29 [1226]
はいはい。こちらをお使いください。
<div style="font-size:10px;">
ここにScriptをコピー
</div>
もしもこれで文字が大きすぎたり小さすぎたりするようなら、10の部分を14とか8とか変更して調整してください。
日替わりサプライズ。ネーミングもよいですねー。（スズメバチ痛そうでした^^）無事設置おめでとございました♪
<div style="font-size:10px;">
ここにScriptをコピー
</div>
もしもこれで文字が大きすぎたり小さすぎたりするようなら、10の部分を14とか8とか変更して調整してください。
日替わりサプライズ。ネーミングもよいですねー。（スズメバチ痛そうでした^^）無事設置おめでとございました♪
no title
2006-02-17 [1555]
はじめましてー！！
ブログパーツ使わせてもらってます！
すごくつけたかったので、このブログを見つけれてうれしかったです。
ブログ友達がつけ方を教えて欲しいそうなので
ブログ内で紹介させていただきました。
事後報告で申し訳ありませんがよろしくお願いします！
ブログパーツ使わせてもらってます！
すごくつけたかったので、このブログを見つけれてうれしかったです。
ブログ友達がつけ方を教えて欲しいそうなので
ブログ内で紹介させていただきました。
事後報告で申し訳ありませんがよろしくお願いします！
またまた
2006-02-28 [1658]
利用させていただきました。
というか、今までも、ちょこちょこ色んなパーツを使わせていただいてます。
今回はおめでたいことだったので、久々にお知らせをしようかと（笑）
本当にこちらにはお世話になりっぱなしです。
ありがとうございます。
というか、今までも、ちょこちょこ色んなパーツを使わせていただいてます。
今回はおめでたいことだったので、久々にお知らせをしようかと（笑）
本当にこちらにはお世話になりっぱなしです。
ありがとうございます。
satokoto
2006-03-03 [1664]
ありがとうございます。いやはやなんともおめでたい！
そしてmgmegさんところも遅くなりましたがおめでとうございます！！閏年だとどうなるんだろう・・パソコンの日付依存なので、多分閏年も大丈夫だとは思うのですが、自信なしですみません
そしてmgmegさんところも遅くなりましたがおめでとうございます！！閏年だとどうなるんだろう・・パソコンの日付依存なので、多分閏年も大丈夫だとは思うのですが、自信なしですみません
使わせていただきました**
2006-10-23 [2594]
学校で合唱コンクールがあります。
それも今年で最後です。。涙
カウントダウン、使わせていただきます（ﾉH｀●）
本当に、ありがとうございました！
それも今年で最後です。。涙
カウントダウン、使わせていただきます（ﾉH｀●）
本当に、ありがとうございました！
satokoto
2006-10-23 [2595]
ばっちり設置おめでとうございました。ステキに使ってくださって嬉しいです。
合唱コンクールまであと5日なんですね。のどに気をつけて、思う存分歌ってくださいねー！
合唱コンクールまであと5日なんですね。のどに気をつけて、思う存分歌ってくださいねー！
satokoto
2006-11-09 [2688]
ばっちりですね！設置おめでとうございました。
日本での結婚式は、準備期間は実際いろいろ大変だったりするんだろうけれど、悩んだりすること自体も楽しめそうで少しうらやましいです。
日本での結婚式は、準備期間は実際いろいろ大変だったりするんだろうけれど、悩んだりすること自体も楽しめそうで少しうらやましいです。
使わせていただきます（＾＾）
2006-11-27 [2783]
こんにちは。
昨夜こちらからコピペでクリスマス用に
使わせていただきました。
とてもかわいく、さりげない感じで
気に入っています。
クリスマス後はお正月にも使わせていただく
予定です。
コピペでできたので初心者の私にも
簡単に設置できました♪
ありがとうございました <m(__)m>
昨夜こちらからコピペでクリスマス用に
使わせていただきました。
とてもかわいく、さりげない感じで
気に入っています。
クリスマス後はお正月にも使わせていただく
予定です。
コピペでできたので初心者の私にも
簡単に設置できました♪
ありがとうございました <m(__)m>
satokoto
2006-11-27 [2787]
いよいよカウントダウンの季節がやってきましたね。ネコクリスマスがかわいい！
無事設置おめでとうございました＆こちらこそありがとうございました。
無事設置おめでとうございました＆こちらこそありがとうございました。
お世話になります<m(__)m>
2006-12-26 [2943]
お正月ver.使わせていただきます（＾＾）
いつもありがとうございます。
クリスマスverから変えようと思いましたが
どうしていいかわからず、こちらにきてみたら
ちゃんとお正月用が準備されていて助かりました！
早速お借りします。
コピペだと助かります（＾−＾）
いつもありがとうございます。
クリスマスverから変えようと思いましたが
どうしていいかわからず、こちらにきてみたら
ちゃんとお正月用が準備されていて助かりました！
早速お借りします。
コピペだと助かります（＾−＾）
おしえてください！
2008-02-14 [3917]
アメリカに経つ日までと アメリカで暮らし始めてからの日にちをカウントしたくて 昨日から 一生懸命やっているのですが どうしてもできません。
お忙しいところ申し訳ありませんが 教えてください。
プラグインのフリーエリア・”フリーエリア内容の変更” という欄にコピペしているのですが、プレビューでみると、タイトルだけ表示され あとは どうゆうわけか、『 １GB！ FC2ブログ（blog) 』 という１行が出来てます(-_-;)
どうしてでしょうか？？？
とってもシンプルで使いやすそうなカウントダウンなので ぜひ使わせていただきたく、お教えくださいますよう お願い致します。
お忙しいところ申し訳ありませんが 教えてください。
プラグインのフリーエリア・”フリーエリア内容の変更” という欄にコピペしているのですが、プレビューでみると、タイトルだけ表示され あとは どうゆうわけか、『 １GB！ FC2ブログ（blog) 』 という１行が出来てます(-_-;)
どうしてでしょうか？？？
とってもシンプルで使いやすそうなカウントダウンなので ぜひ使わせていただきたく、お教えくださいますよう お願い致します。
satokoto
2008-02-14 [3918]
全部のスクリプトが貼り付けられてないことが原因のようです。
とりあえず、今のままで表示させたい場合は、貼り付けたスクリプトの一番下に以下を追加してみてください。
// --></script>
これで一応表示はされるはずですが、いま貼り付けてあるスクリプトは途中で途切れちゃってるのでうまく機能しない可能性があります。
できればもう一度、グレー部分のスクリプトを上から下までもれなくコピーして、何も変更せずに貼り付けて、まずは正常に表示されるか確認。
それから文章や日付の調整をしてゆくとどこで表示されなくなったか後戻りしやすいような感じがします。（人それぞれですけどね＾＾）
まだおかしかったらお手数ですがもう一度コメント付けておいて下さいませー。（はなちゃん、かわいい！！）
とりあえず、今のままで表示させたい場合は、貼り付けたスクリプトの一番下に以下を追加してみてください。
// --></script>
これで一応表示はされるはずですが、いま貼り付けてあるスクリプトは途中で途切れちゃってるのでうまく機能しない可能性があります。
できればもう一度、グレー部分のスクリプトを上から下までもれなくコピーして、何も変更せずに貼り付けて、まずは正常に表示されるか確認。
それから文章や日付の調整をしてゆくとどこで表示されなくなったか後戻りしやすいような感じがします。（人それぞれですけどね＾＾）
まだおかしかったらお手数ですがもう一度コメント付けておいて下さいませー。（はなちゃん、かわいい！！）
もうひとつ 教えてください！
2008-02-14 [3919]
お返事 どうもありがとうございました！！
教えていただいたとおり 全部をコピペしてみたら ちゃんと出たので 青字の部分を変えてみました。
これも ちゃんとできて 感動です♪(笑）
ですが・・・
できれば 「はなちゃんがお空を飛ぶまで」 で１行として 行を変えて 「あと○○日です」 としたいのですが、どのようにしたら 行をかえることができますか？
<br>を使うことはわかっているのですが どこに入れればいいのかがわかりません・・・。
たびたび申し訳ありませんが、教えていただけたら嬉しいです・・・<(_ _)>
教えていただいたとおり 全部をコピペしてみたら ちゃんと出たので 青字の部分を変えてみました。
これも ちゃんとできて 感動です♪(笑）
ですが・・・
できれば 「はなちゃんがお空を飛ぶまで」 で１行として 行を変えて 「あと○○日です」 としたいのですが、どのようにしたら 行をかえることができますか？
<br>を使うことはわかっているのですが どこに入れればいいのかがわかりません・・・。
たびたび申し訳ありませんが、教えていただけたら嬉しいです・・・<(_ _)>
satokoto
2008-02-14 [3920]
おぉ！めでたく表示されましたね。
改行ですね。
「はなちゃんがお空を飛ぶまで、あと」の部分を
「はなちゃんがお空を飛ぶまで<br>あと」に変更するだけで改行されます。
<br>は入力したところの前後が改行されるので、他の文章もこの要領でやってみてください。
例）
今日はいよいよ大晦日ですね
↓
今日はいよいよ
大晦日ですね
この場合は
「今日はいよいよ大晦日ですね」の部分を
「今日はいよいよ<br>大晦日ですね」でOKです。
うまくゆきますように！
改行ですね。
「はなちゃんがお空を飛ぶまで、あと」の部分を
「はなちゃんがお空を飛ぶまで<br>あと」に変更するだけで改行されます。
<br>は入力したところの前後が改行されるので、他の文章もこの要領でやってみてください。
例）
今日はいよいよ大晦日ですね
↓
今日はいよいよ
大晦日ですね
この場合は
「今日はいよいよ大晦日ですね」の部分を
「今日はいよいよ<br>大晦日ですね」でOKです。
うまくゆきますように！
コメントの投稿
- トラックバック（言及リンクのないトラックバックは受信されません）
- http://satokoto.blog10.fc2.com/tb.php/340-67d75786
2件のトラックバック
お店のリニューアルオープンまでカウントダウン！
2005-12-31 [195]
２００６年の４月１４日にお店がオープンする予定ということをロベルトさんから聞い
人気のブログパーツ
ピックアップ
カテゴリから探す？
クリックするとサブカテゴリーが開閉します。
Tagから探す？
カテゴリより直感で探せるようになってます。検索で探す？
BlogParts Feed
ブログパーツ紹介サイトや関連ニュースの新着このブログの検索ワード
Powered By
バックアップ取ろうよキャンペーン
無料ブログだからこそ、やっておこう。
連続コメントもうしわけありません。
昨年も実施していたのですが、マンダムさんが期間限定でアドベントカレンダーのバナーを配布するようです。
http://www.mandom.co.jp/advent/
去年も張ってみたのですが、結構クリスマスまで楽しめます。
バナーがカウントダウンされるだけでなく、リンク先で日替わりでflashによる楽しいイベントがあるようです。
ご参考まで。ではでは。