貼付け用のコンパクトなカウントダウンカレンダーを簡単に作れる-Countdown Calendar - 適宜覚書-Fragments

貼付け用のコンパクトなカウントダウンカレンダーを簡単に作れる-Countdown Calendar

   

Countdown Calender

簡単カウントダウン

簡単カウントダウン

はじめに

カウントダウンタイマーというと、昔からワンポイントアクセサリみたいな感じでよくJavaScriptを使った習作みたいな感じで紹介されていたものです。今となってみると、ちょっと懐かしい感じのものになってしまいましたが、それでも何かの記念日とか、集まる催しの日とか、何か欲しいものの発売日とか、ある日付に対してのカウントダウンは目を引くものです。

今回紹介するカウントダウンタイマーは、貼付け用にCountdown Calendarで作ってみます。コンパクトなものを簡単に作れるので、思いつきですぐ使いたい…という際重宝すると思います。

Countdown Calendarでカウントダウンタイマーを作る

  1. Birthday countdown calendar creatorをWebブラウザで開きます。

    Countdown Calender

    Countdown Calender

  2. 画面左にあるメニューから設定を行うことで自分の要望にあったカレンダーを制作します。以下は、例として結婚記念日を11/3ということにして作成してみます。
  3. Pre-defined calendars:既定でテンプレート設定がされており、選択するだけで一般的な設定が出来る項目です。インスタントで作りたい場合、便利です。試しにここで「Wedding」を選択してみます。

    Pre-defined calendars

    Pre-defined calendars

  4. すると、Wedding用のテンプレート画面に移動します。中央のプレビューも既にそれっぽいものになっていますね。そのままで良ければすぐにでも使えますが、カスタマイズも出来ます。少なくとも日付は変えたいですね。

    Weddingのテンプレート

    Weddingのテンプレート

  5. Titleは表示させるイベントの名称を入力します。既定ではWeddingですが、結婚式に書き換えました。見てのように英語圏のサービスですが日本語も問題なく反映します。

    イベント名の指定

    イベント名の指定

  6. imageはカレンダーに表示されるワンポイントアイコンです。自分で画像を用意する必要はありません。imageの下にある画像をクリックすると利用できるアイコンがリスト表示されます。

    ワンポイントアイコンの選択

    ワンポイントアイコンの選択

  7. CountdownTypeはカウントダウンの際、Days(日付とおおよその時間単位)、またはTimer(日付と時分秒単位)とするかの選択です。イベントの種類や見せ方をどう考えるかで選択します。

    カウントダウンの種類

    カウントダウンの種類

  8. Dateはターゲットとなる予定日です。日付の欄をクリックすると下図のようにカレンダーがプルダウンで表示されるので、予定の日を表示してクリックするだけで入力が出来ます。

    予定日の指定

    予定日の指定

  9. Timeで予定日の中で更に細かく時刻を指定できます。

    時刻の指定

    時刻の指定

  10. 以降はオプションの設定です。Whereはイベントの場所、MoreInformationは自由入力でコメント、URLはEditをクリックすることでリンクとして追加可能です。今回のサンプルではオプションは指定しません。

    オプション設定

    オプション設定

  11. 画面中央のプレビューは設定を追加するごとに変更を反映します。またプレビューの下のコードも同様に変更されます。

    プレビューと貼付けコード

    プレビューと貼付けコード

  12. Get HTML Codeをクリックするか、コードをコピーして、埋め込みたい場所に張り付けます。

おわりに

ステップバイステップで書いたので長くなりましたが、実際に作る場合はあっという間に簡単に作れるはずです。画面右の配色設定で色合いを変更することも簡単に出来ます。気に入ればお試しを(゚∀゚)

…と言いつつ実例としてここに張り付けようとしたら失敗してしまったりorz。ローカルに作ったhtmlでは問題なく動作確認できたので、何かWordpressの仕組みとぶつかってるようです。

(Photo By Graham Binns:http://www.flickr.com/photos/codedragon/3927393760/)

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Webサービス, WordPress, レビュー , ,