テンプレ一般説明
テンプレートのご紹介
ソースコードの提示
ブロックの説明
テンプレート001-010
001：GrayTone
002：BlackBoard
003：BlackBoardRightSide
004：BlackBoard3Columns
005：BlackBoard3ColRight
Photo-Gさんご提供
テンプレート#003
AGssさんご提供
テンプレート026
Googleで検索
スポンサード リンク
テンプレートのご紹介
ここでは、実際にテンプレートをご紹介します。各テンプレートごとに、ソースコードの提示など詳細に解説していますので、初心者の方でも分かりやすいかと思います。
中には再配布可能なテンプレートを利用させていただき「海苔巻」用に加工したものがあります。それらのテンプレートに関しては、ソースの解説は必要最低限に留めます。
また再配布可能なテンプレートを利用させてもらった場合、その著作権は僕ではなく、テンプレート作者様にあります。
また、テンプレート内で使用している画像等が再配布可能なものをテンプレート作者様が利用されている場合は、その画像の著作権は画像を作成された方に属します。
当サイトでご紹介するテンプレートでは、僕の自作以外のテンプレートに関しては、テンプレートの配布元を明記しておきますので、著作権は僕ではなく配布元サイト様に属します。
中には再配布可能なテンプレートを利用させていただき「海苔巻」用に加工したものがあります。それらのテンプレートに関しては、ソースの解説は必要最低限に留めます。
また再配布可能なテンプレートを利用させてもらった場合、その著作権は僕ではなく、テンプレート作者様にあります。
また、テンプレート内で使用している画像等が再配布可能なものをテンプレート作者様が利用されている場合は、その画像の著作権は画像を作成された方に属します。
当サイトでご紹介するテンプレートでは、僕の自作以外のテンプレートに関しては、テンプレートの配布元を明記しておきますので、著作権は僕ではなく配布元サイト様に属します。
ソースコードの提示
各種テンプレート紹介・解説ページでは、中級者以上向けのリファレンス（テンプレートの内容をさらりと説明しただけ）のページと共に初心者の方の為にソースを提示して、詳しく説明しているページとを用意してあります。ご自身に合わせてご利用下さい。
中級者以上向けのリファレンスは単純な解説にとどまっています。また、HTML,CSSソースを見れば分かるようにもなっていますので、ソースを直接見ていただいたほうが理解が早いかと思います。
初心者向けの解説ページに関して提示するテンプレートファイルのソースは具体的には以下のようになります。スタイルシートでの<DIV>タグ（大まかなブロックを構成するタグ）の効果の及ぼす範囲を色付けして表示しています。
そして、それらについてどのような働きをしているのかという事を説明します。ここではテンプレート002を表示しています。
中級者以上向けのリファレンスは単純な解説にとどまっています。また、HTML,CSSソースを見れば分かるようにもなっていますので、ソースを直接見ていただいたほうが理解が早いかと思います。
初心者向けの解説ページに関して提示するテンプレートファイルのソースは具体的には以下のようになります。スタイルシートでの<DIV>タグ（大まかなブロックを構成するタグ）の効果の及ぼす範囲を色付けして表示しています。
そして、それらについてどのような働きをしているのかという事を説明します。ここではテンプレート002を表示しています。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>ここにページタイトルを入力して下さい</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="description" content="サイトの説明を入力して下さい">
<meta name="keywords" content="サイトのキーワードを入力して下さい">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- Table Start -->
<Table align="center" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#eeffdd"><td>
<!-- Screen Draw start -->
<!-- Screen Draw end -->
</body>
</html>
<html>
<head>
<title>ここにページタイトルを入力して下さい</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta name="description" content="サイトの説明を入力して下さい">
<meta name="keywords" content="サイトのキーワードを入力して下さい">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<!-- Table Start -->
<Table align="center" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#eeffdd"><td>
<!-- Screen Draw start -->
<DIV id="bg">
<!-- main start -->
<!-- main end -->
</td></tr><tr><td>
<!-- advertisement start -->
<!-- advertisement end -->
<!-- copyright start -->
<!-- copyright end -->
</td></tr></table>
<!-- Table End -->
</DIV>
<DIV id="TopArea">
<h1>
右上のサイト説明を入力して下さい。<br>
バックの画像はスタイルシートの＃TopArea部分の<br>
background-image: url(img/logo.jpg);<br>
の(img/logo.jpg)の部分を変更することで可能です。
</h1>
</DIV>
<h1>
右上のサイト説明を入力して下さい。<br>
バックの画像はスタイルシートの＃TopArea部分の<br>
background-image: url(img/logo.jpg);<br>
の(img/logo.jpg)の部分を変更することで可能です。
</h1>
</DIV>
<!-- main start -->
<DIV id="main">
<a name="Top"></a>
<!-- menu start -->
<!-- menu end -->
<!-- item start -->
<!-- item end -->
</DIV>
<a name="Top"></a>
<!-- menu start -->
<DIV id="side">
<h2>リンクタイトル</h2>
<h3>
<a href="index.html#Top">記事タイトル１</a><br>
<a href="index.html#CurbIY2-4">記事タイトル２</a><br>
</h3><br>
<h2><a href="index2.html">リンクタイトル２</a></h2>
<h3>
<a href="index2.html#Top">２ページ目-記事１</a><br>
<a href="index2.html#D0BMBY2-7">２ページ目-記事２</a><br>
</h3><br>
<br>
<h4>情報ボックス</h4>
<!-- 変更無用 -->
</DIV>
<h2>リンクタイトル</h2>
<h3>
<a href="index.html#Top">記事タイトル１</a><br>
<a href="index.html#CurbIY2-4">記事タイトル２</a><br>
</h3><br>
<h2><a href="index2.html">リンクタイトル２</a></h2>
<h3>
<a href="index2.html#Top">２ページ目-記事１</a><br>
<a href="index2.html#D0BMBY2-7">２ページ目-記事２</a><br>
</h3><br>
<br>
<h4>情報ボックス</h4>
<DIV id="MesBox">
ここに情報ボックスの内容を入力して下さい。<br><br>
<H4>タグでタイトルを表示できます。<br><br>
下のHomePageTemplatersへのリンクは削除禁止です。</DIV>
<br>ここに情報ボックスの内容を入力して下さい。<br><br>
<H4>タグでタイトルを表示できます。<br><br>
下のHomePageTemplatersへのリンクは削除禁止です。</DIV>
<!-- 変更無用 -->
<DIV id="PoweredByHPTemplaters">
<a href="http://hptemplaters.projecteb.com/" target="blank">Powered By<br>HomePageTemplaters</a>
</DIV>
<a href="http://hptemplaters.projecteb.com/" target="blank">Powered By<br>HomePageTemplaters</a>
</DIV>
</DIV>
<!-- menu end -->
<!-- item start -->
<DIV id="item">
<h1>記事タイトル１</h1><hr>
<a name="CurbIY2-4"><br></a>
<h1>記事タイトル２</h1><hr>
</DIV>
<h1>記事タイトル１</h1><hr>
<DIV id="itembody">
ここに記事本文を入力して下さい<br><br>
<br><br>
</DIV>
ここに記事本文を入力して下さい<br><br>
<DIV id="quote">
<div id="quote">から</div>で括ることにより、このような枠で囲む表示をすることができます。
</DIV>
<div id="quote">から</div>で括ることにより、このような枠で囲む表示をすることができます。
</DIV>
<br><br>
</DIV>
<DIV align="right"><a href="#Top">ページのトップへ</a></DIV>
<a name="CurbIY2-4"><br></a>
<h1>記事タイトル２</h1><hr>
<DIV id="itembody">
ここに記事本文を入力して下さい<br><br>
</DIV>
ここに記事本文を入力して下さい<br><br>
</DIV>
<DIV align="right"><a href="#Top">ページのトップへ</a></DIV>
</DIV>
<!-- item end -->
</DIV>
<!-- main end -->
</td></tr><tr><td>
<!-- advertisement start -->
<DIV id="ad">
ここに広告が入ります。アフィリエイトなどのリンクを貼ってください
</DIV>
ここに広告が入ります。アフィリエイトなどのリンクを貼ってください
</DIV>
<!-- advertisement end -->
<!-- copyright start -->
<DIV id="copyright">
Copyright 2005 HPTemplaters All Rights Reserved. メールはこちらまで <a href="mailto:xxxxxxx@xxxxxxx.com">xxxxxxx@xxxxxxx.com</a>
</DIV>
Copyright 2005 HPTemplaters All Rights Reserved. メールはこちらまで <a href="mailto:xxxxxxx@xxxxxxx.com">xxxxxxx@xxxxxxx.com</a>
</DIV>
<!-- copyright end -->
</td></tr></table>
<!-- Table End -->
</DIV>
<!-- Screen Draw end -->
</body>
</html>
ブロックの説明
各テンプレートの詳細説明ページでは、ソースコードの提示の後、各DIVブロックについてどのような働きをしているかということと、具体的にどのように使うのかという事を説明しています。
ここでは省略しますが、各種色分けしているブロックについて詳細に説明していますので、詳しくはテンプレートの詳細ページをご覧下さい。
ここでは省略しますが、各種色分けしているブロックについて詳細に説明していますので、詳しくはテンプレートの詳細ページをご覧下さい。