--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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
人気blogランキング

スポンサーサイト

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New BlogPet「うさも」の背景紹介 コスモス&キノコの家 | Top | BlogPet8000ぺた「うさも」のキリぺた記念 俳句を求めて三千里 狙い撃ち編@後姿ラブリー同盟 Old≫

トラックバックURL


コメント

yozoさん、こんばんは^^
少しお久しぶりで(シ_ _)シ ごめんなさい
土日にお休みがなくて明日、休みです。
嬉しい~~~^^

動く文字、前からかわいいなぁ~と思ってました^^
自然に楽に読めちゃのよね(^^)d

コメント

>ゆうゆさん、こんばんはー♪

>少しお久しぶりで(シ_ _)シ ごめんなさい
あはは・・・いいんですよ♪お仕事大変そうですからね。ここは、お時間のあるときに、その名の通り『気が向いたとき』でいいのですからね。(*^-゚)vィェィ♪

>土日にお休みがなくて明日、休みです。嬉しい~~~^^
おおお・・・それは♪それは♪ゆっくり骨休めしてくださいね。(^○^)

>動く文字、前からかわいいなぁ~と思ってました^^自然に楽に読めちゃのよね(^^)d
今回は自在に好みで変更しやすく(ほんと?)しました('-'*)エヘ
色々使い方によってはおもしろいかもしれませんね。( ̄∀ ̄*)イヒッ

コメント

yozoさん、こんばんは♪(^▽^)/
marqueeは非推奨タグでしたかぁ。知らなかったです。
このタグのいいところは長い文章を場所を取らずに入れられることですよね!!
目にも付きやすいですし♪
これをJavaScriptにするとはさすがです!!
yozoさんちを見て真似される方も多いでしょうから
このように記事をアップされていることは嬉しいでしょうね。(*'-')

コメント

w( ̄o ̄)w オオー!
これコピペでちょこっと書き直せば貼れるのかな?
うむ・・・やってみようかなぁ~♪
ちと、お借りしてゆきますね^^

PS:何故か未だにCGIの返事が来ないのです(T_T)?
   もう少し待ってみます。

コメント

こんばんはー。
なるほどー見た目は同じように動いてても
ベストコンディションを目指して、yozo殿は日々の努力をされてるのですね!
むむむ。。尊敬してしまいますーー!!

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
す・・・素晴らしい~!
いつもきちんとソースチェックをされてるのですねー。さすがですー。
これはまたまたブックマークさせてもらわねば~(-ω☆)キラリ
いつも大変お世話になります(´・ω・)(´-ω-)(´_ _)ペコリ
私は今日お友達から苦情とまではいかないけど、フラッシュ関係で
何やらウチのページを含む多窓で不具合が警告されたと指摘されたばかり^^;
フラッシュ9だったということで色々噂も耳にしますが
ウチのブログはソースがグチャグチャなのでyozoさん見習って直したいものです・・
って、その前にお引っ越しかwwウハハハハハw

コメント

こんばんは!
これをお待ちしてました(笑)
ウチのをやっていて多分これってダメ何じゃない?って思っていたけど、分からなかったしIEでは表示されたのでとりあえず使ったのだ。
コメントでyozoさまが記事にしてくださるって入れてくれたので待っていましたよ。
なんだか作業の順番を変えちゃったかしら?だとしたら、ごめんね。
でも、すごーく長いタグなんだね。JSって面倒なんだね。表示する文字数まで入れるんだ・・・
近日中にやり直します。実は今日、表示の中身を変えてしまって、長大な文章になっている(爆)大丈夫かしら・・・

この部分はどんどん小まめに変更して行く予定だからなぁ。。。不安
それと私の方はもともとリンクはサイドバーにお任せだったのでリンクできなくても私は差し支えないでーす。
では、頑張ってみます!ありがとうございました。

コメント

こんばんは!
えっとね、これの横幅をもう少し大きくするにはどうしたらいいかしら?あと、上下に余白が出来てしまう時は空かないようにする設定できますか?
ごめんねー、今は基に戻しちゃったの。

コメント

えっとね、何度もごめん。
文字数を変えれば幅が変わるのは確認しました。
位置を左寄せにしました。
あとやっぱり上下はもう少し詰めたいなと思うのですが・・・ココログでは無理?
今は、JSで表示しています。あとはととろは今日はできない!ごめんなさい。

コメント

>まゆびさん、おはよーございまっす♪

>marqueeは非推奨タグでしたかぁ。知らなかったです。
そうなんですよ♪XHTML準拠の最後の課題として、残っていたのです。
・・・というか、放置していましたよ┐( ̄ヘ ̄)┌ ヤレヤレ・・・

>これをJavaScriptにするとはさすがです!!
「電光掲示板」とか「動く文字」とか言われるものですよ♪marqueeなら簡単なんですが、
JavaScriptなら、結構なプログラムになりますよね。これでも簡単になっていますよ。(^○^)

>yozoさんちを見て真似される方も多い
あはは・・・お友達がほとんどでしょうから、「一緒に問題を考えましょう!」ぐらいのことなんですよ。不具合やアドヴァイスがありましたら遠慮なくコメントしてくださいね。m(_ _)m

コメント

>凸 ねこさん、おはよーございまっす♪

>これコピペでちょこっと書き直せば貼れるのかな?
はい♪そのまま、貼り付けて使えますよ。言葉はいくらでも入りますよ。yozoの言葉を削除して、入力してくださいね。あんまり長いと、読んでくれる人も疲れるかもしれませんけど・・・(^○^)

>うむ・・・やってみようかなぁ~♪ちと、お借りしてゆきますね^^
どうぞ♪どうぞ♪遠慮なく、何かありましたら、この記事のコメントにて、お知らせくださいね。

>PS:何故か未だにCGIの返事が来ないのです(T_T)? もう少し待ってみます。
何のメールも届いていませんか?問い合わせてみてもいいかもしれませんね。
管理人さんがとてもお忙しい時期なのかもしれませんからね。(テスト中とか)

コメント

>ばばるさん、おはよーございまっす♪
あはは・・・最近ハマっているXHTML準拠の対策の一環・・・というか、
忘れ物というか・・・放置していたことなんですよ♪(; ̄ー ̄A アセアセ・・・
ここのカテゴリーにあるJavaScriptの勉強なんです。ちょっとわかっていると
どんな内容かもよくわかるようになりますからね。(=⌒▽⌒=) ニャハハハ♪
楽しみながら、教科書でなくて、おもしろいJS講座みたいになればいいなぁって
こっしょり思っているんですよ。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

コメント

>モンビッケさん、おはよーございまっす♪

>す・・・素晴らしい~!いつもきちんとソースチェックをされてるのですねー。さすがですー。
へへへ・・・これはもう趣味いえいえ、記事をUPするたびにチェックするのが日課になってますよ。いつまでたってもチェッカー頼みですけど、記事を書くときの気分が楽ですね。(^○^)

>これはまたまたブックマークさせてもらわねば~(-ω☆)キラリ
こちらこそ、いつもありがとーございまっす♪大変励みになりますよ♪m(_ _)m

>何やらウチのページを含む多窓で不具合が警告されたと指摘されたばかり^^;
(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン FLASH 9はWin+IE6では表示されないようですね。そちらのコメントでも書かせていただいたように、FirefoxではOKなんですよ。ブログの記事の分だけ表示されないって、不思議ですね。これはモンビッケさんの作成方法でなく、サーバー側のデータのやりとりの不具合なのでしょうね。こちらとしては、その不具合をどう補って、記事をかくのかということしかないですからね。怒ってもしかたないですしね。(^○^)

>って、その前にお引っ越しかwwウハハハハハw
そうでしたね!着々と新ブログの構築をされているのでしたね。ホームページスペースをお持ちなのですからね。カスタマイズし放題のMT、そしてMTをPHP化して、軽量化し、IPスパムフィルターで完璧なスパム対策をしてGOですね♪(*^-゚)vィェィ♪ 楽しみにしてますよ。(*^-^)

コメント

>ととろさん、おはよーございまっす♪
お待たせしましたね。ちょっとXHTML準拠のタグ吐き出しや、軽量化に手間取りました。こっしょりのオリジナルJSソース配布です。不具合等ありましたら、遠慮なくコメントくださいね m(_ _)m

>なんだか作業の順番を変えちゃったかしら?だとしたら、ごめんね。
いえいえ♪ここのブログにとって、最後のXHTML準拠の山場だったのですよ。あとはJavaScriptの外部ファイル化でエラー回避をするしかないのですが・・・
なかなか不勉強で、ゆっくりやるしかないかなぁ~って思っています。

>でも、すごーく長いタグなんだね。JSって面倒なんだね。
JS自体は小さい(?)なのですが、タグの吐き出しタイプにしているので、面倒になってますね。でも、バナー感覚ではれるようになってますから、ドンマイしてくださいませ。m(_ _)m

>長大な文章になっている(爆)大丈夫かしら・・・
あはは・・・大丈夫ですよ。ただ、あまり長いと、見ている人がしんどいかもと思いますが、
CMですからね。問題ないと思いますよ。 ( ̄∀ ̄*)イヒッ いろいろいじってみてくださいね。

コメント

>ととろさん、おはよーございまっす♪

>えっとね、これの横幅をもう少し大きくするにはどうしたらいいかしら?
えっと、『box_size=16; //表示するボックスの文字数』とある16を大きくしてくださいね。この点については、追記させていただきました。m(_ _)m

>あと、上下に余白が出来てしまう時は空かないようにする設定できますか?
ココログでもそうですか?yozoもlivedoorブログで、同じように上下に行があいてしまっています。margin:0;やpadding:0;を入れてみたのですが、効かないですね。(; ̄ー ̄A アセアセ・・・色々やってみるようにしますね。m(_ _)m

コメント

>ととろさん、おはよーございまっす♪

>文字数を変えれば幅が変わるのは確認しました。位置を左寄せにしました。
失礼ながらソース拝見させていただきました。div style='text-align:left;'をご自分で変更されたのですね。ばっちりですよ。(*゚▽゚)*。_。)*゚▽゚)*。_。)ウンウン

>あとやっぱり上下はもう少し詰めたいなと思うのですが・・・ココログでは無理?
livedoorブログでも、だめなんですよ。かなり格闘したのですが・・・line-height:0px;でもだめでしたし・・・ちょっとこれは無理かもしれませんね ┐( ̄ヘ ̄)┌ ヤレヤレ・・・

コメント

おはよーyozoちゃん♪
おお!!!早速見てみたよー♪
変わってるぅーーー!!!
うんうん。
いつもこの電光掲示板参考に、背景探しに出かけたりしてるんだぁー♪
便利だよ♪うんうん。
<marquee>は非認証タグなんだね・・・。
そういうのもわかっちゃうんだぁー♪
いつも勉強熱心なyozoちゃんに、応援クリックだぁー!!!

コメント

何とかe-3貼り付けられたけれど・・・流れる早さとか、
これで大丈夫か、ちと判らない(^^ゞ
で、ちょこっとイジッテ色を付けたり、リンクも付けてみました。
(実は、テケトウにイジッテつけたので(笑)自分でも理解していないです)
お暇な時にチェックお願いしますm(_ _)m
『お嬢』の家の下に置いています。

コメント

>enuちゃん、こんにちはー♪

>おお!!!早速見てみたよー♪変わってるぅーーー!!!うんうん。
 えへへ・・・以前のものとあまり見た目が変わらないようにはしておきました。
ただ、<marquee>の方が簡単ですよね。JavaScriptは大きくなっちゃうので、貼り付けしにくいかもしれませんね。┐( -"-)┌ヤレヤレ...

>いつもこの電光掲示板参考に、背景探しに出かけたりしてるんだぁー♪
 わぁ♪そのように活用してくださってくれるとうれしいですよ♪
背景作家のみなさんにもちょっぴり恩返しできたかなぁ~♪(^○^)

>いつも勉強熱心なyozoちゃんに、応援クリックだぁー!!!
 いつも応援ありがとーございまっす♪m(_ _)m
記事を書きっぱなしにするんでなくて、後からでも役に立つようにしたいなぁ~って思っているんですよ。カスタマイズ記事は特に、ちゃんと自分で再現できるようにしとかなきゃ、また同じことを調べることになっちゃいますからね。(^○^)

コメント

>凸 ねこさん、こんにちはー♪

>何とか貼り付けられたけれど・・・流れる早さとか、これで大丈夫か、ちと判らない(^^ゞ
できましたか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!

>で、ちょこっとイジッテ色を付けたり、リンクも付けてみました。
えっ?リンクですか・・・ちょっと待ってくださいね。
・・・・・・・・・・・・・・・・・・・・・・・只今、訪問中・・・・・・・・・・・・・・・・・・・・・・・
失礼ながら、ソースを背景させていただきましたが、<marquee>で貼り付けたのですね。凸 ねこさんが使用されているテンプレートも、XHTML準拠ですから、残念ながら<marquee>は非推奨ですよ。よろしければこの記事のJavaScriptの文章のところを、表示させたい文章に変更して設置してくださいね。ちなみにyozoのseesaaブログ(うさもの気が向いたと記)では、問題なく表示できていますよ。お試しアレ。marquee部分にここの<script>~</script>の長いコードを貼り付けるだけですからね。簡単ですよ。(^○^)
また何かありましたら、遠慮なくコメントくださいね。\(*⌒0⌒)bがんばっ♪

コメント

頭がウヌ?になって(笑)
一時昼寝・・・v-75ギャー夢にまでavascriptが出た。*o_ _)oバタッ
再び戦闘開始・・・出来たじゃん。
あの、怒闘(どとう)の午前中は何だったのだろう・・・(T_T)シオシオ
今度は、ばっちりd(^-^)!だと思います。

ぁ     何だかデジャヴュのようなこの感覚・・・・以前にも似たことをやったような。
                                 学習しないヤツです_| ̄|○
     (〃 ̄ノ∇)ノ yo~zo~さ~ん♪ありがとう~~♪ / ̄\∞ ←フジサン 

コメント

>凸 ねこさん、こんばんはー♪
JavaScriptばっちり貼れていましたね。OKですよ。(*^-^)
たくさん文字があっても、あんなにちっちゃくなっちゃうんですよね。
不思議ですね。行間もバッチリだったでしょ。もっと間隔を取るなど、自由につかってくださったら・・・いいですからね。(=⌒▽⌒=) ニャハハハ♪

>一時昼寝・・・ギャー夢にまでJavaScriptが出た。*o_ _)oバタッ
あらら・・・うなされていましたか!(^○^)
ただ、文章をコピペするだけですからね。単純ですよ。
慣れればよくわかってくると思います。d(@^∇゚)/ファイトッ♪

>(〃 ̄ノ∇)ノ yo~zo~さ~ん♪ありがとう~~♪ / ̄\∞ ←フジサン
(*^-^) どういたしまして。また何かありましたら、いつでもどうぞ♪

コメント

こんにちは。(^0^
実は、私のブログは、
yozoさんの流れる文字がカッコよかったのでマネをしちゃいました(笑)
HTMLの作り方を検索して、どうやったら表示出来るかが解ったので
自分で好きな背景と文字が設定できました。
自分のブログに合った文字の大きさや、背景の色や文字色を設定できるから便利ですよね(^-^*

コメント

★追記★
今まで、<marquee>を使って表示していましたけれど、yozoさんの記事を読んで、このJavaScriptの表示へ変えました。
yozoさんの方では、わたしのブログは見れているでしょうか?
最近、「ぼくのうた」が見れない。というコメントが来ていて、どうしたものかと困っています(><;

コメント

>わたるさん、こんにちはー♪

>実は、私のブログは、yozoさんの流れる文字がカッコよかったのでマネをしちゃいました(笑)
<marquee>で設定されていましたよね。簡単でよかったのですけどね。
もともとIEだけのタグでしたからね。非推奨も当たり前といえばそうなのですけどね。(^○^)
それでも、リンクもそのままかけるし、メンテもしやすかったのですけどね。
今回のJavaScriptはどうしても大掛かりに見えますよね。メンテは同じくらいしやすいのですけどね。まぁ慣れるしかないですね。┐( -"-)┌ヤレヤレ...

コメント

>わたるさん、こんにちはー♪

>yozoさんの記事を読んで、このJavaScriptの表示へ変えました。
うまくいきましたか!オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!
って、ちょっとコードが長いですけど、コピペでOKですからね。(*^-゚)vィェィ♪

>yozoさんの方では、わたしのブログは見れているでしょうか?
とりあえずyozoは見えなかった記憶はありませんが・・・OKだと思いますよ♪

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。