JavaScriptで作ったパーツでブログを飾ってみる

概要

下の様な、虹色が流れる、ブログへ設置可能なテキスト表示部品です。

サンプル

<script type="text/javascript">// <![CDATA[
    var Rainbow = "ココに表示したい文字列";
    var Size = 5;

    var sci = 0; var len = Rainbow.length;
    document.write("<p id='RainbowText'>" + Rainbow + "</p>");
    var Ele = document.getElementById("RainbowText");
    var ArrColor = ["red", "orangered", "yellow", "green", "blue", "Indigo", "Violet"]
    RunRainbow();
    function RunRainbow() {
        var aft = ""; var tci = 6 - sci;
        for (i = 0; i < len; i++) {
            aft += Rainbow.charAt(i).fontcolor(ArrColor[tci]);
            tci++; if (tci > 6) { tci = 0 };
        }
        sci++; if (sci > 6) { sci = 0 };
        Ele.innerHTML = aft.fontsize(Size); 
        setTimeout('RunRainbow()', 300);
    }
// ]]></script>

解説

javascriptコードです。

はてなブログの、見たままでブログを作成している場合
例えば

ココから
ココまで

と作成していたとします。

その状態で、HTML編集に切り替えると下記のようになります。

<p>ココから</p>
<p>ココまで</p>

後は、”<p>ココから</p>”と”<p>ココまで</p>”の間に
上記ソースコードを丸々張り付けると、”ココから”と”ココまで”の間へ表示されます。

はてな記法の方は、そのまま張り付けてOKです。

ちなみに自分は、はてな記法を使ったのは、本日初だったしして・・・(;^_^A

次に、表示する文字列ですが
サンプルコード上側の”ココに表示したい文字列”
という所に、好きな文字列を入れてください。

そのすぐ下の

var Size = 5;

は、フォントのサイズです。

色の流れるスピードを変更したい場合は、サンプルコード下側の

setTimeout('RunRainbow()', 300);

というところがありますので、"300"という値を変更します。
値が小さくなるほど早くなります。

まとめ

あまり、javascriptでプログラムした経験ありません。
取り敢えず言い訳　ヾ(＠°▽°＠)ﾉあはは

サンプルコードが、長くなってしましました・・・

また、1ヵ所以上の配置が出来ないのが残念ですね。
改良の余地はありそうです。