見出し4（この大見出しはh4で記述します）
ホームページ作成ソフトで使用する場合、ソフトによっては使用する画像に border="0"が自動的に挿入されます。画像のborder（枠線）は外部CSSでゼロに設定されていますので、自動挿入される場合は消去してください。
見出し5（小見出しはh5です）
外部CSSの読み込みは<head>と</head>の間、<link href="style.css"
rel="stylesheet" type="text/css">でされています。
現在、本文が左側に来るようになっていますが、"style.css"を収録されているもうひとつのファイル"style2.css"にすると、本文が右側に配置されます。
- このスクロールは基本的にお知らせなどを記入するのに使用できます。
- <div class="scroll"></div>の間に記述していきます。
- スクロールを必要としないページでは<div class="scroll"></div>を消します。
- 外部スタイルシートにあるdiv.scrollがこの部分の設定になります。設定方法についてはCSS（スタイルシート）で作るスクロールバー付メッセージボックスをご参照下さい。
- このスクロール内や、左側メインコンテンツに画像を使うことは勿論可能ですが、現在CSSで画像の配置の設定をしていません。左側に寄せたい場合は以下の画像で（HTML内で）設定されているように、style="float : left;を記述します。右側にする場合は、leftをrightにするだけです。
リンクの設定について・・・看板イメージ写真下のリンクメニューは<li>タグを使用しています。今開いているページの部分だけ青くしたい場合は、この<li>タグにCSSを読み込ませます<li id="active">のようになります。現在、Link1がそのようになっていますので、HTMLをご参照下さい。
当然のことですが、<div class="scroll"></div>は何度でも使えます。例えば以下で「見出し１、看板部分の設定」をスクロール内で説明している様にです。
さらに小さな見出しを必要とする場合はh6を使用してください
見出し１、看板部分の設定について
このページの看板部分は外部CSSのh1で設定されています。看板部分の画像は背景で設定されています。外部CSSファイル、「style.css」を開き、中段よりやや下に以下のようなh1の設定部分があります。
h1{
width : 720px;
height : 200px;
background-image : url(img/top.jpg);
background-repeat : no-repeat;
padding-top : 40px;
padding-left : 20px;
color : white;
margin-bottom : 10px;
font-size : 34px;
}
以下設定内容の解説です。
h1{
width : 720px; 【幅です。変更しないで下さい】
height : 200px; 【背景に使用する画像の高さに合わせて下さい】
background-image : url(img/top.jpg); 【背景画像はtop.jpgの名前でimageフォルダに保存します】
background-repeat : no-repeat; 【no-repeatにしておかないとFire Foxで背景が繰り返し表示されてしまいます】
padding-top : 40px; 【サイトのタイトルは背景画像の上から40pxの位置です】
padding-left : 20px; 【サイトのタイトルは背景画像の左から20pxの位置から始まります】
color : white; 【現在サイトのタイトルのフォントは白に設定されています】
margin-bottom : 10px 【背景画像からリンクバーまでの空間は10pxです】;
font-size : 34px; 【サイトタイトルのフォントは現在34pxです】
}
大事なのは、看板に使用する画像の色と、タイトルのテキストの色の設定です。タイトルが見やすい配色が肝心です。背景画像を作成する際は画像の幅は720pxで作成してください。高さはお好きなように作成していただいて構いません。その際、作成した画像の高さとh1の設定、heightを同じにします。必要であれば、font-sizeやpaddingの設定を変更してください。
その他注意点
※テキストリンクにはタイトルを入れます。今、このページをブラウザで見ると、リンクにマウスを合わせると「リンクにはタイトルを入れます」というツールチップが表示されます。このツールチップがタイトルです。設定方法は「テキストリンクにタイトルをつける」をご覧下さい。
※すべて画像（背景設定画像を除く）には代替テキストがアクセシビリティ面でもSEO面でも必要です。例えば、このサイトのスクロール内で使用されている画像のタグは、
<img src="img/image1.gif" width="170" height="127"
style="float : left;" alt="画像には代替テキストを入れます">
というもので、この中の「画像には代替テキストを入れます」という部分です。これもオンマウス時にツールチップで表示されます。
このテンプレートはW3C WEB標準、HTML4.01、CSS2.1で記述されています。文字コードはUTF-8です。
Another HTML-lint gatewayで検証すると、リンク先をきちんと記述すれば（現在は空の状態なので）100点が取れるはずです。
その他「SEO対策の基本」、「スパムサイトについて」などもご参考になさってください。