カウントダウンタイマー付き「準備中ページ」テンプレートを無料配布!

ページを開くと、無機質な「メンテナンス中」の表示。誰もが一度は見たことがあると思います。文章のみが表示されると、なんだか寂しいですよね。だからと言ってメンテナンスページを作るのに時間をかけたくない…。そんな方のために、カウントダウンタイマー付きの「準備中ページ」テンプレートをご用意しました!ご自由にお使いくださいませませ。


Coming Soon テンプレート デモを見る
ダウンロード
デモ

仕様

  • 無料
  • 商用サイトでの利用可
  • 日付設定するとカウントダウン可能
  • Chrome、Safari、Firefox、iOS、IE7〜9、Operaで動作確認済

タイマーの設定

タイマー設定は index.html の <head></head>内にある

$(function () {    
     $('#countdown').countdown({until: new Date(2013, 9 - 1, 28)});
});

until: new Date(2013, 9 - 1, 28) の部分をいじります。この例では2013年9月28日を期限に設定しています。私の誕生日です。”-1″は気にしなくてOK。さらに詳しい設定方法はリファレンスサイトをご覧ください。

背景色の変更

背景画像にはグレーの透過PNGを仕様しているので、CSSで背景色を変更するだけで好みの色+縦縞の背景が表示されます。デフォルトでは青色になっています。文字色などもテーマカラーにあわせて変更してください。

.htaccessでリダイレクト

このファイルをメンテナンス画面として設定する場合は、.htaccessでリダイレクトさせると便利です。下記コードのファイル名や日時などを変更してください。

利用上の注意

利用の際は以下を守ってくださいね。

  • アダルト系サイト、反社会的な内容や暴力的・猟奇的表現を含むサイト、違法サイト(マルチ商法まがいの内容も含む)での利用を禁止します。
  • このテンプレートを使用したことによるいかなる損害・損失・第三者と生じた紛争等について、一切責任を負いません
  • 不具合報告は受け付けておりますが、カスタマイズ方法など、技術的サポートは致しかねます。

このテンプレートの作り方などは次回の記事で説明しようと思います。バグがあれば報告お待ちしてます!

シェアする

コメント

“カウントダウンタイマー付き「準備中ページ」テンプレートを無料配布!” への6件のフィードバック

  1. ぽちたま より:

    こんばんわー
    いつも勉強させていただいてます!将来manaさんのようなwebクリエイターになりたいと思っています!
    これからも素敵なweb知識を教えてくださいね。

  2. かみを より:

    はじめまして、仕事の参考に、と勤務中に楽しませてもらっています。(もちろん勉強もさせていただいてます!)
    このタイマー設置しちゃうと追い詰められそうな気がする~~
    そのくらいがちょうどいいかな?

  3. TakeoOgino より:

    リンク切れのようなので復活していただきたいです!

  4. 失礼しました!復活させたのでご確認ください!ご報告ありがとうございました!

  5. […] カウントダウンタイマー付き「準備中ページ」テンプレートを無料配布! […]

  6. […] 病院の待合室で何時間も待たされ、「暇だしWebサイトでも作ろっかなー」なんて思った事はありませんか?きっとあまりないと思いますが、今年にはいっていろいろあった私はそんな機会がたくさんあったので、いくつかのiPadアプリを使って作ってみました。作ったHTMLテンプレートは無料配布しています!そうです、アレ、iPadで作ったものだったのです。ふふ。 […]

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)