トップページに飛ぶ

TIPS


ホームページのちょっとしたアクセントにどうぞ。リンク先が見本のページなってますので、右クリックでソースを見てください。なお、ネットスケープでは作動しないものもありますので、できるかぎりインターネットエクスプローラーでお使いください。うちはI.E.5.XXで動作確認しています。

1.壁紙が動かない(ROGUELIKE狂騒曲ページ他)
 普通にHTMLで壁紙を設定すると、縦スクロールに伴い壁紙も同じようにスクロールされます。それを、文字や画像だけスクロールさせて、壁紙は動かさないようにする方法です。なぜか、ネットスケープは非対応です。
 壁紙設定のHTMLに下記を書き加えるだけです。

<BODY BACKGROUND="kabegamikafka.gif" BGCOLOR="#000000" TEXT="#ffffff" LINK="#00ffff" ALINK="#ffff00" VLINK="#ff0000" BGPROPERTIES=fixed>
 
2.壁紙が自動で変わる(ROGUELIKE狂騒曲ページ他)
 壁紙がアクセスするたびに変わります。ランダムに変わるように見えますが、実際はパソコンの時間の「秒」によって表示する壁紙を変える手法です。ROGUELIKEのページは3種の壁紙を用意してあり、アクセスした時間が0〜19秒、20秒〜39秒、40〜59秒(5時35分20秒などの秒)で、表示される壁紙が変わります。この時間設定は自由に変更できます。20ほど数えてから、ブラウザの「更新」「再読み込み」ボタンをクリックしてみてください。
 JAVASCRIPTの構文は下記です。秒の設定と壁紙の画像を自由に変えられます。

<script LANGUAGE="JavaScript">
<!--
document.write('<BODY TEXT="#000000" LINK="#D0A0FF" VLINK="#90C0FF" BACKGROUND="')

now = new Date();
sec = now.getSeconds();
if (sec<20) { document.write('kabaegaminet.gif') }
else
if (sec<40) { document.write('kabegaminet2.gif') }
else
if (sec<60) { document.write('kabegaminet3.gif') }

document.write('">')
//--></script>

3.オートスクロール(プロフィールページ)
 自動的に文字が上方向にスクロールします。壁紙を設定すると急激に動作が遅くなるので、壁紙は無いほうが良いです。JAVAでも同様なことができますが重いのでJAVASCRIPTの方がお勧めです。構文は下記です。

<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var max = 1250;
function autoScroll() {
if (navigator.appVersion > "3") {
if (count < max) {
scroll(0,count++);
timer = setTimeout("autoScroll()",10);
status = max-count;
}
}
}
//-->
</SCRIPT>

4.画面がかっこよく変わる(全ページ)
 かっこよいかどうか別にして、リンクでページを変更したときに、画面がいろんな映像効果で変わります。種類は21種あり、それをランダムで採用するようにしています。変更に要する時間も設定できますが、1秒が良いと思います。これを3秒とか5秒に設定すると、長すぎて見ている人がイライラしてしまいます。各ページに入った時と出る時で効果を別々に設定することもできます。
 設定は簡単です。<HEAD></HEAD>の間に、次のMETA構文を入れるだけです。番号を2〜22にすると、何らかの効果が固定されます。詳細は忘れました。なおネットスケープだと無視されます。

<META content="revealTrans(Duration=1.0,Transition=23)" http-equiv=Page-Enter>
<META content="revealTrans(Duration=1.0,Transition=23)" http-equiv=Page-Exit>

5.アラート(マジでやばい日記ページ)
 ページを開いたときにアラートがでます。アダルトページなんかで、「18歳未満立ち入り禁止」なんてのによく使われています。あんまり使うと鬱陶しがられますので、ほどほどにどうぞ。
 これもJAVASCRIPTです。表示文章は自由に変更できます。

<SCRIPT>
<!--
alert("誰にもしゃべっちゃダメですよ");
/ -->
</SCRIPT>

6.右クリック禁止(TOPページ)
 マウスの右クリックでソースを見たり、画像をダウンロードするのを禁止するための手法です。これは、フレーム画面でないと意味がありません。というのも、フレーム無しだとブラウザの「表示」でソースは簡単に見ることができますから。また、フレーム画面でもソースに記載されているメニューやタイトルページのhtmlを直接URL指定すれば、簡単に各ページのソースは見ることができますので、単なるお遊びです。
 JAVASCRIPTの構文は下記で、表示される文章は自由に変更できます。

SCRIPT>
<!--
function mdown(e) {
if (navigator.appName == "Microsoft Internet Explorer") {
if (event.button == 2) {
alert("秘密だよ");
return(false);
}
} else if (navigator.appName == "Netscape") {
if (e.which == 3) {
alert("秘密だよ");
return(false);
}
}
}
if (document.all) {
document.onmousedown = mdown;
}
if (document.layers) {
window.onmousedown = mdown;
window.captureEvents(Event.MOUSEDOWN);
}
// -->
</SCRIPT>

7.ランダムMIDI演奏(メニューページ)
 アクセスするたびにランダムで演奏されるMIDIが変わります。ネットスケープでも動くはずなんですが、なぜか動きません。なぜだかわかる人、教えてください。なお、MIDIは現在34曲使用中。ブラウザの「更新」「再読み込み」ボタンをクリックしてみてください。 なお、ページが変わっても曲が途切れないように、左側のメニューページに設定しています。
 JAVASCRIPTなんですが、ちょっとややこしいです。

<script Language="JavaScript">
<!--
NN="Netscape";IE="Microsoft Internet Explorer";n=0;

if (navigator.appName==NN) {
if (navigator.appVersion.charAt(0)==2) {
seed=34;r = new Date()
r=Math.abs(Math.sin(r.getTime()*seed))*34
seed = r*34
n=Math.round(r)
}
else {
n=Math.round(Math.random()*34)
}
}
if (navigator.appName==IE) {
n=Math.round(Math.random()*34)
}
if (n==0) {
bgm="midi/anpanman.mid"
}
if (n==1) {
bgm="midi/arumu.mid"
}
if (n==2) {
bgm="midi/babiru.mid"
}

省略

if (n==33) {
bgm="midi/daimaou.mid"
}
if (navigator.appName==IE) {
document.write('<bgsound src="',bgm,'"LOOP="-1">')
}
if (navigator.appName==NN) {
document.write('<embed src="',bgm,'" autostart="true" loop="true" width="0" height="0" volume="100">')
}
// -->
</script>

8.リンク先コメント(メニューページ)
 メニューの各リンクにマウスを乗せると、リンク先のコメントがステータスバーに表示されます。通常でしたら、リンク先のアドレスが表示されるので、アドレスを隠したい場合にも使えます。右のメニュー画面でお試しください。
 これは、リンク先のURL指定のあとに下記を加えるだけです。

<A HREF="nethack.html" TARGET="contents" onMouseOver="status='いろんな人のローグ系ゲーム日記';return true;">


9.リンク設定されている文字列にマウスを乗せると色が変わる(カフカな書評ページ)
 スタイルシートと呼ばれるものの一種です。色は自由に設定できます。でも、ネットスケープだと変わりません。

<STYLE TYPE=text/css>
<!--
A:link { text-decoration:none; font-weight:bold; color:#BF80FF }
A:visited { text-decoration:none; font-weight:bold; color:#90C0FF }
A:active { text-decoration:none; font-weight:bold; color:#FF0000 }
A:hover { font-weight:bold; color:#C0C000 }
-->
</STYLE>

10.ロボット検索拒否(INDEX以外全ページ)
 ホームページは放っておくとgooなどのロボット検索に引っかかります。しかしフレーム画面を使ってる場合、gooからのリンク先はフレームなしの本文画面だけが表示されてしまいます。そこで、各ページはgooなどのロボット検索を拒否し、フレームを使ったトップページだけが検索に引っかかるようにしています。
 indexページには、フレーム非対応の画面を作り、そこに各コンテンツを載せると検索に引っかかりやすくなります。また、フレーム無しのダミーページを作るのも一つの手です。
 設定は、下記META構文1行を<HEAD></HEAD>の間に入れるだけです。

<META NAME=ROBOT CONTENT=NOINDEX>

11.ステータスバーに文字が流れる(トイレの穴ページ)
 そのまんまです。ページの注意事項などを書いたりするのに使えます。また、アクセスする時間によって文章を変えたりすることも可能ですが、そうそう流す文章が思い浮かばないのでやってません。 最もポピュラーなJAVASCRIPTでしょうか。

<script language="JavaScript">
<!----------------------
//----------------->
</script><script
language="JavaScript"><!--
// script begin

var pos=0,id;
var msg=" " + "ペコキチの妻のレティコです。「トイレの穴」というタイトルは、そんなくだらん事はトイレの穴に向かってしゃべっとけ。その後、水を流せばスットするぞ。というペコキチの暴言から生まれました。";

function bannerstatus() {
status = msg ;
msg = msg.substring( 2, msg.length ) + msg.substring (0, 2) ;
pos ++ ;
if( pos * 2 > ( msg.length + 20 ) )
pos = 0;
id=setTimeout("bannerstatus()",200);
}

// script end
// --></script>

12.地震
 このページです。画面全体が揺れます。まあ、何の意味も無いお遊びですが、初めての時はビックリする人もいる・・・かな。

<script lungage=javascript>
<!-- shaking window --
var shakesize = 50; //振幅
var shakecount = 50; //回数
var quart = String.fromCharCode(34);
var comma = String.fromCharCode(44);
function shakewindow(){
for (i=0;i< shakecount ;i++){
eval('top.window.moveBy(0' + comma + 'shakesize);');
eval('top.window.moveBy(shakesize' + comma + '0);');
eval('top.window.moveBy(0' + comma + '-shakesize);');
eval('top.window.moveBy(-shakesize' + comma + '0);');
}
}
eval('setTimeout(' + quart + 'shakewindow();' + quart + comma +
'500);');
-->
</script>