ウインドウスクロール情報板
WindowScroll Information
◎この小技は、JavaScriptを設定した中身ページとインラインフレームを利用した表示ページとの連携で実現させています、設定も簡単ですので是非お使い下さいね。
1）必要な物
『スクロールさせるHTMLファイル』・『表示させるファイル』
2）設置の仕方
①～②までの段階を順番に実施して対象ファイルを作って下さい。
メモ帳の場合
～～手順①～～
Ⅰ.スクロールさせるHTMLファイルを作成し、<head>～</head>の間に以下のタグをコピペします。
<script type="text/javascript">
<!--
//スクロールの全体の縦幅
var end_y = 1200;
//スクロール原点
var n_y = 0;
//スクロールスピード
var move = 0.2;
//画面の更新時間
var sec = 10;
function windowscroll() {
if (n_y < end_y) {
n_y += move;
window.scroll(0, n_y);
setTimeout("windowscroll()", sec);
}else{
n_y = 0;
window.scroll(0, n_y);
windowscroll();
}
}
-->
</script>
Ⅱ.次に最初の <body> タグに属性を入力します
<body onLoad="windowscroll()" topmargin="0" leftmargin="0">
Ⅲ.最後にテーブル（表示部）
<!--テーブルの設定 横幅200px 縦幅200pxの表示タイトル部をこの記述で指定 -->
<table border="0" width="200" height="200" cellspacing="0" cellpadding="0">
<tr>
<td>
<p align="center"><font color="#000080"><b>WindowScroll Information</b></font><br>
</p>
<p align="center"><font size="2">by </font><font size="2">（HP名）<br>
<a href="（HPの絶対パス又は相対パス）">（HPのURL）</a></font></td>
</tr>
</table>
<!--ココまでがタイトル部 省略不可-->
<!--テーブルの設定 横幅200px 縦幅1000px の記事表示部をここで記述-->
<table border="0" width="200" height="1000" cellspacing="0" cellpadding="0">
<tr>
<td>記事部分のタグ</td>
</tr>
</table>
<!-- ココまでが記事部 -->
<!--テーブルの設定 横幅200px 縦幅200px の裏表示タイトル部をこの記述で指定 -->
<table border="0" width="200" height="200" cellspacing="0" cellpadding="0">
<tr>
<td>
<p align="center"><font color="#000080"><b>WindowScroll Information</b></font><br>
</p>
<p align="center"><font size="2">by </font><font size="2">（HP名）<br>
<a href="（HPの絶対パス又は相対パス）">（HPのURL）</a></font></td>
</tr>
</table>
<!--ココまでが裏タイトル部 省略不可-->
上記のタグを追加したら、HTMLファイルを保存してブラウザで確認してみる、上手く動作しているようならOK、エラーが出るようならもう一度タグのチェックをして下さい。
～～手順②～～
実際に表示させるページにインラインフレームのタグを打ちます。<iframe src="（スクロールファイルの絶対パス又は相対パス）" name="scroll" width="200" height="200" scrolling="no" frameborder="0">このページにはフレームが使用されています</iframe>
これで表示されます、各属性はフレームの横幅200px 縦幅200px スクロールバーは無し、フレーム枠は無しで設定してあります、今回の場合はフレーム枠を別途テーブルで表しています。
～～今回の例～～
<table border="1" width="200" height="200" cellspacing="0" cellpadding="0" bordercolorlight="#5353FF" bordercolordark="#000080">
<tr>
<td><iframe src="windowscroll.htm" name="scroll" width="200"
height="200" scrolling="no" frameborder="0">このページにはフレームが使用されています</iframe>
</td>
</tr>
</table>
FrontPageExpressの場合
～～手順①～～
Ⅰ.新規ファイルを作成し、メニューバーの挿入(I)⇒スクリプト(T)を押して、スクリプトを入力するウインドウを出します、そちらへ以下のタグをメモ帳へ一旦ペーストした後再度メモ帳からコピペします。
編集画面に『Ｊ』このようなマークが出て来ますが、これは消せませんので配置の邪魔にならない所へ置いて置いて下さい。
Ⅱ.次は、メニューバーの表示(V)⇒HTML(H)でタグ画面を出し、最初の<BODY>の中へ以下の様に追加して下さい、そしてHTML画面をOKで閉じます
<body onLoad="windowscroll()" topmargin="0" leftmargin="0">
Ⅲ.最後に以下のタグをコピーしメモ帳へ一旦ペーストした後再度メモ帳タグをコピーします、Expressのメニューバーの表示(V)⇒HTML(H)でタグ画面を出しカーソルを<body>の真下へ持っていき、キーボードの『Ctrl』と『V』を一緒に押してペーストします。
<!--テーブルの設定 横幅200px 縦幅200pxの表示タイトル部をこの記述で指定 --><!--ココまでがタイトル部 省略不可-->
<!--テーブルの設定 横幅200px 縦幅1000px の記事表示部をここで記述-->
<table border="0" width="200" height="1000" cellspacing="0" cellpadding="0">
<tr>
<td>記事部分のタグ</td>
</tr>
</table>
<!-- ココまでが記事部 -->
<!--テーブルの設定 横幅200px 縦幅200px の裏表示タイトル部をこの記述で指定 -->
<table border="0" width="200" height="200" cellspacing="0" cellpadding="0">
<tr>
<td>
<p align="center"><font color="#000080"><b>WindowScroll Information</b></font><br>
</p>
<p align="center"><font size="2">by </font><font size="2">（HP名）<br>
<a href="（HPの絶対パス又は相対パス）">（HPのURL）</a></font></td>
</tr>
</table>
<!--ココまでが裏タイトル部 省略不可-->
上記のタグを追加したら、編集画面に移り記事部分のタグの個所をご自由にカスタマイズして縦1000px以内に収め保存します、出来上がったファイルをブラウザで確認してみて上手く動作していればOK、エラーが出たらもう一度内容をチェックして下さい。
～～手順②～～
実際に表示させるページにインラインフレームのタグを打ちます、タグをコピーしメモ帳へ一旦ペーストした後再度メモ帳からコピーします、メニューバーの挿入(I)⇒HTMLマークアップ(H)を押します、マークアップのウインドウが出て来ますのでそこへペーストします、表示画面には<？>このようなマークが出てきますのでこのマークを表で囲み横幅を設定して自由に移動してレイアウトして下さい。
<iframe src="（スクロールファイルの絶対パス又は相対パス）" name="scroll" width="200" height="200" scrolling="no"
frameborder="0">このページにはフレームが使用されています</iframe>
これで表示されます、各属性はフレームの横幅200px 縦幅200px スクロールバーは無し、フレーム枠は無しで設定してあります、今回の場合はフレーム枠を別途テーブルで表しています。
～～今回の例～～
<table border="1" width="200"
height="200" cellspacing="0" cellpadding="0" bordercolorlight="#5353FF"
bordercolordark="#000080">
<tr>
<td>
<!--webbot bot="HTMLMarkup" startspan -->
<iframe src="windowscroll.htm" name="scroll" width="200"
height="200" scrolling="no" frameborder="0">このページにはフレームが使用されています</iframe>
<!--webbot bot="HTMLMarkup" endspan -->
</td>
</tr>
</table>
Expressを使用する場合は、サイトのタグを一旦メモ帳へペーストした後メモ帳のタグを再度コピーして下さい。
あとがき
今回の動きは連続して見せたかった為に記事の前後にタイトルと裏タイトルをつけました、これをつけないと縦方向へ1200px動いたところでイキナリ0pxへ動くので不自然な動きになってしまいます、ですので前後に同じタイトルをつけることで不自然さをなくして自然な流れを作り出していますので寸法の表記がバラバラになるとこの自然さが出ないので注意が必要です。
スクロールの幅や縦幅をカスタマイズしたい時は、JavaScriptの以下の個所の数字を変更し
<script type="text/javascript">
<!--
//スクロールの全体の縦幅
var end_y = 1200;
//スクロール原点
var n_y = 0;
//スクロールスピード
var move = 0.2;
//画面の更新時間
var sec = 10;
タイトル部・裏タイトル部のwidth="200" height="200"や<table border="0" width="200" height="200" cellspacing="0" cellpadding="0">記事部のwidth="200" height="1000"を<table border="0" width="200" height="1000" cellspacing="0" cellpadding="0">お好みのサイズに変更してお使い下さい、この時に全てにおいて横幅は統一して下さい、縦幅はJavaScript部で少し気を使います
//スクロールの全体の縦幅
var end_y = 1200;
<iframe src="windowscroll.htm" name="scroll" width="200"
height="200" scrolling="no" frameborder="0">このページにはフレームが使用されています</iframe>この部分は『記事部の縦幅+タイトル部』の縦幅です、裏タイトル部の縦幅は足しませんので注意して下さい、そしてインラインフレームの縦幅（height）をタイトル部の縦幅（height）と同じにして下さい。
カスタマイズは初心者の方には少し難しいかも知れませんが、上記の通りの幅を変更しない場合は非常に簡単に設置出来ると思いますので、挫けず頑張って下さいね。
この小技はIE5.5で動作確認をしています、他のブラウザでは確認していません。
