ホームページ作成のススメ

〜小技〜

　ここでは、このホームページ（主にtopページ）で使われている小技をいくつか紹介します｡

Topページを見て、「あ、これ、いいな」と思った物があったら、使ってください。

とりあえず、ソースコードをそのまま書き出しますので、各自で色々カスタマイズしてみて下さい。

 

恥ずかしいことに、作った当初は覚えていたのに、今では忘れているものもあるので、ご了承を。

特に「今日の御言葉」を流しているスクロールテーブルは、どこかのページからのものなのですが、了承無しの２次配布が禁止されており、なおかつそのページを忘れてしまったもんで・・・。

 

本格的に基礎から学びたい方は、リンク集の方を参考に｡

Linkから飛べます｡

このホームページを作成する際にお世話になったページの数々を紹介しています｡

 

小技１：スクロールバーのカスタマイズ

　<STYLE TYPE="text/css">

<!--

Body{scrollbar-3dlight-color:rosybrown;

scrollbar-arrow-color:black;

crollbar-darkshadow-color:black;

scrollbar-face-color:lightgreen;

scrollbar-highlight-color:white;

scrollbar-shadow-color:whitesmoke;

scrollbar-track-color:linen;}

-->

</STYLE>

 

挿入場所：<head>と</head>の間部分に、書いてください｡

カスタマイズの際、色はＨＴＭＬ ＣＯＬＯＲ ＣＯＬＬＥＣＴＩＯＮを参考にしてみて下さい。

 

小技２：最新更新時刻の表示

<script type="text/javascript">

<!--

document.write("最新更新時刻：" + document.lastModified);

// -->

</script>

 

挿入場所：<head>と</head>の間部分に、書いてください｡

ちなみにwritelnにすると、ページに入った時刻になります｡（たぶん）

 

小技３：ステータスバーに文字を表示する

 <SCRIPT type="text/javascript">

<!--

defaultStatus="最新更新内容：topページ";

//-->

</SCRIPT>

 

挿入場所：<head>と</head>の間部分に、書いてください｡

“”の中身が表示されます。

 

小技４：マウスが乗るとリンク部分が色つきで動く

<style> <!--

a:link, span.MsoHyperlink{color:black;text-decoration:none;text-decoration:none;}

a:visited, span.MsoHyperlinkFollowed{color:#993300;text-decoration:none;}

A:hover {COLOR: deeppink; POSITION: relative; TOP: 4px; left:2;}

-->

</STYLE>

 

挿入場所：<head>と</head>の間部分に、書いてください｡

カスタマイズはA:hoverの中身を代えるだけでできると思います｡

ＣＯＬＯＲは色、ＴＯＰとleftは縦横に動く距離です。

 

小技５：マウスが乗るとコメントが出る（一般のコメントではない）

これは少し複雑です｡

手順１

 <SCRIPT language="JavaScript">

<!--

function up(text){

document.getElementById('te').innerHTML=text;

set.style.posLeft =document.body.scrollLeft+window.event.clientX+10;

set.style.posTop =document.body.scrollTop+window.event.clientY+10;

document.all('set').style.display="block";}

function kes(){document.all('set').style.display="none";}

//-->

</SCRIPT>

 

挿入場所：<head>と</head>の間部分に、書いてください｡

 

手順２

<DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set">

<TABLE BORDER=1 style="font-size:10.5pt;color=white;font-family:&quot;" BORDERCOLOR=mediumblue BGCOLOR="black" cellspacing=1 cellpadding=20>

<TR><TD BGCOLOR="black"><SPAN ID="te"></SPAN></TD></TR>

</TABLE>

</DIV>

 

挿入場所：<body></body>の間部分に、書いてください。

 

手順３

<a href="01.htm" onmouseover="up('かぎの言葉：『はじめ』<br>ポイント：人間のあらゆる失敗は神の救いによって補われた')"; onMouseout="kes()"><b>1<span style="font-family:&quot;ＭＳ 明朝&quot;">創世記 </span></b></a>

 

挿入場所：<body></body>の間部分に、書いてください。

 

一般に書く本文は「１」と「創世記」の部分だけです。（<span>部分は省略可）

A hrefの部分はリンク先。

onmouseoverの後の（）部分が、テキストの中身になります｡