2006年09月24日
電光掲示板（動く文字）_JavaSript中級
yozoは右サイドバーのBlogPet「うさも」の下に、背景をお借りしている作家のみなさんを<marquee>を使ってアナウンスするようにしています。詳しくはコチラ動く文字の設定♪
実はいつも愛用している(？)Another HTML-lint gatewayでチェックをすると、この<marquee>はXHTMLでは非推奨のタグなのでJavaScriptで動く文字を設定したほうがいいというようなメッセージが出ました。そこで早速、JavaScriptで動く文字を設定してみました。
<marquee>では、ブログ名と作家名にリンクを設定できていましたが、今回のJavaScriptでは、リンクは設定できませんでした。悪しからずご了承ください。m(_ _)m下のコードは、そのまま使用してくださっても、構いませんが、ご使用される場合は必ず、URLを記入してこの記事にコメント入れるか、この記事にトラックバックしてください。これは不具合があった場合にご連絡させていただくようにさせていただくためですので、ご協力お願いします。m(_ _)m
<script type="text/javascript"><!--
announce=new Array(
'ここに表示させたい文字を入力してください。はじめとあとの「'」を忘れないようにしましょう。'
);
box_size=20; //表示するボックスの文字数※表示部分の幅が調節できます。
ana_color="#cd5c5c"; //文字色
ana_size=12; //文字の大きさ
ana_msec=350; //表示速度※大きくするとゆっくりになります。
ana_bgcolor="#ffccff"; //背景色
ana_height=20; //表示部分の高さ
document.write("<div style='text-align:center;'><form id='anaform' name='anaform'>");
document.write("<input type='text' size='"+box_size+"' id='anatxt' name='anatxt' accesskey='k' tabindex='50'");
document.write("style='vertical-align:middle;height:"+ana_height+"px;background-color:"+ana_bgcolor+";border-style:none;color:"+ana_color+";font-size:"+ana_size+"px;' />");
document.write("</form></div>");
txtplus="";anast=0;anano=0;nultxt="";
for(i=0;i<box_size;i++)nultxt+=" ";
function scrolltxt(){
if(!anano){
txtplus=nultxt+announce[anast];
anano=txtplus.length;
}
txtplus=txtplus.substring(1);
anano--;
if(!anano){anast++;
if(anast==announce.length)anast=0;
}
document.anaform.anatxt.value=txtplus;
}
setInterval("scrolltxt()",ana_msec);// written by usamo
--></script>
↓ ぽちっと応援お願いします♪ m(_ _)m
≪New BlogPet「うさも」の背景紹介 コスモス＆キノコの家 | Top | BlogPet8000ぺた「うさも」のキリぺた記念 俳句を求めて三千里 狙い撃ち編＠後姿ﾗﾌﾞﾘｰ同盟 Old≫
トラックバックURL
コメント
少しお久しぶりで(シ＿ ＿)シ ごめんなさい
土日にお休みがなくて明日、休みです。
嬉しい〜〜〜＾＾
動く文字、前からかわいいなぁ〜と思ってました＾＾
自然に楽に読めちゃのよね(^^)d
Posted by ゆうゆ at 2006.09.24 21:33 | edit
コメント
＞少しお久しぶりで(シ＿ ＿)シ ごめんなさい
あはは・・・いいんですよ♪お仕事大変そうですからね。ここは、お時間のあるときに、その名の通り『気が向いたとき』でいいのですからね。(*^-ﾟ)vｨｪｨ♪
＞土日にお休みがなくて明日、休みです。嬉しい〜〜〜＾＾
おおお・・・それは♪それは♪ゆっくり骨休めしてくださいね。(^○^)
＞動く文字、前からかわいいなぁ〜と思ってました＾＾自然に楽に読めちゃのよね(^^)d
今回は自在に好みで変更しやすく（ほんと？）しました('-'*)ｴﾍ
色々使い方によってはおもしろいかもしれませんね。(￣∀￣*)ｲﾋｯ
Posted by ゆうゆさんへ at 2006.09.24 22:11 | edit
コメント
marqueeは非推奨タグでしたかぁ。知らなかったです。
このタグのいいところは長い文章を場所を取らずに入れられることですよね!!
目にも付きやすいですし♪
これをJavaScriptにするとはさすがです!!
yozoさんちを見て真似される方も多いでしょうから
このように記事をアップされていることは嬉しいでしょうね。(*'-')
Posted by まゆび at 2006.09.24 23:20 | edit
コメント
これコピペでちょこっと書き直せば貼れるのかな？
うむ・・・やってみようかなぁ〜♪
ちと、お借りしてゆきますね＾＾
ＰＳ：何故か未だにCGIの返事が来ないのです(T＿T)？
もう少し待ってみます。
Posted by 凸 ねこ at 2006.09.24 23:21 | edit
コメント
なるほどー見た目は同じように動いてても
ベストコンディションを目指して、yozo殿は日々の努力をされてるのですね！
むむむ。。尊敬してしまいますーー！！
Posted by babar at 2006.09.24 23:22 | edit
コメント
す・・・素晴らしい〜！
いつもきちんとソースチェックをされてるのですねー。さすがですー。
これはまたまたブックマークさせてもらわねば〜(-ω☆)ｷﾗﾘ
いつも大変お世話になります(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
私は今日お友達から苦情とまではいかないけど、フラッシュ関係で
何やらウチのページを含む多窓で不具合が警告されたと指摘されたばかり＾＾；
フラッシュ9だったということで色々噂も耳にしますが
ウチのブログはソースがグチャグチャなのでyozoさん見習って直したいものです・・
って、その前にお引っ越しかwwウハハハハハw
Posted by モンビッケ at 2006.09.24 23:42 | edit
コメント
これをお待ちしてました(笑)
ウチのをやっていて多分これってダメ何じゃない？って思っていたけど、分からなかったしIEでは表示されたのでとりあえず使ったのだ。
コメントでyozoさまが記事にしてくださるって入れてくれたので待っていましたよ。
なんだか作業の順番を変えちゃったかしら？だとしたら、ごめんね。
でも、すごーく長いタグなんだね。JSって面倒なんだね。表示する文字数まで入れるんだ・・・
近日中にやり直します。実は今日、表示の中身を変えてしまって、長大な文章になっている(爆)大丈夫かしら・・・
この部分はどんどん小まめに変更して行く予定だからなぁ。。。不安
それと私の方はもともとリンクはサイドバーにお任せだったのでリンクできなくても私は差し支えないでーす。
では、頑張ってみます！ありがとうございました。
Posted by ととろ at 2006.09.25 00:40 | edit
コメント
えっとね、これの横幅をもう少し大きくするにはどうしたらいいかしら？あと、上下に余白が出来てしまう時は空かないようにする設定できますか？
ごめんねー、今は基に戻しちゃったの。
Posted by ととろ at 2006.09.25 00:58 | edit
コメント
文字数を変えれば幅が変わるのは確認しました。
位置を左寄せにしました。
あとやっぱり上下はもう少し詰めたいなと思うのですが・・・ココログでは無理？
今は、JSで表示しています。あとはととろは今日はできない！ごめんなさい。
Posted by ととろ at 2006.09.25 01:32 | edit
コメント
＞marqueeは非推奨タグでしたかぁ。知らなかったです。
そうなんですよ♪XHTML準拠の最後の課題として、残っていたのです。
・・・というか、放置していましたよ┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
＞これをJavaScriptにするとはさすがです!!
「電光掲示板」とか「動く文字」とか言われるものですよ♪marqueeなら簡単なんですが、
JavaScriptなら、結構なプログラムになりますよね。これでも簡単になっていますよ。(^○^)
＞yozoさんちを見て真似される方も多い
あはは・・・お友達がほとんどでしょうから、「一緒に問題を考えましょう！」ぐらいのことなんですよ。不具合やアドヴァイスがありましたら遠慮なくコメントしてくださいね。m(_ _)m
Posted by まゆびさんへ at 2006.09.25 07:12 | edit
コメント
＞これコピペでちょこっと書き直せば貼れるのかな？
はい♪そのまま、貼り付けて使えますよ。言葉はいくらでも入りますよ。yozoの言葉を削除して、入力してくださいね。あんまり長いと、読んでくれる人も疲れるかもしれませんけど・・・(^○^)
＞うむ・・・やってみようかなぁ〜♪ちと、お借りしてゆきますね＾＾
どうぞ♪どうぞ♪遠慮なく、何かありましたら、この記事のコメントにて、お知らせくださいね。
＞ＰＳ：何故か未だにCGIの返事が来ないのです(T＿T)？ もう少し待ってみます。
何のメールも届いていませんか？問い合わせてみてもいいかもしれませんね。
管理人さんがとてもお忙しい時期なのかもしれませんからね。（テスト中とか）
Posted by 凸 ねこさんへ at 2006.09.25 07:20 | edit
コメント
あはは・・・最近ハマっているXHTML準拠の対策の一環・・・というか、
忘れ物というか・・・放置していたことなんですよ♪（;￣ー￣A ｱｾｱｾ･･･
ここのカテゴリーにあるJavaScriptの勉強なんです。ちょっとわかっていると
どんな内容かもよくわかるようになりますからね。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
楽しみながら、教科書でなくて、おもしろいJS講座みたいになればいいなぁって
こっしょり思っているんですよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
Posted by babarさんへ at 2006.09.25 07:27 | edit
コメント
＞す・・・素晴らしい〜！いつもきちんとソースチェックをされてるのですねー。さすがですー。
へへへ・・・これはもう趣味いえいえ、記事をUPするたびにチェックするのが日課になってますよ。いつまでたってもチェッカー頼みですけど、記事を書くときの気分が楽ですね。(^○^)
＞これはまたまたブックマークさせてもらわねば〜(-ω☆)ｷﾗﾘ
こちらこそ、いつもありがとーございまっす♪大変励みになりますよ♪m(_ _)m
＞何やらウチのページを含む多窓で不具合が警告されたと指摘されたばかり＾＾；
(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ FLASH 9はWin+IE6では表示されないようですね。そちらのコメントでも書かせていただいたように、FirefoxではOKなんですよ。ブログの記事の分だけ表示されないって、不思議ですね。これはモンビッケさんの作成方法でなく、サーバー側のデータのやりとりの不具合なのでしょうね。こちらとしては、その不具合をどう補って、記事をかくのかということしかないですからね。怒ってもしかたないですしね。(^○^)
＞って、その前にお引っ越しかwwウハハハハハw
そうでしたね！着々と新ブログの構築をされているのでしたね。ホームページスペースをお持ちなのですからね。カスタマイズし放題のMT、そしてMTをPHP化して、軽量化し、IPスパムフィルターで完璧なスパム対策をしてGOですね♪(*^-ﾟ)vｨｪｨ♪ 楽しみにしてますよ。(*^-^)
Posted by モンビッケさんへ at 2006.09.25 07:41 | edit
コメント
お待たせしましたね。ちょっとXHTML準拠のタグ吐き出しや、軽量化に手間取りました。こっしょりのオリジナルJSソース配布です。不具合等ありましたら、遠慮なくコメントくださいね m(_ _)m
＞なんだか作業の順番を変えちゃったかしら？だとしたら、ごめんね。
いえいえ♪ここのブログにとって、最後のXHTML準拠の山場だったのですよ。あとはJavaScriptの外部ファイル化でエラー回避をするしかないのですが・・・
なかなか不勉強で、ゆっくりやるしかないかなぁ~って思っています。
＞でも、すごーく長いタグなんだね。JSって面倒なんだね。
JS自体は小さい（？）なのですが、タグの吐き出しタイプにしているので、面倒になってますね。でも、バナー感覚ではれるようになってますから、ドンマイしてくださいませ。m(_ _)m
＞長大な文章になっている(爆)大丈夫かしら・・・
あはは・・・大丈夫ですよ。ただ、あまり長いと、見ている人がしんどいかもと思いますが、
CMですからね。問題ないと思いますよ。 (￣∀￣*)ｲﾋｯ いろいろいじってみてくださいね。
Posted by ととろさんへ at 2006.09.25 07:50 | edit
コメント
＞えっとね、これの横幅をもう少し大きくするにはどうしたらいいかしら？
えっと、『box_size=16; //表示するボックスの文字数』とある16を大きくしてくださいね。この点については、追記させていただきました。m(_ _)m
＞あと、上下に余白が出来てしまう時は空かないようにする設定できますか？
ココログでもそうですか？yozoもlivedoorブログで、同じように上下に行があいてしまっています。margin:0;やpadding:０;を入れてみたのですが、効かないですね。（;￣ー￣A ｱｾｱｾ･･･色々やってみるようにしますね。m(_ _)m
Posted by ととろさんへ at 2006.09.25 08:56 | edit
コメント
＞文字数を変えれば幅が変わるのは確認しました。位置を左寄せにしました。
失礼ながらソース拝見させていただきました。div style='text-align:left;'をご自分で変更されたのですね。ばっちりですよ。(*ﾟ▽ﾟ)*｡_｡)*ﾟ▽ﾟ)*｡_｡)ｳﾝｳﾝ
＞あとやっぱり上下はもう少し詰めたいなと思うのですが・・・ココログでは無理？
livedoorブログでも、だめなんですよ。かなり格闘したのですが・・・line-height:0px;でもだめでしたし・・・ちょっとこれは無理かもしれませんね ┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
Posted by ととろさんへ at 2006.09.25 09:20 | edit
コメント
おお！！！早速見てみたよー♪
変わってるぅーーー!!!
うんうん。
いつもこの電光掲示板参考に、背景探しに出かけたりしてるんだぁー♪
便利だよ♪うんうん。
<marquee>は非認証タグなんだね・・・。
そういうのもわかっちゃうんだぁー♪
いつも勉強熱心なyozoちゃんに、応援クリックだぁー!!!
Posted by enu at 2006.09.25 10:04 | edit
コメント
これで大丈夫か、ちと判らない(^^ゞ
で、ちょこっとイジッテ色を付けたり、リンクも付けてみました。
（実は、テケトウにイジッテつけたので(笑)自分でも理解していないです）
お暇な時にチェックお願いしますm(_ _)m
『お嬢』の家の下に置いています。
Posted by 凸 ねこ at 2006.09.25 10:29 | edit
コメント
＞おお！！！早速見てみたよー♪変わってるぅーーー!!!うんうん。
えへへ・・・以前のものとあまり見た目が変わらないようにはしておきました。
ただ、<marquee>の方が簡単ですよね。JavaScriptは大きくなっちゃうので、貼り付けしにくいかもしれませんね。┐( -"-)┌ﾔﾚﾔﾚ...
＞いつもこの電光掲示板参考に、背景探しに出かけたりしてるんだぁー♪
わぁ♪そのように活用してくださってくれるとうれしいですよ♪
背景作家のみなさんにもちょっぴり恩返しできたかなぁ〜♪(^○^)
＞いつも勉強熱心なyozoちゃんに、応援クリックだぁー!!!
いつも応援ありがとーございまっす♪m(_ _)m
記事を書きっぱなしにするんでなくて、後からでも役に立つようにしたいなぁ〜って思っているんですよ。カスタマイズ記事は特に、ちゃんと自分で再現できるようにしとかなきゃ、また同じことを調べることになっちゃいますからね。(^○^)
Posted by enuちゃんへ at 2006.09.25 14:25 | edit
コメント
＞何とか貼り付けられたけれど・・・流れる早さとか、これで大丈夫か、ちと判らない(^^ゞ
できましたか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
＞で、ちょこっとイジッテ色を付けたり、リンクも付けてみました。
えっ？リンクですか・・・ちょっと待ってくださいね。
・・・・・・・・・・・・・・・・・・・・・・・只今、訪問中・・・・・・・・・・・・・・・・・・・・・・・
失礼ながら、ソースを背景させていただきましたが、<marquee>で貼り付けたのですね。凸 ねこさんが使用されているテンプレートも、XHTML準拠ですから、残念ながら<marquee>は非推奨ですよ。よろしければこの記事のJavaScriptの文章のところを、表示させたい文章に変更して設置してくださいね。ちなみにyozoのseesaaブログ（うさもの気が向いたと記）では、問題なく表示できていますよ。お試しアレ。marquee部分にここの<script>〜</script>の長いコードを貼り付けるだけですからね。簡単ですよ。(^○^)
また何かありましたら、遠慮なくコメントくださいね。＼(*⌒0⌒)ｂがんばっ♪
Posted by 凸 ねこさんへ at 2006.09.25 14:37 | edit
コメント
一時昼寝・・・
再び戦闘開始・・・出来たじゃん。
あの、怒闘（どとう）の午前中は何だったのだろう・・・(T_T)ｼｵｼｵ
今度は、ばっちりd(^-^)！だと思います。
ぁ 何だかデジャヴュのようなこの感覚・・・・以前にも似たことをやったような。
学習しないヤツです＿|￣|○
(〃￣ノ∇)ﾉ yo〜zo〜さ〜ん♪ありがとう〜〜♪ ／￣＼∞ ←フジサン
Posted by 凸 ねこ at 2006.09.25 18:35 | edit
コメント
JavaScriptばっちり貼れていましたね。ＯＫですよ。(*^-^)
たくさん文字があっても、あんなにちっちゃくなっちゃうんですよね。
不思議ですね。行間もバッチリだったでしょ。もっと間隔を取るなど、自由につかってくださったら・・・いいですからね。(＝⌒▽⌒＝) ﾆｬﾊﾊﾊ♪
＞一時昼寝・・・ギャー夢にまでJavaScriptが出た。*o_ _)oバタッ
あらら・・・うなされていましたか！(^○^)
ただ、文章をコピペするだけですからね。単純ですよ。
慣れればよくわかってくると思います。d(@^∇ﾟ)/ﾌｧｲﾄｯ♪
＞(〃￣ノ∇)ﾉ yo〜zo〜さ〜ん♪ありがとう〜〜♪ ／￣＼∞ ←フジサン
(*^-^) どういたしまして。また何かありましたら、いつでもどうぞ♪
Posted by 凸 ねこさんへ at 2006.09.25 21:40 | edit
コメント
実は、私のブログは、
yozoさんの流れる文字がカッコよかったのでマネをしちゃいました（笑）
HTMLの作り方を検索して、どうやったら表示出来るかが解ったので
自分で好きな背景と文字が設定できました。
自分のブログに合った文字の大きさや、背景の色や文字色を設定できるから便利ですよね（＾−＾＊
Posted by わたる at 2006.09.27 10:49 | edit
コメント
今まで、<marquee>を使って表示していましたけれど、yozoさんの記事を読んで、このJavaScriptの表示へ変えました。
yozoさんの方では、わたしのブログは見れているでしょうか？
最近、「ぼくのうた」が見れない。というコメントが来ていて、どうしたものかと困っています（＞＜；
Posted by わたる at 2006.09.27 13:00 | edit
コメント
＞実は、私のブログは、yozoさんの流れる文字がカッコよかったのでマネをしちゃいました（笑）
<marquee>で設定されていましたよね。簡単でよかったのですけどね。
もともとIEだけのタグでしたからね。非推奨も当たり前といえばそうなのですけどね。(^○^)
それでも、リンクもそのままかけるし、メンテもしやすかったのですけどね。
今回のJavaScriptはどうしても大掛かりに見えますよね。メンテは同じくらいしやすいのですけどね。まぁ慣れるしかないですね。┐( -"-)┌ﾔﾚﾔﾚ...
Posted by わたるさんへ at 2006.09.27 17:10 | edit
コメント
＞yozoさんの記事を読んで、このJavaScriptの表示へ変えました。
うまくいきましたか！ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!
って、ちょっとコードが長いですけど、コピペでＯＫですからね。(*^-ﾟ)vｨｪｨ♪
＞yozoさんの方では、わたしのブログは見れているでしょうか？
とりあえずyozoは見えなかった記憶はありませんが・・・ＯＫだと思いますよ♪
Posted by わたるさんへ at 2006.09.27 17:15 | edit