ブログ上にテロップテキストを表示してみる

概要

ブログ上へ表示可能な、テロップテキストを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 += '&ensp;' } 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の()の内容を、","(ドット)区切りで３個要素を設定してください。

要素の詳細は、以下の通りです。

RunTicker('[ココに表示したい文字列]', フォントの大きさを数値で指定, '表示色')

表示色についてですが
"red"、 "yellow"、 "blue"など指定できますが
"#FFFFFF"形式でも指定できます。（#FFFFFFは、白となります。）
カラーコードについては、以下のサイト参照頂いたほうが良いでしょう。

html-color-codes.info

最後に

以前の

は、１つ以上を配置することが出来ませんでしたが
"表示部"のコードを複数配置することで、多数のテロップテキストを表示可能です。

また、タグをspanとしましたので
一行内に、通常のテキストと、
を配置可能です。

ただ・・・

等角フォントの全角以外のフォントだと、文字により幅が変わる為
後続テキストが、次のようになります。

この部分が落ち着かない！！

Iphoneなどで見ると、もう最悪です・・・

難しいですね～(ﾟｰﾟ;Aｱｾｱｾ