★Webページ作成支援~Simple Style★

文字を点滅させる(font blink)

文字を点滅させるメソッドに.blinkというものがありますが、Internet Explorer(IE)で対応していませんので、実用的ではありません。
そこで、文字を点滅させるスクリプトを作成しました。
クラス要素で作成しましたので、複数の文字を点滅させることができます。

サンプル

文字を点滅させる(赤)

文字を点滅させる(緑)

文字を点滅させる(黒)

ソース

JavaScript
<script type="text/javascript">
//-------------------------------------------------
// 文字を点滅させる(複数ヶ所)
// * Blink.js *
// msec=700; 点滅速度(ミリ秒)0.7秒間隔で繰返し実行
//-------------------------------------------------
var msec = 700; //点滅速度 小さい数字ほど早くなる
var count = 0;
var obj = document.getElementsByTagName("*");
function blink() {
  for( var i=0;i<obj.length;i++ ){
    if(obj[i].className.match(/blink/)){
    if (obj[i].style.visibility=="hidden")
    obj[i].style.visibility = "visible";
   else
    obj[i].style.visibility = "hidden";
  }
 }
}
setInterval( blink, msec );
</script>

<span class="blink" style="font-size : 12px; color : red; 
font-weight : bold;">文字を点滅させる</span>

設置方法

設置
サンプルソースの内容を、使いたいページの<body>~</body>内に記述します。
<span>~</span>は、文字を点滅表示している部分。
blinkクラスにスタイルを直接記述しています。


調整
点滅速度は、好みに応じて数字を変更します。
点滅させる文字などは、任意の文字に変更してください。

外部ファイルを指定する

スクリプトを外部ファイルに記述して読み込ませる場合は、
<script type="text/javascript"> と </script>を除いた、スクリプトだけを記述した内容で別にファイルを作ります。
拡張子は、*.js です。
これをscript要素のsrc属性でファイル名(URL)を指定して読み込みます。
例として「Blink.js」というファイル名にします。
保存場所はHTMLファイルと同じフォルダ内とします。
使いたいページの<body>~</body>内に記述します。
charcet="UTF-8" は記述している文字コードの指定です。
ここでは UTF-8 を使用していますが、"Shift_JIS" など他の文字コードの場合は変更します。
(HTML5では、type属性のデフォルトは、JavaScript のため省略可能ですが、ここでは敢えて記述しています。)

HTML
<body>
<script type="text/javascript" src="Blink.js" charset="UTF-8">
</script>
<span class="blink">文字を点滅させる(赤)</span>
</body>

スタイルシートの定義

スタイルシート
要素に設定するスタイル情報をHTML文書中に記述します。
head要素内(<head>~</head>)、
styleタグ(<style type="text/css"><!-- --></style>)の間に定義します。
<style type="text/css">スタイルの指定</style>


if(obj[i].className.match(/blink/)) 行の「blink」と、
同じクラス名(.blink)でスタイル定義しておく必要があります。
フォントサイズ、色や太さなどはここで指定します。

CSS
<style type="text/css">
.blink {
  font-size : 16pt;
  font-weight : bold
  color : red;
}
.blink02 {
  font-size : 14px;
  color : green;
}
.blink_03 {
  font-size : 12px;
  font-weight : bold;
  color : black;
}
</style>


外部のスタイルシートファイル
外部のスタイルシートファイルで定義している場合はlinkタグを使って読み込ませます。
head要素内(<head>~</head>)に記述します。
例:スタイルシートファイル”style_text.css”をリンクさせる。
<link rel="stylesheet" href="style_text.css" type="text/css">

スタイルシートに関して詳しくは、「スタイルシートについて」を参照するか、その関連の本を参照してください。


スタイルシートを使用しない場合
スタイルシートを使用しない場合は、要素に直接記述します。
クラス名:blink
フォントサイズ:16ピクセル フォントの太さ:太い フォント色:赤;
HTML
<body>
<script type="text/javascript" src="Blink.js" charset="UTF-8">
</script>
<span class="blink" style="font-size:16px; font-weight:bold; color:red;">
文字を点滅させる(赤)</span>
</body>
ラインを表示