ページスタイルの設定!

TOPメニューに戻る


これまでは、ページ追加の都度、その時の気分に合わせてページスタイルを設定していましたが、ページが増えるに従って、不統一なページスタイルでは、まとまりのない感じを強く受けるようになりました。今後もページが増え続けることを勘案し、下記の考え方に基づいて、思い切って各ページの表示スタイルを統一することとしました。

@.ページの背景画像を、ページ表示毎に10パターンの画像からランダムに選び出した画像を表示させる。
A.BGMをページ表示毎に48曲の中からランダムに選曲する。
B.@Aの画像や曲を変更したとき、その変更作業だけで全てのページに変更結果が反映されるようにする。
C.ページに躍動感を付加するためマウス追随型キャラクターを加える(各ページの内容によってこの機能の追加を判断)。
D.上記機能の追加による各ページの負荷を避けるため、上記の各機能はJavaScriptを使って別ファイルで一括処理を行う。

以下に、このページスタイルの基本設定を整理しました。(私の備忘記録のため)

1.D.上記機能の追加による各ページの負荷を避けるため、上記の各機能はJavaScriptを使って別ファイルで一括処理を行う。

HTMの文書(ソース)に、<TITLE>以下の文書に以下を書き加えます。

<TITLE>HONZUワールド</TITLE>

<!-- カーソルにまとわって花びらが舞う //-->
<SCRIPT>
//<!--
  img="../flow.gif"
//-->
</SCRIPT>

<SCRIPT language="JavaScript" src="../honzuworld_kabegami_01.js"></SCRIPT>   <!-- 壁紙を表示毎に切り替える //-->
<SCRIPT language="JavaScript" src="../honzuworld_bgm.js"></SCRIPT>         <!-- BGMをページ表示の度に自動切り替えする //-->
<SCRIPT language="JavaScript" src="../stars_03.js"></SCRIPT>             <!-- カーソルにまとわって花びらが舞う //-->

2.</HEAD>に続く <BODY〜 部分を、下記に置き換える。

</HEAD>
<BODY onmousemove="mousemove()" background="../back_02.gif">
<DIV BGCOLOR="black" style="top : 7px;left : 3px; position : absolute;z-index :-1;visibility : visible;" id="Layer-1">

3.TOPメニューが登録されているフォルダーに、下記の拡張子「js」ファイルを登録する。「js」ファイルの形式はテキストです。

honzuworld_kabegami.js
honzuworld_kabegami_01.js
honzuworld_kabegami_01.js
honzuworld_kabegami_03.js


honzuworld_kabegami.js の内容は以下の通りです。
back=new Array(10);
back[0]="./back_01.gif";
back[1]="./back_02.gif";
back[2]="./back_03.gif";
back[3]="./back_04.gif";
back[4]="./back_05.gif";
back[5]="./back_06.gif";
back[6]="./back_07.gif";
back[7]="./back_08.gif";
back[8]="./back_09.gif";
back[9]="./back_10.gif";
MyBack=Math.floor(10*Math.random());

honzuworld_kabegami_01.js の内容は以下の通りです。上の記述との違いは「./」→「../」の部分だけです。./は同じフルダーに存在する。../は一つ前の階層のフォルダー内に存在する。との違いだけです。
document.write("<body background='"+back[MyBack]+"'>");
back=new Array(10);
back[0]="../back_01.gif";
back[1]="../back_02.gif";
back[2]="../back_03.gif";
back[3]="../back_04.gif";
back[4]="../back_05.gif";
back[5]="../back_06.gif";
back[6]="../back_07.gif";
back[7]="../back_08.gif";
back[8]="../back_09.gif";
back[9]="../back_10.gif";
MyBack=Math.floor(10*Math.random());
document.write("<body background='"+back[MyBack]+"'>");

honzuworld_kabegami_02.js の内容は以下の通りです。上の記述との違いは「../」→「../../」の部分だけです。../は一つ前の階層のフォルダー内に存在する。../../は2つ前のフォルダーに存在するとの違いだけです。
back=new Array(10);
back[0]="../../back_01.gif";
back[1]="../../back_02.gif";
back[2]="../../back_03.gif";
back[3]="../../back_04.gif";
back[4]="../../back_05.gif";
back[5]="../../back_06.gif";
back[6]="../../back_07.gif";
back[7]="../../back_08.gif";
back[8]="../../back_09.gif";
back[9]="../../back_10.gif";
MyBack=Math.floor(10*Math.random());
document.write("<body background='"+back[MyBack]+"'>");

honzuworld_kabegami_03.js の内容は、上の記述との違いは「../../」→「../../../」の部分だけです。../../は2つ前の階層のフォルダー内に存在する。../../../は3つ前のフォルダーに存在するとの違いだけでので、ここでの内容の説明表示は省略します。

honzuworld_bgm.js

honzuworld_bgm.js の内容は以下の通りです。
BGM=new Array(48);
BGM[0]="http://www.honzuworld.com/bgm_01.asx";
BGM[1]="http://www.honzuworld.com/bgm_02.asx";
BGM[2]="http://www.honzuworld.com/bgm_03.asx";
       ・
       ・
BGM[46]="http://www.honzuworld.com/bgm_47.asx";
BGM[47]="http://www.honzuworld.com/bgm_48.asx";

MyBGM=Math.floor(47*Math.random());
if (document.all){
document.write('<EMBED src="'+BGM[MyBGM]+'" autostart="true" autoplay="true" loop="10" hidden="true" width="300" height="45" volume="-2000">');
}else{
}

上記のファイルの指定は、これを記述するTOPメニューの登録階層に対するHTM文書の登録フォルダーの階層に合わせ、src="../ の部分で調整します。
<SCRIPT language="JavaScript" src="./honzuworld_bgm.js"></SCRIPT>      TOPメニューと同じフォルダーにあるHTM文書の場合。
<SCRIPT language="JavaScript" src="../honzuworld_bgm.js"></SCRIPT>      TOPメニューの1つ後のフォルダーにあるHTM文書の場合。
<SCRIPT language="JavaScript" src="../../honzuworld_bgm.js"></SCRIPT>     TOPメニューの2つ後のフォルダーにあるHTM文書の場合。
<SCRIPT language="JavaScript" src="../../../honzuworld_bgm.js"></SCRIPT>    TOPメニューの3つ後のフォルダーにあるHTM文書の場合。


honzuworld.com/bgm_01.asx 〜 honzuworld.com/bgm_47.asx の内容設定は以下の通りです。

<asx>
<entry><ref href="http://www.honzuworld.com/bgm/iyasi_01.wma"/></entry>
<entry><ref href="http://www.honzuworld.com/bgm/iyasi_02.wma"/></entry>
             ・
             ・
<entry><ref href="http://www.honzuworld.com/bgm/tokimeki_14.wma"/></entry>
<entry><ref href="http://www.honzuworld.com/bgm/tokimeki_15.wma"/></entry>
</asx>

上記の設定内容は、BGMの選択をランダムで行ったと、マッチしたBGM以降の自動演奏曲目を設定するファイルとなっています。



honzuworld_stars.js
honzuworld_stars_01.js
honzuworld_stars_02.js
honzuworld_stars_03.js


honzuworld_stars.js の内容は以下の通りです。
stars_set=new Array(10);
stars_set[0]="./stars_01.js";
stars_set[1]="./stars_02.js";
stars_set[2]="./stars_03.js";
stars_set[3]="./stars_04.js";
stars_set[4]="./stars_05.js";
stars_set[5]="./stars_06.js";
stars_set[6]="./stars_07.js";
stars_set[7]="./stars_08.js";
stars_set[8]="./stars_09.js";
stars_set[9]="./stars_10.js";
MyBack=Math.floor(10*Math.random());
document.write("<body starsground='"+stars_set[MyBack]+"'>");

honzuworld_stars_01.js 〜 honzuworld_stars_03.js の内容の違いは、「../」の部分だけです。 honzuworld_kabegami_01.js〜の事例と同じなので、ここでの内容の説明表示は省略します。

下記の設定は、HTM文書の設定内容によっては、うまく機能せずエラーが表示されることがあります。どうしても機能しない場合は、この部分の採用はカットすることとして下さい。

<!-- カーソルにまとわって花びらが舞う //-->
<SCRIPT>
//<!--
  img="../flow.gif"
//-->
</SCRIPT>

<SCRIPT language="JavaScript" src="../stars_03.js"></SCRIPT>             <!-- カーソルにまとわって花びらが舞う //-->


<BODY onmousemove="mousemove()" background="../back_02.gif"> の onmousemove="mousemove()" 部分が、HTM文書の設定内容によっては、うまく機能せずエラーが表示されることがあります。どうしても機能しない場合は、この部分をカットすることとして下さい。 onmousemove="mousemove()" はキャラクターがマウスにまとわりつく設定です。



TOPメニューに戻る