ども。
私もついに！地デジ対応の薄型テレビを購入することができました。実は明日到着予定なのですが、今から楽しみでしょうがない担当ちゅんです。
昨日から、当ウェブサイトのトップページにアナログ放送終了までのカウントダウンタイマーを設置しております。もうごらんになりましたでしょうか。
既にご存知かとは思いますが、現在の地上アナログ放送は2011年7月24日に終了します。本日現在であと361日。とうとう1年をきりました。そこで、町としても住民の方への周知PRを行うため、こうしたバナーと、地デジに関する状況提供を行っています。
さて。今日はずいぶんとおとなしめな記事だと思った方は、どうぞここからは全て読み飛ばし、地デジのページでも見に行ってください。今日は、これまでに類を見ないほどマニアックな内容となります。
=====================================
実は、このカウントダウンですが、個人的にはとってもハイレベルな仕事でした。構想としては単純で、バナーのイメージの上に数字を重ね、その数字が指定日まで自動的にカウントダウンする仕組みなのですが、これがなかなか大変です。
まず、画像をそのまま貼り付けてしまってはその上に数字をおくことができませんので、バナーの画像は背景におきました。さらに、それをクリックして別ページに飛ばしたいので、スタイルは工夫してDIVタグに次のように書いてみました。
style="display: block;
background: url(http：//www.town.yakumo.lg.jp/images/banners/tv.jpg);
width: 180px;
height: 80px;
position: relative"
こうすることで、幅180px高さ80pxの塊をつくり、そこに背景を表示できます。
次に、数字をカウントダウンさせるわけですが、まずどうやって数字を変えているかといいますと、これはJavaScriptを使っています。参考にさせていただいたのは「JavaScript便利帳」というサイト。私はJavaScriptを一から起こす能力がないので、こうしたサイトを参考にさせていただきました。スクリプトの使用・改造は自由とされており、たいへん助かります。
0～9まで数字の画像を作り、このスクリプトを使うと、ちゃんとアナログ放送終了までの日数をカウントダウンしてくれました。あとは、数字の表示する位置としてSPANタグに次のように書くと、完成です。
style="left: 100px;
top: 44px;
position: absolute;"
位置を背景画像の上から44px,左から100pxの位置に表示したいという設定。ここで位置を決めるためにposition:absoluteを使いたいので、わざわざ親要素にposition:relativeを仕込みました。
=====================================
と、完成するとまるで素人が作ったとは思えない、しっかりしたバナーとなるわけです。実はこのバナーには秘密がありまして、使用したがぞ…うぉっほん、これ以上は言えません！
毎日減っていく数字を眺めていると、それだけで悦に入ってしまうちゅんでした。
ようやくどうどうと「お早めに！」と言えるようになりました。
