ブログ上にテロップテキストを表示してみる
概要
ブログ上へ表示可能な、テロップテキストをjavascriptで作成してみました。
追記
marqueeタグって便利なのあったんですね~
<Marquee><font size="5" color="red">わずか1行で、テロップ表示!!</font></Marquee>
サンプル
関数部
<script type="text/javascript">// <![CDATA[-- function RunTicker(Text, Size, color) { if (typeof TickerIndex == "undefined") { TickerIndex = 0; } else { TickerIndex++; }; var TickerName = 'TickerText' + TickerIndex; var len = Text.length; var arrText = Text.split(''); var si = 0; document.write("<span id='" + TickerName + "'></span>"); var Ele = document.getElementById(TickerName); var id = setInterval(function () { var buftext = ''; for (i = 0; i < len; i++) { var ti = si + i - len; if (ti < 0 || ti >= len) { buftext += ' ' } else { buftext += arrText[ti] }; }; Ele.innerHTML = buftext.fontsize(Size).fontcolor(color); si++; if (si >= len * 2) { si = 0 }; }, 200); } // ]]></script>
表示部
<p><script type="text/javascript">RunTicker('これが、テロップテキストです。', 5, 'red');</script></p>
解説
javascriptコードです。
関数部を
はてな表記、または、HTML編集の一番上に貼り付けます。
※実際には、一番最初の"表示部"のコード以前であれば動作するはずです。
後は"表示部"のコードを表示したい場所へ置きます。
文字列の設定ですが
RunTickerの()の内容を、","(ドット)区切りで3個要素を設定してください。
要素の詳細は、以下の通りです。
RunTicker('[ココに表示したい文字列]', フォントの大きさを数値で指定, '表示色')
表示色についてですが
"red"、 "yellow"、 "blue"など指定できますが
"#FFFFFF"形式でも指定できます。(#FFFFFFは、白となります。)
カラーコードについては、以下のサイト参照頂いたほうが良いでしょう。
最後に
以前の
は、1つ以上を配置することが出来ませんでしたが
"表示部"のコードを複数配置することで、多数のテロップテキストを表示可能です。
また、タグをspanとしましたので
一行内に、通常のテキストと、
を配置可能です。
ただ・・・
等角フォントの全角以外のフォントだと、文字により幅が変わる為
後続テキストが、次のようになります。
この部分が落ち着かない!!
Iphoneなどで見ると、もう最悪です・・・
難しいですね~(゚ー゚;Aアセアセ