Webサイト上で時間やカウントダウンをデジタルに表示する機能は、ユーザーの視覚的な興味を引くと同時に、重要な情報を直感的に伝えるのに役立ちます。例えば、セールの終了時間や次のイベントの開始時間などを表示する際には、視覚的にわかりやすいデジタル表示が効果的です。この記事では、そんなデジタル表示を簡単に実現できる「jquery.classyled.js」というプラグインを使った方法をご紹介します。
jquery.classyled.jsとは
「jquery.classyled.js」は、jQueryをベースにしたプラグインで、時間やカウントダウンをデジタル形式で表示することができます。このプラグインを使用することで、複雑なコードを記述することなく、視覚的に洗練されたデジタル表示を簡単に導入することが可能です。初心者の方でも、基本的な設定を行うだけで、すぐに使い始めることができるのが魅力です。
デジタル表示のメリット
Webサイトに時間やカウントダウンをデジタル表示することで、以下のようなメリットが期待できます。
- ユーザーの注目を集めやすい：動的に変化する数字は、ユーザーの視線を自然に引き寄せます。
- 情報伝達が直感的：数字は普遍的な情報形式であり、言語に依存せずに理解されやすいです。
- ブランドイメージの強化：視覚的に洗練されたデザインは、ブランドのプロフェッショナルなイメージを強調します。
時間やカウントダウンの数字をデジタルに表示するCSSの記述
まず、デジタル表示のスタイルを設定します。以下のCSSコードは、背景を黒くし、文字色を白に設定する例です。文字の大きさやデザインは、自由にカスタマイズできますので、Webサイトのデザインに合わせて調整してください。
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:18px;
font-weight:bold;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:700px;
margin:0 auto;
text-align:left;
}
#led0,#led1{
background-color:#000;
}
-->
</style>
時間やカウントダウンの数字をデジタルに表示するJavaScriptの読み込み
次に、必要なJavaScriptファイル、jquery.min.js（1.8.3）、raphael.js、jquery.classyled.jsを読み込みます。
これにはjQuery、Raphael.js、そして今回の主役である「jquery.classyled.js」が含まれます。これらをHTMLに追加することで、デジタル表示の機能が動作するようになります。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/raphael.js"></script>
<script src="js/jquery.classyled.js"></script>
デジタル表示を実現するHTMLの記述
以下は、デジタル表示を行うためのHTMLコードの例です。このコードでは、4つの異なるデジタル表示パターンを設定しています。それぞれのパターンは、フォーマットや表示形式が異なり、様々なニーズに対応できるようになっています。
<h1>時間をフォーマット化しデジタルに表示します。</h1>
<div id="led0" class="autosize"></div>
<br />
<div id="led1" class="autosize"></div>
<p>フォーマット＝hh:mm</p>
<div id="led2" class="autosize"></div>
<p>フォーマット＝hh:mm:ss</p>
<div id="led3" class="autosize"></div>
jquery.classyled.jsを使って時間やカウントダウンをデジタルに表示するJavaScriptの記述
「jquery.classyled.js」を使うことで、時間やカウントダウンの表示形式を簡単にカスタマイズできます。
以下は、その具体的なコード例です。各パターンの設定項目には、表示する要素のIDやフォーマット、文字色、背景色、サイズなどを指定します。これらを変更することで、表示スタイルを柔軟に調整できます。
new ClassyLED({タグid , 表示情報（時間やカウントダウン） , フォーマット方法 , 文字色 , 背景色 , フォントサイズ , ドットの丸み})で表示方法を指定します。4パターンの表示を用意しました。必要に応じて変更して下さい。
<script>
$(document).ready(function() {
var l0 = new ClassyLED({
id : "led0",
type : "countdown",
format : "ddd:hh:mm:ss",
color : "#eee",
bgcolor : "#000",
size : 8,
rounded : 1,
led : "font1"
});
var l1 = new ClassyLED({
id : "led1",
type : "random",
length : 7,
color : "#af0",
bgcolor : "#101a10",
size : 8,
rounded : 6
});
var l2 = new ClassyLED({
id : "led2",
type : "time",
format : "hh:mm",
color : "#f0a",
bgcolor : "#222",
size : 10,
rounded : 4
});
var l3 = new ClassyLED({
id : "led3",
type : "time",
format : "hh:mm:ss",
hourformat : 12,
color : "#fa0",
bgcolor : "#222",
size : 10,
rounded : 0
});
});
</script>
jquery.classyled：時間をフォーマット化しデジタルに表示するデモページ
ここまでの手順を踏むことで、Webサイト上に実際に時間やカウントダウンをデジタル表示することができます。例えば、以下のリンクからデモページにアクセスして、実際の動作を確認することが可能です。
jquery.classyled：時間をフォーマット化しデジタルに表示するデモページ
このデモページでは、様々なデジタル表示のパターンを試すことができ、実際の使用感を確認できます。自分のWebサイトに取り入れる際の参考にしてみてください。
まとめ
「jquery.classyled.js」を使えば、簡単にWebサイト上で時間やカウントダウンをデジタルに表示することができます。視覚的なインパクトが強く、情報伝達もスムーズになるため、サイトの魅力を一段と引き上げることが可能です。簡単に導入できるこのプラグインを使って、ぜひ自分のサイトにデジタル表示を追加してみてください。きっと、ユーザーの注目を集める素晴らしい効果を実感できるでしょう。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
