ホームページを作ろう！タグ講座



■■■■■■■■■■■■各種設定値■■■■■■■■■■■■

トップの写真
品質　８８％
５００ｘ３７５

VIP ROOMの写真
品質　３３％
５００ｘ３７５

■■■■■文章の初めと終わりに必ず入れるもの■■■■■
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<META name="robots" content="all">
<META name="keywords" content="リリー,リリーちゃん,リリーちゃんの部屋ヘヤ">
<META name="description" content="愛犬リリーちゃんの近状報告や管理人：ジュンちゃんの気ままなホームページリリーちゃんの部屋">
<title>お気に入りにした時に表示される名前</title>
</head>
<body bgcolor="#ffffdd" text="#000000" link="#ff0000" alink="#00ff00" vlink="#0000ff">
ここへ本文ホンブンを記入する
</body>
</html>

■■■■■■■■■■■■ブラウザで表示されない文章を入れる■■■■■■■■■■■■
<!-- ここに文章を書くと何行ナンギョウでも表示ヒョウジされない -->
// ここに文章を書くとその１行１ギョウのみ表示ヒョウジされない

<!--▼▼▼▼▼▼▼▼▼▼マウスポインタの変更ヘンコウ▼▼▼▼▼▼▼▼▼▼-->
<!--●●●記入キニュウする箇所カショはheadから/headまで●●●-->
<Style Type="text/css">
<!--
Body{cursor:url(マウスポインタファイルの指定シテイ、aniファイル);}
//-->
</Style>
<!--▲▲▲▲▲▲▲▲▲▲マウスポインタの変更▲▲▲▲▲▲▲▲▲▲-->

■■■■■■■■■■■■表題ヒョウダイ１■■■■■■■■■■■■

<center>
<fieldset style={border-color:blue;width:90%}>
<legend style={font-size:13pt;color:red;font-weight:bold;}>
最近更新したもの&おすすめ
</legend>
</center>
<font size="1"><br></font>
<table border="0">
<tr>
<td WIDTH="22"></td>
<td>
<!--▼▼▼▼▼▼▼▼▼▼▼▼▼　コメント　▼▼▼▼▼▼▼▼▼▼▼▼▼-->
<!--▲▲▲▲▲▲▲▲▲▲▲▲▲　コメント　▲▲▲▲▲▲▲▲▲▲▲▲▲-->
</td>
</tr>
</table>
<br></fieldset>

■■■■■■■■■■■■表題ヒョウダイ１■■■■■■■■■■■■

■■■■■■■■■■■■文章ブンショウの装飾ソウショク■■■■文章の装飾■■■■文章の装飾■■■■■■■■■■■■
<font face="変えたいフォント名称">フォントを変えたい文章</font>
■文字モジ：サイズ■
<h1-6>サイズを変更する文章h1が最大サイダイ</h1-6>
<font size="1-7">サイズを変更する文章 7が最大サイダイ </font>
■文字モジ：色イロ■
<font color="#*****">色を変える文章 </font>
■文字モジ：太字フトジ■
<b>太字に変更する文章ブンショウ</b>
■文字：斜体■
<i> 斜体にする文章　</i>
■文字：下線■
<u> 下線を引く文章 </u>
■文字：上付ウエツき文字モジ■
<Sup></Sup>
■文字：下シタ付ツき文字モジ■
<Sub></Sub>
■文字：取り消し線■
<s> 取り消し線を引く文章　</s>
■文字：文字モジにふりがな■
<ruby><rb>文字<rt>ふりがな</ruby>
■文字：上下ジョウゲ左右サユウにスペース開アける■
<blockquote>文章ブンショウ</blockquote>
■文字：改行■
<br>
■文字：中央配置■
<center>中央配置させる文章</center>
<div align="center">中央寄せ</Div>
■文字：右ミギ配置■
<h3 align="right">右配置させる文章</h3>
<div align="right">右寄せ</Div>
■文字：書いたままを表示■
<per>書いたままを表示させる文章</per>
■文字：点滅■
<SCRIPT language="JavaScript">
<!--
function b(){document.all.a.style.visibility = "hidden";setTimeout("c()", 500);}
function c() {document.all.a.style.visibility ="visible";setTimeout("b()", 500);}
//-->
</SCRIPT>
<BODY onLoad="c()">
<DIV ID="a">
点滅させる文字
</DIV>
■流ナガれる文字：右ミギから左ヒダリ■
<Marquee>普通</Marquee>
■流ナガれる文字：左ヒダリから右ミギ■
<Marquee direction="right">右へ進む</Marquee>
■流ナガれる文字：幅ハバを指定シテイ■
<Marquee width="200">横幅を決めた</Marquee>
■流ナガれる文字：右ミギや左ヒダリに行イったり来キたり■
<Marquee behavior="alternate">左右へ動く</Marquee>
■流ナガれる文字：背景色ハイケイショク入イり■
<Marquee Bgcolor="色コード">背景色付き</Marquee>
■流ナガれる文字：マウスで停止テイシ■
<Marquee onmouseover=this.stop() onmouseout=this.start()>
オンマウスで静止
</Marquee>

★★★★★水平線を引く★★★★★水平線を引く★★★★★水平線を引く★★★★★
<hr>
■水平線：太フトさ指定シテイ■
<hr size="1">
■水平線：色付イロツき■
<hr size="1" color="#ffffff">
<hr color="#0000ff">
■水平線：影カゲ無ナし■
<hr Noshade>
■水平線：幅ハバ指定シテイ■
<hr Width="200">
<hr Width="80%">
■■水平線：位置イチを指定シテイ■■
■水平線：左寄ヒダリヨせ■
<hr Align="left" Width="150">
■水平線：中央チュウオウ寄ヤドリキせ■
<hr Align="center" Width="150">
■水平線：右ミギ寄ヤドリキせ■
<hr Align="right" Width="150">

★★★★★画像を貼り付ける★★★★★画像を貼り付ける★★★★★画像を貼り付ける★★★★★

■画像：サイズ指定シテイ■
<img src="画像ファイル名"alt="画像の説明文章 "width="800" height="600">
■画像：右上に文章を書く■
<img src="画像ファイル名" align="top" alt="画像の説明文章 "width="800" height="600">
■画像：右中に文章を書く■
<img src="画像ファイル名" align="middle" alt="画像の説明文章 "width="800" height="600">
■画像：右下に文章を書く■
<img src="画像ファイル名" align="bottom" alt="画像の説明文章 "width="800" height="600">
■画像：左上に文章を書く■
<img src="画像ファイル名" align="right" alt="画像の説明文章 "width="800" height="600">
■壁紙：画像から読み込み■
<body background= "壁紙にしたい画像ファイル名">
■画像：右ミギから左ヒダリに動ウゴかす■
<Marquee Bgcolor="#e1f4ff"><Img Src="hikosen.gif"></Marquee>
■画像：枠ワクを表示ヒョウジ■
<img src="画像ファイル名" width="92" height="63" border="1">

★★★★★★★★音楽や映像を貼り付ける★★★★★★★★音楽オンガクや映像エイゾウを貼り付ける★★★★★★★★

■初めから流れる　１演奏エンソウのみ■
<embed src="流したいファイル名.mp3"autostart="true">
■初めから流れる　エンドレス■
<embed src="流したいファイル名.mp3" autostart="true" loop="true">
■再生サイセイボタンで演奏エンソウ■
<embed src="流したいファイル名.mp3"autostart="false">
■プレイヤーを表示させない■
<embed src="流したいファイル名.mp3"autostart="true" width="0" height="0">
■プレイヤーを小さく表示■
<embed src="流したいファイル名.mp3"autostart="true" width="120" height="40">
■画像ガゾウサイズを指定シテイして表示■
<embed src="流したいファイル名.wmv" autostart="true" volume="-2000" width="600" height="450">

■プレイヤーコーデックをダウンロードさせる■
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=4,0,0,0" width=640 height=480>
<param name=movie value="リンク先サキファイル名メイ　.swf">
<param name=quality value=high>
<embed src=".swf" quality=high width=640 height=480 type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>

★★★★★リンク★★★★★リンク★★★★★リンク★★★★★リンク★★★★★リンク★★★★★

■リンク文字色の指定■
<body link="★" alink="☆" vlink="●">
★=未リンク状態の文字色（カラーコードまたはカラーネーム）
☆=リンク中状態の文字色（カラーコードまたはカラーネーム）
●=リンク済みの文字色（カラーコードまたはカラーネーム）
■リンク文字色の指定■

■リンク文字色の指定：リンクの装飾をそれぞれ指定■
<style Type="text/css">
<!--
a:link { text-decoration:none; color:#000080; }
a:visited { text-decoration:none; color:#000080; }
a:active { text-decoration:underline; color:#000080; }
a:hover { text-decoration:underline; color:#1e78ff; }
//-->
</style>

a:link … リンク前
a:visited … リンク後
a:active … 押した時
a:hover … ポイント時

■リンクを張ハる■
<a href="リンクするファイル名メイまたはＵＲＬ">リンクの説明セツメイ文ブン</a>
■リンクを張ハる：オンマウスで説明文セツメイブン表示ヒョウジ■
<a href="リンクするファイル名メイまたはＵＲＬ" title="説明文">リンクの説明セツメイ文ブン</a>
■リンクを張る：新しいウィンドウを開く■
<a href="リンクするファイル名メイまたはＵＲＬ" target="_blank">リンクの説明セツメイ文ブン</a>
■リンクを張る：新しいウィンドウを開くサイズの指定シテイ■
<a href="javascript:w=window.open('アドレス','','scrollbars=yes,Width=250,Height=100');w.focus();">リンク名メイ</A>
■リンクを張る：新しいウィンドウを開くサイズの指定シテイ　ボタンタイプ■
<Form><input name="openWin" type="button" value="ボタン" onClick="window.open('アドレス','','scrollbars=yes,width=250,height=100,');"></Form>

■画像にリンクを張る■
<a href="リンクする場所　例　http//yahoo.co.jp" target="blank">
<img src="画像ファイル名" border="0"width="800" height="600">
</a>
■リンクの下シタ線センを表示ヒョウジさせない■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<A HREF="xxx.html" style="text-decoration: none;">リンクの説明セツメイ文ブン</A>

■ページ全体ゼンタイのリンクの下シタ線センを表示ヒョウジさせない■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!--▼▼▼▼▼▼▼▼▼▼ページ全体のリンクの下線を表示させない▼▼▼▼▼▼▼▼▼▼-->
<STYLE TYPE="text/css">
<!--
A{text-decoration:none}
-->
</STYLE>
<!--▲▲▲▲▲▲▲▲▲▲ページ全体のリンクの下線を表示させない▲▲▲▲▲▲▲▲▲▲-->
■リンクをボタンに変更する■
<FORM ACTION="xxx.html">
<INPUT TYPE=SUBMIT VALUE="リンクの説明文">
</FORM>
■リンクを張る：1つ前マエのページに戻モドる■
<a href="javascript:history.go(-1)">1つ前に戻る</a>
■リンクを張る：ボタンで1つ前マエのページに戻モドる■
<form><Input type=button value="１つ前へ戻る" onClick="javascript:history.go(-1)"></form>
■リンクを張る：閉トじる■
<a href="javascript:window.close();">閉じる</a>
■リンクを張る：ボタンで閉トじる■
<form><Input type="button" value="閉じる" onClick="javascript:window.close();"></form>
■リンクを張る：お気キに入イり■
<a href="javascript:window.external.AddFavorite('http://heo.jp/tag/','みんなのタグ辞書')">お気に入りに追加</a>
■リンクを張る：ボタンでお気キに入イり■
<form><Input type="button" value="お気に入りに追加" onClick="javascript:window.external.AddFavorite('http://heo.jp/tag/','みんなのタグ辞書')"></form>
■リンクを張る：スタートページ■
<a href="#" onclick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage('http://heo.jp/tag/');">みんなのタグ辞書をスタートページにする</A>
■リンクを張る：ボタンでスタートページ■
<form><Input type="button" value="みんなのタグ辞書" onclick="javascript:this.style.behavior='url(#default#homepage)';this.setHomePage('http://heo.jp/tag/');"></form>
■リンクを張る：更新コウシン■
<a href="javascript:history.go(0)">更新する</A>
■リンクを張る：ボタンで更新コウシン■
<form><Input type="button" value="更新する" onClick="javascript:history.go(0)"></form>

<!--▼▼▼▼メイン▼▼▼▼リンク先サキをフルサイズ画面ガメンで表示▼▼▼▼メイン▼▼▼▼-->
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!-- // ライブ映像をフルサイズで表示
function full()
{
WindowOpen = window. open('http://www15.plala.or.jp/gundog/homepage/live/live.html','_blank','fullscreen=1' ) ;
}
// -->
</SCRIPT>
<!--▲▲▲▲メイン▲▲▲▲リンク先をフルサイズ画面で表示▲▲▲▲メイン▲▲▲▲-->

<!--▼▼▼▼サブ▼▼▼▼リンク先サキをフルサイズ画面ガメンで表示▼▼▼▼サブ▼▼▼▼-->
<a href="JavaScript:full();">リンク先サキ名メイ</a>
<!--
<a href="live/live.html" target="blank">ライブ映像
</a>
// -->
<!--▲▲▲▲サブ▲▲▲▲リンク先をフルサイズ画面で表示▲▲▲▲サブ▲▲▲▲-->

■■■■■■■■■■ページ切り替え時にアラートウインドウを出す■■■■■■■■■■■
<!--●●記入キニュウする場所バショは、<body>タグの中ナカ●●-->
<!--▼▼▼▼▼▼▼▼▼▼ページ切り替え時にアラートウインドウを出す▼▼▼▼▼▼▼▼▼▼-->
<body bgcolor="#008b8b" onUnload="alert('さようなら、また来てね')">
<!--▲▲▲▲▲▲▲▲▲▲ページ切り替え時にアラートウインドウを出す▲▲▲▲▲▲▲▲▲▲-->

<!--▼▼▼▼▼▼▼▼▼▼ページ読み込ヨミコみ時にアラートウインドウを出す▼▼▼▼▼▼▼▼▼▼-->
<body bgcolor="#008b8b" onUnload="alert('さようなら、また来てね')">
<!--▲▲▲▲▲▲▲▲▲▲ページ読み込み時にアラートウインドウを出す▲▲▲▲▲▲▲▲▲▲-->

★★★★★★★★★★　　マウスがリンク上にのった時アクション　　★★★★★★★★★★

■マウスがリンク上にのった時：文字モジ色を変更　ver1■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!--▼▼▼▼▼マウスがリンク上にのった時：文字色を変更▼▼▼▼▼-->
<style type="text/css">
<!--
a:hover { color:#FF0000; }
-->
</style>
<!--▲▲▲▲▲マウスがリンク上にのった時：文字色を変更▲▲▲▲▲-->
■マウスがリンク上にのった時：文字背景色を変更 ver1■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!--▼▼▼▼▼マウスがリンク上にのった時：文字背景色を変更▼▼▼▼▼-->
<style type="text/css">
<!--
a:hover { background-color:#00ff00; }
-->
</style>
<!--▲▲▲▲▲マウスがリンク上にのった時：文字背景色を変更▲▲▲▲▲-->
■マウスがリンク上にのった時：文字背景色を変更　ver2■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
a:hover { background-color:色;}
■マウスがリンク上にのった時：文字をチョット移動イドウさせる■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
a:hover {position:relative; top:2;left:2;}
■マウスがリンク上にのった時：警告ケイコク文ブンを表示ヒョウジ(リンクは出来デキない）■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!--▼▼▼▼▼▼▼▼▼▼マウスがリンク上にのった時：警告文を表示▼▼▼▼▼▼▼▼▼▼-->
<script language="JavaScript">
<!--//
function popup(n)
{
alert("リンクは押させないョ");
}
//-->
</script>
<!--▲▲▲▲▲▲▲▲▲▲マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▲▲▲▲▲▲▲▲▲▲-->
<!--●●記入キニュウする場所バショは、<body>～</body>の間アイダ●●-->
<!--▼▼▼▼▼▼▼▼▼▼マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▼▼▼▼▼▼▼▼▼▼-->
<a href="#" onMouseOver="popup(1)">リンク</a>
<!--▲▲▲▲▲▲▲▲▲▲マウスがリンク上にのった時：警告文を表示(リンクは出来ない）▲▲▲▲▲▲▲▲▲▲-->

■マウスがリンク上にのった時：文字を移動/色を変更させる■
<style type="text/css">
<!--
A:hover{position:relative;top:3px;left:3px;color:#FF0000;}
-->
</style>

■マウスがリンク上にのった時：リンクを色線で囲む■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<!--▼▼▼▼▼▼▼▼▼▼マウスがリンク上にのった時：リンクを色線で囲む▼▼▼▼▼▼▼▼▼▼-->
<style type="text/css">
<!--
A {text-decoration:none}
A:hover{border:solid 1px;border-color:#FF0000;}
-->
</style>
<!--▲▲▲▲▲▲▲▲▲▲マウスがリンク上にのった時：リンクを色線で囲む▲▲▲▲▲▲▲▲▲▲-->

■マウスがリンク上にのった時：背景ハイケイに画像ガゾウを表示ヒョウジ■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
a:hover { background-image:url(背景URL);}

■マウスがリンク上にのった時：画像ガゾウを違チガう画像ガゾウに■
<a href="アドレス"><img src="元の画像" border="0"
onMouseOver="this .src='ポイント時の画像'"
onMouseOut="this .src='元の画像'"></A>

■メールのリンクを張る■
メールは<a href="mailto:ribbon@cocoa.plala.or.jp">こちら</a>まで
■メールのリンクを張り題名ダイメイも記入キニュウする■
メールは<a href="mailto:ribbon@cocoa.plala.or.jp?subject=件名">こちら</a>まで
■メールのリンクを張り題名ダイメイ・本文ホンブンも記入キニュウする■
メールは<a href="mailto:ribbon@cocoa.plala.or.jp?subject=件名&body=本文ホンブン">こちら</a>まで
■メールのリンクを画像ガゾウに張る■
メールは<a href="mailto:ribbon@cocoa.plala.or.jp"></a>
<img src="***.jpg"width="47" height="16"></a> まで

■一定時間後に自動的にページ移動■
<!--●●記入キニュウする場所バショは、<head>～</head>の間アイダ●●-->
<meta http-equiv="refresh" content="5;url=移動したいページのアドレス">
■戻モドるボタンやリンクボタンを表示ヒョウジさせる■
<center><tr height="74"><td width="252" height="74"></td>
<td width="348" height="74" valign="top" align="left" xpos="252">
<table width="95" border="1" cellspacing="2" cellpadding="0" bgcolor="#ffff99">
<tr><td><div align="center"><b>
<a href="http://www15.plala.or.jp/gundog/">進む</a>
</b></div></td></tr></table></td>
<td width="1" height="74"><spacer type="block" width="1" height="74"></td>
</tr><tr height="1" cntrlrow>
<td width="252" height="1"><spacer type="block" width="252" height="1"></td>
<td width="348" height="1"><spacer type="block" width="348" height="1"></td>
<td width="1" height="1"></td></tr></table><p></p></center>

★★★★★★★★★★★★　　文章ブンショウの書カく位置イチを変カえる　　★★★★★★★★★★★★
■左ぞろえ■
<h4 align="left">左ぞろえする文章</h4>
■中央ぞろえ■
<h4 align="center">中央ぞろえする文章</h4>
<center>中央ぞろえする文章</center>
■右ぞろえ■
<h4 align="right">右ぞろえする文章</h4>

■指定した範囲の巾のみ文章を書く■
</table>
<table width="320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
指定シテイした幅ハバのみ表示ヒョウジさせる文章を書く
</td>
</tr>
</table>

■フォントの変更■

★★★★★★★★★★★★　　１画面ガメンをいくつかに分ワける　　★★★★★★★★★★★★

■ホームページを左右サユウに分ワける■
<html>
<head>
<frameset cols="25%,75%">
<frame src="左側の .html">
<frame src="右側の .html">
</frameset>
</html>

境界線を表示させない時は
<html>
<head>
<frameset cols="25%,75%"frameborder="0">
<frame src="左側の .html">
<frame src="右側の .html">
</frameset>
</html>

■ホームページを上下に分ける■
<html>
<head>
<frameset rows="25%,75%">
<frame src="上側の .html">
<frame src="下側の .html">
</frameset>
</html>

■ホームページを上下左右に分ける■
<html>
<head>
<frameset rows="75%,25%">
<frameset cols="25%,75%">
<frame src="左側の.html">
<frame src="右側の.html">
</frameset>
<frame src="下側の.html">
</frameset>
</html>

<html>
<head>
<frameset cols="25%,75%">
<frame src="right.html">
<frameset rows="75%,25%">
<frame src="bottom.html">
<frame src="left.html">
</frameset>
<frame src="left.html">
<frame src="right.html">
</frameset>
<html>

<html>
<head>
<frameset rows="25%,75%">
<frame src="right.html">
<frameset cols="25%,75%">
<frame src="bottom.html">
<frame src="left.html">
</frameset>
<frame src="left.html">
<frame src="right.html">
</frameset>
<html>

■■ホームページ内の余白の設定■■
<frame src="余白を作りたいファイル名.html"marginheight="30" marginwidth="30">

■■ホームページ内の標準の文字色の指定■■
<body text="#色の番号">

■■壁紙を画像から読み込み■■
<body background= "壁紙にしたい画像ファイル名">

■■アクセスカウンター■■
■表示ヒョウジなしカウントのみ■
<img src="/cgi-bin/Count.cgi?df=gundog_top.html\|dd=bfblack\|ft=0\|sh=N">
■表示ヒョウジあり■
<img src="/cgi-bin/Count.cgi?df=gundog_top.html\|dd=bfblack\|ft=0\|sh=Y\|incr=N">