ブログ用おもしろ素材目次

(1)マウスに付いてくる文字
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●これは別名マウスストーカーと言われているマウスに文字が付いてくるやつです。
●FC2ブログは設定した文字の日本語が文字バケする（改善策検討中）
●CSSで「span」をスタイル設定しているので、ページ内にこのタグがあると画面が崩れる可能性があります。

HTMLソース

JavaScript制御でマウスに付いて来る文字ができるかチェック<br>

<LINK href="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/jv4.css" rel=stylesheet>
<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/jv4.js"></script>

CSSLソース

span {FONT-SIZE:12pt; COLOR:#ff0000; TOP:-100px; POSITION:absolute}

JS ソース

/ ******* 下記を変更の事（KIの実用JavaScript）*******	
var msg = "ＫＩの実用 JavaScript"  //表示する文字	
var haba = 15                    //文字間の幅
var xa = 20      // 矢印からの文字の表示横位置
var ya = 0　　   // 矢印からの文字の表示縦位置
// ***************************************************	
	
msg = msg.split("")	
var xiti=new Array()	
var yiti=new Array()	
for (i=0;i<=msg.length;i++) {	
    xiti [i] = -100	
    yiti [i] = -100	
}	
var shoki = 0	
	
function mousmv(evt){	
	x = window.event.clientX + document.body.scrollLeft;
yscr = document.documentElement.scrollTop + document.body.scrollTop;
y = window.event.clientY + yscr;
    shoki = 1
}	
	
function hyouzi() {	
if (shoki==1 && document.all) {	
    for (i=msg.length; i>=1; i--) {	
        xiti[i]=xiti[i-1]+haba	
        yiti[i]=yiti[i-1]	
    }	
	
xiti [0] = x + xa
yiti [0] = y + ya
	
for (i=0; i<msg.length; i++) {	
    var hyouzi1 = eval("document.all.spanno" + (i) + ".style")	
    	hyouzi1.posLeft=xiti[i]
    	hyouzi1.posTop=yiti[i]
    }	
}	
	
if (shoki==1 && document.layers) {	
    for (i=msg.length-1; i>=1; i--) {	
        xiti[i]=xiti[i-1]+haba	
        yiti[i]=yiti[i-1]	
    }	
xiti [0] = x + xa
yiti [0] = y + ya
	
for (i=0; i<msg.length; i++) {	
	var hyouzi1 = eval("document.spanno"+i)
    	hyouzi1.left=xiti[i]
    	hyouzi1.top=yiti[i]
    }	
}	
	
var Timer = setTimeout("hyouzi()", 10)	
}	
// 以下が実際に書く分
for (i=0;i<=msg.length;i++) {	
    document.write ("<span id=\"spanno" + i + "\">")	
    document.write(msg[i])	
    document.write ("</span>")	
}	
if (document.layers){	
	document.captureEvents(Event.MOUSEMOVE);
}	
	
 document.onmousemove = mousmv;

window.onload=hyouzi;

(2)スクロール文字をテキストボックスへ表示
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●テキストボックスを設置してその中の文字を右→左へスクロールする。
●FC2ブロの方は動かない。日本語の文字バケも関係していると思われるが不明？
●ブログの記事作成でファームが使用できないことを知った。

HTMLソース

本例は、文字「今回0.5秒周期でScriptを実行して文字のスクロ－ル表示。」を表示

<script type="text/javascript">
// 表示時間調整setTimeoutの数字を変更。表示文字は下記。
msg="今回0.5秒周期でScriptを実行して文字のスクロ－ル表示。　　　";
function scrol() {
	setTimeout("scrol()",500);
	msg=msg.substring(1,msg.length)
	+msg.substring(0,1);
	document.fff.box.value=msg;
}
</SCRIPT>

<script type="text/javascript" src="http://blog-imgs-12.fc2.com/k/u/i/kuiryo/jv3.js"></script>

<script type="text/javascript">
	window.onload=scrol;
</SCRIPT>

JS ソース

document.write("<FORM NAME=\"fff\">\n");
    
document.write("<INPUT TYPE=\"text\" \n");
document.write("NAME=\"box\" style=background-color:#ff99cc; SIZE=40 VALUE=\"\" >\n");
document.write("</FORM><br />\n");

(3)文章を下から上にスライド表示
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●文章を下から上にスライド表示。(スタイルシートで最前面に表示）
●以下のHTMLソースはFC2ブログ例です
●BIGLOBEブログのサンプルも実行できますが、こちらはcssファイルとjsファイルで保存しました。

HTMLソース

<STYLE type=text/css>
span {FONT-SIZE:12pt; COLOR:#ff00ff; TOP:-100px; POSITION:absolute; font-weight:bold}
</STYLE>
<SCRIPT language=JavaScript>
msg=new Array();
// ******* 下記を変更の事（KIの実用JavaScript）************
msg[0] = "私のホームページを見て頂き有難う御座います" ;
msg[1] = "アカウントアップを期待し、" ;
msg[2] = "独創的・実用的なサンプルを多数掲載しています" ;
msg[3] = "今後も「ＫＩの実用JavaScript」を宜しく御願い致します" ;
msg[4] = "･･･♯∮∮♪♪♪♪∮∮♯・・・・・・・" ;
msg[5] = ""  // 最後にダミーを1個入れて下さい

var x=200;     　//文字表示する横位置の指定
var y=250;       //文字表示する縦位置の指定（最初の表示位置)
var ysu=5;        //表示行数

// ***************************************************
var ia=0;
var iy=0;
var msgsu=msg.length ;
var yiti=new Array();
ysu=ysu-1;

 for (i=0;ysu>=i; i++) {
       yiti[i]=y-(20*i)
  }
function hyouzi() {
        if (ia > ysu ){iaa=ysu+1}
        else {iaa=ia}
   if (document.all) {
		for (ib=iaa; ib>=0;ib--){
			if (ia > ysu ){iy=ia-ib}
        		else {iy=iaa-ib};
				if (iy >= msgsu){ia=-1;break;}

    			var hyouzi1 = eval("document.all.spanno" + iy + ".style")
			if (iy== msgsu-1){break;}

    			hyouzi1.posLeft=x
			if (ysu+1==ib){
				hyouzi1.posTop=-100}
			else{
    				hyouzi1.posTop=yiti[ib]}    	
		}
   }
   if (document.layers) {
		for (ib=iaa; ib>=0;ib--){
			if (ia > ysu ){iy=ia-ib}
        		else {iy=iaa-ib}

			if (iy >= msgsu){ia=-1;break;};
			var hyouzi1 = eval("document.spanno"+iy)
			if (iy== msgsu-1){break;}
    			hyouzi1.left=x
			if (ysu+1==ib){		
                        hyouzi1.top=-100}
			else{
    				hyouzi1.top=yiti[ib]}
		  }	
  }
ia=ia+1
var Timer = setTimeout("hyouzi()", 1000)  
}

for (i=0;i<=msgsu;i++) {
    document.write ("<span id='spanno" + i + "'>")
    document.write(msg[i])
    document.write ("</span>")
}
window.onload=hyouzi;

</SCRIPT>

(4)画像上で文章を下から上にスライド表示
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●画像上で文章を下から上にスライド表示。(スタイルシートで最前面に表示）
●以下のHTMLソースはFC2ブログ例です
▼画像の表示場所は何処でも問題ないが、文字は画面の中心当たりで折り返してしまった？

HTMLソース

<STYLE type=text/css>
span {FONT-SIZE:12pt; COLOR:#ccffcc; TOP:-100px; POSITION:absolute; font-weight:bold}
</STYLE>

<script type="text/javascript">

msg=new Array();
// *************** 下記を変更の事 ******************
msg[0] = "私のブログを見て頂き"
msg[1] = "有難う御座います。" 
msg[2] = "最初のホームページを出したのは一昔前の" 
msg[3] = "10年前ですがブログを出したこはありませ" 
msg[4] = "んでした。"
msg[5] = ""
msg[6] = "最近(2008/2月)株価解析の自作ツールの" 
msg[7] = "検証を兼ねそのツールで抽出した注目銘柄" 
msg[8] = "をブログへ掲載して、多数の方からツール"
msg[9] = "に対する意見・要望・改善点等のコメント"  
msg[10] = "を頂こうと考えブログを作る事にしました。"
msg[11] = ""  
msg[12] = "ブログではどんな表現が出来るか確認の為"  
msg[13] = "この「ブログ用おもしろ素材集」立ち上げ" 
msg[14] = "ました。気に入った素材があったら自由に"  
msg[15] = "持ち帰り活用して下さい。・・・・・・・"
msg[16] = ""  // 最後にダミーを1個入れて下さい

var xa=200;	//画像表示する横位置の指定
var ya=130;	//画像表示する縦位置の指定（ＴＯＰ)

var x=xa+30 ;	//文字表示する横位置の指定
var y=300 ;	//文字表示する縦位置の指定（最初の表示位置)
var ysu=8;	//表示行数


// ***************************************************
var ia=0;
var iy=0;
var msgsu=msg.length ;
var yiti=new Array();
ysu=ysu-1;
 for (i=0;ysu>=i; i++) {
       yiti[i]=y-(20*i);
  }


function hyouzi() {

	if (ia > ysu ){iaa=ysu+1}
        else {iaa=ia}
   
	for (ib=iaa; ib>=0;ib--){
		if (ia > ysu ){iy=ia-ib}
        	else {iy=iaa-ib};

		if (iy >= msgsu){ia=-1;break;}
    		var hyouzi1 = eval("document.all.spanno" + iy + ".style")
		if (iy == msgsu-1){break;}

    		hyouzi1.posLeft=x
		if (ysu+1==ib){
			hyouzi1.posTop=-100}
		else{
    			hyouzi1.posTop=yiti[ib]}    	
		}
ia=ia+1
var Timer = setTimeout("hyouzi()", 2000)   // 切り替えタイミング指定
}
// -------------------------------------------------------
</script>

<span id='p1' STYLE='position:absolute;'>
<IMG SRC='http://blog-imgs-12.fc2.com/k/u/i/kuiryo/tai1.jpg' WIDTH=336 HEIGHT=230 BORDER=0>
</span>	

<script type="text/javascript">
	lay = document.all['p1'];
	lay.style.left =xa;
	lay.style.top =ya;

for (i=0;i<=msgsu-1;i++) {
    document.write ("<span id='spanno" + i + "'>")
    document.write(msg[i])
    document.write ("</span>")
}
window.onload=hyouzi;
</script>

(5)立体文字
■【FC2ブログでサンプル実行】　　■（BIGLOBEブログはサンプル未作成）

●立体文字。通常のWebページでは幅指定不要であったが、FC2では「line-height:1.5」が必要
▼FC2ブログでは、文字は画面の中心当たりで折り返してしまう？

HTMLソース

<STYLE TYPE="text/css">
span.mz1{position:absolute;color:#008000;font-size:30pt;line-height:1.5}
</STYLE>

<script type="text/javascript">
var mozi = "ブログ用おもしろ素材";   // 表示文字を記入
for(i=0;i<=7;i++){
	kage="<span class=mz1 STYLE=left:"+(150+i)+"px;top:"+(160+i)+"px;";
	if(i==7)kage +="color:#00ff00";
	kage +=">"+mozi+"</span>";
	document.write(kage);
}
</script>

(6)打ち上げ花火
■【FC2ブログでサンプル実行】　　■【BIGLOBEブログでサンプル実行】

●文章を打ち上げ花火のように表示します。ビッグイベントのお知らせに利用できます
●以下のHTMLソースはFC2ブログ例です
●BIGLOBEブログのサンプルも実行できますが、こちらはjsファイルで保存しました。

HTMLソース

<script type="text/javascript">
// *********************  下記を必要に応じ変更  ************************
var msg0= "　バンザイ　ばんざい　バンザイ　"; 　　　　//表示する文字１
var msg1= "　ようやく　ブログデビュ｜しました。";   //表示する文字２
var msg2= "　ブログ用おもしろ素材を　宜しくお願いします。"; //表示する文字３
R = 10;			//　半径
speed1= 50;            //  拡大するスピード
basyo1=8;	//  内側文字の表示位置（文字サイズと半径により調整）
basyo2=16;	//  中側文字の表示位置　
basyo3=28;	//  外側文字の表示位置
speed2= 3000;            //  最後に表示している時間
// *********************************************************************

pi = Math.PI / 180;
mozsu0=msg0.length;
mozsu1=msg1.length;
mozsu2=msg2.length;

timerID=0;
var hozyo=0;
var cnt=0;
var cnty=7;
var cnts=0;
var cntse=mozsu2*2;
        sx=screen.width;sy=screen.Height;
	chuusin_x=sx /2;
	chuusin_y=(sy-200) /2;

// ----------------------------------------------------	
var shoki=" STYLE='position:absolute;left:-200px;top:-200px;"
for (n=0;n<3;n++){ 
	if (n==0) {mozsu=mozsu0;msg = msg0.split("");}
 	if (n==1) {mozsu=mozsu1;msg = msg1.split("");}
	if (n==2) {mozsu=mozsu2;msg = msg2.split("");}

        if (n==0) siz="font-size:20px;"    // 初輪の文字サイズ
	if (n==1) siz="font-size:30px;"   // 2輪の文字サイズ
	if (n==2) siz="font-size:40px;"   // 3輪の文字サイズ
	for (i=0;i<mozsu;i++) {
		rrr= Math.floor(Math.random()*255);  //文字の色
		ggg= Math.floor(Math.random()*255);
		bbb= Math.floor(Math.random()*255);
        	bg1= rrr.toString(16);
		bg2= ggg.toString(16);
		bg3= bbb.toString(16);
		rgb=bg1+bg2+bg3;
        	iro="color:#" + rgb +";"

    		document.write ("<div id='div" + n + i + "'" + shoki + iro + siz + "'>")
    		document.write(msg[i])
    		document.write ("</div>")
	}
}
//下記は長いので2行にしてあるが実際は1行で書くこと
document.write ("<div id='tama'" + shoki + "'>
<IMG SRC='http://blog-imgs-12.fc2.com/k/u/i/kuiryo/tama.gif'></div>")

//----------------------------------------------------------------

// 玉の縦打ち上げ
function utiage(){
yy1=chuusin_y *2/ 7;
yy=chuusin_y + yy1*cnty;
window["tama"].style.pixelLeft=chuusin_x; window["tama"].style.pixelTop=yy;
	
cnty += -1;
	clearTimeout(timerID);
 	if (cnty >= 0 )timerID=setTimeout("utiage()",60);
        if (cnty < 0 ){
		 hanabi();
        window["tama"].style.pixelLeft=-200; window["tama"].style.pixelTop=-200;
	}
}

//　花火を輪に表示
function hanabi(){
if (cnt ==0){hozyo="0";mozsu=mozsu0;}　　　　　//始めの字を表示
	for (i=0; i<mozsu; i++)	{
		layerid = "div" + hozyo + (i);
		kakudo = (i * 360 / mozsu);
		COS = Math.cos(kakudo * pi);
		SIN = Math.sin(kakudo * pi);
		xx = (COS + SIN)*R +chuusin_x;
		yy = (SIN - COS)*R +chuusin_y;

		window[layerid].style.pixelLeft=xx; window[layerid].style.pixelTop=yy;
	}
	R += 5;
	clearTimeout(timerID);
	cnt += 1;

  if (cnt > basyo1){hozyo="1";mozsu=mozsu1;}　//初輪がbasyo1達したら、2番目の輪の文字数代入
  if (cnt > basyo2){hozyo="2";mozsu=mozsu2;}　//2輪がbasyo2達したら、3番目の輪の文字数代入
  if (cnt < basyo3) {timerID = setTimeout("hanabi()",speed1);}　
  if (cnt >= basyo3 ) owari1();　//3輪がbasyo3達したら終りに処理実行　　　　　　
}

//　全表示後の表示時間指定
function owari1(){
	 timck = (new Date()).getTime() + speed2;　//全体の表示時間
   	 do {;} while((new Date()) < timck); 
     	owari2();
}

//　ランラムに文字を消す(Left=-200、Top=-200へ）
function owari2(){
   	j= Math.floor(Math.random()*3);
		if (j==0) mozsu=mozsu0;
 		if (j==1) mozsu=mozsu1;
		if (j==2) mozsu=mozsu2;

	i= Math.floor(Math.random()*mozsu);
                layerid = "div" + j + (i);
       		window[layerid].style.pixelLeft=-200; window[layerid].style.pixelTop=-200;
	cnts=cnts+1;
	clearTimeout(timerID);
	if (cnts < cntse) {timerID = setTimeout("owari2()",10);}
    	if (cnts >= cntse ) owari3();
}

// 残っている文字を全て消す
function owari3(){
for (j=0; j<3;j++){
	if (j==0) mozsu=mozsu0;
 	if (j==1) mozsu=mozsu1;
	if (j==2) mozsu=mozsu2;
	for (i=0; i<mozsu; i++)	{
           	layerid = "div" + j + (i);
       		window[layerid].style.pixelLeft=-200; window[layerid].style.pixelTop=-200;
	}
    }
}

function utiage2(){
	hozyo=0;
	cnt=0;
	cnty=7;
	cnts=0;
	R=0;
utiage();
}

document.write("<FORM name=\"FM1\">")
document.write("<INPUT type=\"button\" value=\"花火の再打上\" onClick=\"utiage2()\">")
document.write("</FORM>")

window.onload=utiage;
</script>

JS ソース

BIGLOBEブログのサンプルはJSファイルで実行しました。上記と同じ内容なので掲載は省略。
JSファイルは、ここをクリックでダウンロードできます。
（なお、FC2ブログの方はJSファイルで実行した場合エラーが発生で実行できません？）

【戻る】