2006年03月27日

文字をタイプライター風に

投票してね!


今日も裏まぬけ日記、更新しちゃいます。

今回は、文字をタイプライター風に表示してみましょう。

これもちょっと手を加えるだけでできるんですよ。

では、まずは準備から。

みなさまのブログにタイプライター風の表示方法ができるように、ある仕掛けを仕込んでおきます。

[デザイン]−[コンテンツ]の『新しいコンテンツの追加』で、次のコンテンツを作ってください。

種類:自由形式
追加先ページ:全ページ
配置:ヘッダー
並び順:0

で、自由形式の自由入力欄に下記のソースを貼り付けてください。

↓ここから

<SCRIPT LANGUAGE="VBScript">
<!--//
Dim counter, txt, txt_len, timerID

Sub Window_onLoad()
txt = Text.innerHTML
txt_len = Len(txt)
counter = 1
timerID = Window.SetInterval("typewriter()", 100)
End Sub

Sub typewriter()
Dim cur
If counter > txt_len Then
cur = ""
Window.ClearInterval(timerID)
Else
cur = "_"
End If
Text.innerHTML = Left(txt, counter) & cur
counter = counter + 1
End Sub
-->
</SCRIPT>

↑ここまで

ちなみに、青い数字部分が文字を表示するスピードです。

この数字が小さいと早く、大きいと遅くなります。

これで仕掛けの準備OK。

あとは、仕掛けを作動させるスイッチを仕掛けます。

記事を書いて、タイプライター風にしたい部分を次のタグで囲みます。

<span id="Text">表示したい文字</span>

これがスイッチです。

これを仕掛けなければ、普通に表示されます。

では、試してみましょう。

--------------------------------------

みなさま、いつもまぬけ日記を読んでいただきまして、ありがとうございます。

ミニチュアダックスフンドのレオンと、ミニチュアシュナウザーのスタンのまぬけな日々を、お父ちゃんがまぬけ日記でご紹介します。

ブログのカスタマイズも、裏まぬけ日記として載せていきますので、是非ご覧ください。


--------------------------------------

いかがですか?

タイプライターのように表示されましたでしょうか?

表示されなかった方は、ブラウザの更新ボタンを押してみてください。

仕掛けを仕込んでおけば、スイッチのタグでいつでもタイプライター風に記事を表示することができます。

でも、注意が必要です。

記事本文にこれを仕込むと、前日の記事などが、文字が表示されるたびに下にずれ込んでいってしまいます。

これを回避するのであれば、今回の記事のように追記部分に使うのが良いでしょう。

また、記事(追記)の先頭から使ったほうがいいです。

記事の後半で使っても、記事を読んでいるうちにタイプ風記事がすべて表示されちゃってるかもしれないからです。

それに、あまり多用すると結構うざいというおまけつき。

使う場面を良く考えたほうがいいですね。

ということで今回はこれまで。

お役に立ちますでしょうか?

投票してね!



ニックネーム なん at 21:06| Comment(6) | TrackBack(0) | 裏まぬけ日記 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんばんは〜なん先生〜♪
なるほど〜。
やっぱりアニメーション系のものや動くものというは
パッと表示したときに目が行きますものね。
私もランダムにアセラーの方のブログをときどき
拝見しておりますが、なんさんのブログで言うと
↑のレオンくんとスタンくんのミニ画がある
メインページのTOPにアニメーションを
貼っていらっしゃる方をみかけました。
みなさん、結構工夫されてますよね!
私ものんびり勉強しま〜す(^―^)
Posted by えこりん♪ at 2006年03月27日 22:39
(*゚.゚)ホ・(*゚。゚)ホーーッ!!
アクセントにいいわね^^
あたしは、ついつい長文にしちゃう方なので
使うとしつこいかな〜?(^_^;)
Posted by ちょここ at 2006年03月28日 01:21
これって、楽しいですね。
でも、どうしてこんな事ができるか不思議です。どんな勉強してるんですか、なんさん?

Posted by エメラルド at 2006年03月28日 13:44
【返信】えこりん♪さんへ

えこりんくんこんばんは〜w
こういったものはアクセントとしてはいいのですが、多用するとうざったいというのが欠点ですね。
ま、正直ブログには向かないかもww
記事をすべて画像(文字も)とFLASHで作ってる方もいらっしゃいますよね。
とても見栄えがしてきれいなブログでした。
でも重くないのかな?
タイトルのミニ画は、GIFアニメにすれば簡単ですよ。
Posted by なん at 2006年03月29日 02:29
【返信】ちょここさんへ

こんばんは〜
そうそう、このタイプ風は、アクセントにはなるけど長文にはまったく向きませんw
お知らせとかに使える程度かな〜
おいらもほとんど使わない気が・・・
って、なんでこんなもん記事にしたんだろうw
Posted by なん at 2006年03月29日 02:31
【返信】エメラルドさんへ

こんばんは〜
独学なのでどうしてこうなったのか良くわかりませんw
いろんなHPや本で覚えたことを書いてるだけなので、時々間違ってたりもしますがw
Posted by なん at 2006年03月29日 02:35
この記事へのトラックバックURL
http://a-thera.com/tb/247285
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック