TOP

index.html menu.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>--MENU--</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">

</HEAD>
<BODY id="back">

<TABLE cellpadding="0" cellspacing="0" style="width : 100%;height : 25px;" class="menu">
<TR>



<TD style="background-color :#C78E75;" class="tab"><A href="main.html" target="main">TOP</A></TD>
<TD style="background-color :#fa8282;" class="tab"><A href="profile.html" target="main">PROFILE</A></TD>
<TD style="background-color :#FFA973;" class="tab"><A href="main.html" target="main">DIARY</A></TD>
<TD style="background-color :#E6BE67;" class="tab"><A href="main.html" target="main">BBS</A></TD>
<TD style="background-color :#B9CC5C;" class="tab"><A href="link.html" target="main">LINK</A></TD>
<TD style="background-color :#408080;" class="tab"><A href="main.html" target="main">MAIL</A></TD>
<TD style="background-color :#6ab5ff;" class="tab"><A href="main.html" target="main">ABOUT</A></TD>

<TD align="right">■サイト名■</TD></TR></TABLE>

</BODY>
</HTML>

under.html main.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>TOP</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>

テンプレート番号：t-028 フレーム使用 画像あり ------------------------------------- 
t-029（インラインフレーム）のフレームバージョンです。 
-------------------------------------

上のタブは増やせます。 
<IMG src="image/a01.gif" width="60" height="25">←と<IMG src="image/a02.gif" width="100" height="25">←の画像が使用できます。 
大きい方にするときは 
style.cssの 
background-image : url(image/a01.gif); /* メニュー画像 */ 
width : 60px; height : 25px; を 
background-image : url(image/a02.gif); 
width : 100px; 
height : 25px; に変更してください。 ------------------------------------- 
メニューは好きな色に出来ます。 
■■■■■■■ 
こんな感じにグラデにしてみたり、好みの配色にどうぞ。 
※色の変更はstyle.cssではなく、直接menu.htmlでするようになっています。 
------------------------------------- 
文字の大きさなどの設定はstyle.cssでしています。 変更するときはstyle.cssを開いて編集して下さい。 他のページもこのページと同じ設定にするときは 
head内に＜LINK rel="stylesheet" href="style.css" type="text/css"＞を付け足してください。 
（＜＞は半角で！） このページを複製しても平気です。 
------------------------------------- 
禁止していること 
・再配布 、直リンク、HP製作代行での使用 
・商用サイトさまによる、FOOL LOVERSへのリンクの変更と 
　ソース内designed by　FOOLLOVERS*k　http://foollovers.com/の削除。 
カスタマイズの制限はありません。 何を変えても足しても引いてもかまいません。 
■ 「designed」の表記は小さくしたり、目立たない色にして頂いて構いません。 
　　外した場合は、リンクページなどにFOOL LOVERSをお邪魔させて下さい。 
■ 必要なページや素材があれば自由に追加・変更してください。 
■ 不要なページや素材は使わなくてもかまいません。 
■ メニューはサンプルです。その通りに使う必要はありません。 
■ 同梱素材の規約は素材のページと同一です。 
　　別の用途に使用してもOKですが、加工等される際には必ず規約をご確認下さい。 
『画像の白い部分（左上の透過していない部分）を背景色に合わせて塗りつぶしたいのだよ！』 
『むしろ直接色を塗ってしまいたいだよ！』 『透過してる部分を逆にしたいだよ！』 
『メニューの枠小さいだよ！大きくしたいだよ！』 
 →(´･ω･｀)ﾉ　おっけーです。どぞどぞ。

</BODY>
</html>

profile.html

link.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">

<TITLE>Link</TITLE>
<LINK rel="stylesheet" href="style.css" type="text/css">
</HEAD>
<BODY>
<TABLE cellpadding="0" cellspacing="0" style="border: 1px #000000 solid;">
<TR>

<TD style="background-color : #fa8282;width : 30px;height : 25px;"></TD>
<TD valign="middle" align="center" style="background-color : #ffffff;width : 100px;">相互リンク</TD>
</TR></TABLE> 
<a href="http://foollovers.com/">FOOL LOVERS</a> 
<a href="http://foollovers.com/">フルラバ</a> 
 
<TABLE cellpadding="0" cellspacing="0" style="border: 1px #000000 solid;">
<TR>

<TD style="background-color : #ffa973;width : 30px;height : 25px;"></TD>
<TD valign="middle" align="center" style="background-color : #ffffff;width : 100px;">友達リンク</TD>
</TR></TABLE> 
<a href="http://foollovers.com/">FOOL LOVERS</a> 
<a href="http://foollovers.com/">フルラバ</a> 
</BODY>
</html>

style.css

BODY {
  color : #000;  /* 文字色 */
  background-color : #FFF;  /* 背景色 */
  font-size : 12px;  /* 文字の大きさ */
  font-family : Verdana,Arial,Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS UI Gothic",serif;
  scrollbar-face-color:#FFF;  scrollbar-highlight-color:#000;
  scrollbar-shadow-color:#000;  scrollbar-darkshadow-color:#000;
  scrollbar-arrow-color:#000;  scrollbar-track-color:#FFF;
}
/* リンクの設定 */
A {
  color : #999;
  font-size : 12px;
  text-decoration : none;
}
A:HOVER {
  position : relative;   top : 1pt;  left : 1pt;/* リンクに触れると動く設定 */
}
A img{
 border-style: none;
}

/* テーブルの設定 */
TD {
  color : #000;
  font-size : 12px;
}

/* ------menu.html ------*/
#back {
  background-color : #FFF;  /* メニューの背景色 */
  margin : 10px 0px 0px 0px;
}

.menu{
  color : #000;  /* 上フレーム文字色 */
  font-size : 10px;
  border-bottom : 1px solid #000;
}
.menu A{
  color : #FFF;  /* 上フレームリンク文字色 */
  font-size : 10px;
}
.tab {
  background-image : url(image/a01.gif);  /* メニュー画像 */
  width : 60px;
  height : 25px;
  text-align : center;
}

/* ------under.html------*/
#bottom {
  background-color : #e1d7b8;  /* 下フレームの背景色 */
  margin : 0px;
  border-top : 1px solid #000;
  text-align : right;
}
#bottom A{
  color : #999;  /* 下フレームのリンク色 */
  font-size : 10px;
}

image

※ソースはimageフォルダに入れた状態になっていますので
imageフォルダの中に入れるか、ソースを書き換えて下さい。

a01.gif 　

a02.gif 　