カウントダウンタイマー

ブログやホームページで使えるカウントダウンツールです。
オリジナルカウントダウンタイマーで記念日、締め切り日までをCOUNTDOWN
カウント終了時間やコメントの設定が簡単に設定でき、ブログパーツとして貼り付けたりできます。カウントアップもできます。

応用テクニック

もっとかっこよくしてみたいとかそういった理想と誇りの高い勇者に向けたなんかです。

 
  • カウントダウンをループする

入力項目「ループ」にループさせたい日数を入れてください。
一定日数ごとにカウントダウンしなおします。
例として、ループを7日にセットすれば毎週同じ曜日にカウントダウンが終了します。

カウントダウン終了から次回カウントダウン開始まで更新に1分ほどかかる場合があります。(更新ボタンを押すなどしてみてください。)

 
 
  • 文字のポジションを整える

文字と背景の融合は難しいですよね。人間は諦めが肝心です。でもこんなことができたりして。

せっかくのエビちゃんも顔が隠れては「なんだかなぁ」て感じです。
というわけで、上の飾り付けでのテク<br>を使いましょう。前コメントの「エビちゃんの誕生日まで」の前に<br>を入れます。ひとつで顔が現れたりデザイン的にOKが出たら写真に向かって微笑みかけても誰も文句は言いません。
「まだ顔隠れてるよ」って言われたらもう一個<br>を加えます。「<br><br>エビちゃんの誕生日まで」こんな感じです。でも、僕、4つ入れました。それでやっとエビちゃん登場。気に入るレイアウトになるまで<br>を駆使してください。

「色とかあんまりイケてないなぁ」と思ったのでいろいろ修正してみます。

文字色が見えにくいですが、皆さんはもっと上手にやってみましょう。

こういう手もあります

「エビちゃんの誕生日まで<br><br>」ってやっただけです。これでコメントとタイマーとを離すことができますね。

 
 
  • ページ内の好きなところにおきたい

発行されたタグ「<script ~~ /script>」の前に<p align="center">、後ろに</p>って入れると真ん中によります。

<p align="center"><script ~~ /script></p>

<p align="center">のcenterleftに変えると左に、rightで右に寄るようになります。

 
 
  • 文字をさらに飾る

応用を利かすことでさらにオリジナリティを出すことができます

初期設定ではコメントは単色ですが、タグ(意味がわからなくてもOK)を入れることでカラフルにもできます。(コメントだけに適応です)

」といった感じです。文字の色を変える

」と背景色も変えられます。背景色を変える

」と組み合わせも可能です。組み合わす

 

色などを変えるための基本的な方法は

<span style='タグ'>コメント</span>

です。

「タグ」は色などの設定、「コメント」はタイマーに表示する文字です。タグはすべて半角です。「"」は使わないでください。

 

文字色を変える

 : <span style='color:#ff0000'>赤</span>

今回、文字色は赤なのでタグは「color:#ff0000」(#ff0000は赤をあらわします。「color:red」でもOKです)。

なら「color:#ff0000」、黄色は「color:#ffff00」、は「color:#00ff00」

組み合わせて「」とする場合は

<span style='color:#f00'>カ</span><span style='color:#ff0'>ラ</span><span style='color:#0f0'>フ</span><span style='color:#00f'>ル</span>

クリックするとカラーコードが出ます

 

文字の背景色を変える

文字色を変えると基本は同じです。タグを

 : <span style='background-color:#ff0000'>赤</span>

とします。タグは「background-color:#ff0000」

 

組み合わせる

2つ以上を組み合わせるときはそれぞれのタグの間を「;」で仕切ります。

文字黄色、背景赤 : <span style='color:#ffff00;background-color:#ff0000'>文字黄色、背景赤</span>

基本的な使い方の飾り付けと組み合わせることもできます。

 : <span style='background-color:#f00;color:#ff0'><b><big>カ</big></b></span><span style='background-color:#000;color:#0f0'><small>ラ</small></span>フ<span style='background-color:#fff;color:#0ff'>る</span>

 

他に使えそうなタグ

たくさんあって載せきれませんが、「css」「スタイルシート」などで検索すると出てきます。

用途 タグ 使い方例
文字の大きさ font-size font-size:15px
文字を太く font-weight:bold <b></b>でもOK

けっこう長くなっちゃいますね。テキストエディタとかで作ってからやったほうがいいと思います。↓コピペするときにでも使ってください。

よく使いそうなタグ
span style=';' color: background-color: font-size: カラーコード

カウントダウンタイマーを作成する
 
 
  • 画像をのせる

文字をさらに飾る同様、タグを使います。

これは画像です→
これは画像です→<img src='http://countdown.reportitle.com/img/aikon02.jpg'>

http://~は画像が置いてあるURLです(ちなみのこの画像はこのサイトのアイコンです)。透過していないと上のように画像に四角い枠が出てしまうことがありますので、背景色や背景画像と相談して見てください。

他サイトの画像を使うときは、著作権に気をつけるようにしましょう。