ホームページテンプレート HTMLテンプレート 無料配布

XHTML ホームページテンプレート使用法



  1. ホームページテンプレートをダウンロードする
  2. ホームページのタイトルをつける
  3. ホームページのキーワードをつける
  4. ホームページの概要をつける
  5. 見出しををつける
  6. メニューを作る
  7. プルダウンメニューを作る
  8. サブメニューを作る
  1. ツリーメニューを作る
  2. サイドボックスを使う
  3. 本文を書く
  4. スクロールボックスや、カラーボックスを使う
  5. レイアウトボックスを組み合わせる
  6. Copyrightを入れる
  7. オリジナル画像を使う

ホームページテンプレートをダウンロードする


使用したいホームページテンプレートを、ホームページテンプレート一覧からダウンロードします。
ダウンロードした、( zip ) ファイルを解凍します。
中にある（ index.html ）ファイルがトップページになります。
メモ帳などのテキストエディタで開くと以下のようになっています。
色のついた部分を編集します。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>タイトル</title>
<meta name="Keywords" content="キーワード１,キーワード２,キーワード３" />
<meta name="Description" content="サイトの説明" />
</head>
<body>
<!-- body▼ -->
<div id="body">
<!-- header▼ -->
<div id="header">
<h1 name="top" id="top"><a href="index.html">SITE NAME</a></h1>
</div>
<!-- header▲ -->
<!-- メニュー▼ -->
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="page2.html">ページ　２</a></li>
<li><a href="page2.html">ページ　３</a></li>
<li><a href="page2.html">ページ　４</a></li>
<li><a href="page2.html">ページ　５</a></li>
 </ul>
</div>
<!-- メニュー▲ -->
<!-- left▼ -->
<div id="left">
<h4>MENU</h4>
<!-- サブメニュー▼ -->
<ul id="menu2">
<li><a href="#a01">メニュー　１</a></li>
<li><a href="#a01">メニュー　２</a></li>
<li><a href="#a01">メニュー　３</a></li>
<li><a href="#a01">メニュー　４</a></li>
<li><a href="#a01">メニュー　５</a></li>
 </ul>
<!-- サブメニュー▲ -->
<!-- leftコンテンツ▼ -->
<!-- サイドボックス▼ -->
<div class="box_head">サイドボックス</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
 <!-- サイドボックス▲ -->
<!-- leftコンテンツ▲ -->
</div>
<!-- left▲ -->
<!-- main▼ -->
<div id="main">
<!-- メインコンテンツ▼ -->
<h2>見出し</h2>
<p>
ここにテキスト
</p>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
<div class="up"><a href="#top">Page Top ▲</a></div>
<!-- メインコンテンツ▲ -->
</div>
<!-- main▲ -->
<!-- right▼ -->
<div id="right">
<!-- rightコンテンツ▼ -->
<!-- rightコンテンツ▲ -->
</div>
<!-- right▲ -->
<!-- footer▼ -->
<div id="footer">
<br /><br /><br />
Copyright (C) <a href="">サイト名</a> All Rights Reserved.
</div>
<!-- footer▲ -->
<div id="copy">
<!--削除しないでください-->
<p><a href="http://homepagetemplate.web.fc2.com/" target="_blank" title="ホームページ テンプレート フリー H.P.T.F">ホームページ テンプレート フリー</a></p><p>Design by</p>
</div>
</div>
<!-- body▲ -->
</body>
</html>


Page Top ▲

ホームページのタイトルをつける


ホームページにタイトルをつけます。タイトルは、ブラウザのタイトルバーに表示されたり、お気に入りや、検索エンジンの検索結果として表示されます。
<title>タイトル</title>


Page Top ▲

ホームページのキーワードをつける


このページに関連するキーワードをつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
（ , ）で区切って複数記述することが出来ます。
記述しない場合は以下のタグを削除します。
<meta name="keywords" content="キーワード１,キーワード２,キーワード３" />


Page Top ▲

ホームページの概要をつける


このページの概要をつけます。検索エンジンの中にはこのキーワードを解釈してくれるものがあります。
記述しない場合は以下のタグを削除します。
<meta name="description" content="サイトの説明" />


Page Top ▲

見出しををつける


サイト名やキーワードを入れます。ロゴ画像を使うことも出来ます。
記述しない場合は以下のタグを削除します。
<h1><a href="index.html">SITE NAME</a></h1>
ロゴ画像を使用して、トップページにリンクする場合
<h1><a href="index.html"><img src="image/ロゴ画像" width="ロゴ横幅" height="ロゴ高さ" alt="サイト名" /></a></h1>


Page Top ▲

メニューを作る


作成するページの数だけメニューを作ります。
ページを増やす場合は、（ page2.html ）などを複製して（ page3.html page4.html... ）増やします。
<!-- メニュー▼ -->
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="page2.html">ページ　２</a></li>
<li><a href="page3.html">ページ　３</a></li>
<li><a href="page4.html">ページ　４</a></li>
<li><a href="page5.html">ページ　５</a></li>
 </ul>
</div>
<!-- メニュー▲ -->
メニューの横幅を変えたいときは、スタイルシートを変更します。
ホームページテンプレートをカスタマイズに、変更方法があります。


Page Top ▲

プルダウンメニューを作る


プルダウンメニューを増やす時は以下の部分を、メニュー部に追加します。
※スマートフォンでプルダウンメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、プルダウンメニューを使う箇所は、一番上のリンクは空にします。
 <li><a href=""></a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>ページ　２</a>　一番上のリンクは空にします
<ul class="sbm">
<li><a href="page2.html">ページ　2-1</a></li>
<li><a href="page3.html">ページ　2-2</a></li>
<li><a href="page4.html">ページ　2-3</a></li>
</ul>
</li>
 プルダウンメニューを使わない時は以下の部分を削除します。
<ul class="sbm">
<li><a href="page3.html">ページ　2-1</a></li>
<li><a href="page4.html">ページ　2-2</a></li>
<li><a href="page5.html">ページ　2-3</a></li>
</ul>
 ※ホームページテンプレート　プルダウンメニュー＆ツリーメニュー付き用。


Page Top ▲

サブメニューを作る


メインメニューだけでは足りない時や、ページ内リンクに使います。
必要のない場合は削除できます。
※ホームページテンプレート１面タイプには、サブメニューはありません。
<!-- サブメニュー▼ -->
<h4>MENU</h4>
<ul id="menu2">
<li><a href="#a01">メニュー　１</a></li>
<li><a href="#a01">メニュー　２</a></li>
<li><a href="#a01">メニュー　３</a></li>
<li><a href="#a01">メニュー　４</a></li>
<li><a href="#a01">メニュー　５</a></li>
</ul>
 <!-- サブメニュー▲ -->
ページ内リンクとして使う場合
ジャンプしたい所に、　name="" と　id=""　をつけます。
使用例
<h3 name="a01" id="a01"></h3>
<a name="a01" id="a01"></a>
サブメニューに<a href="#a01">a01にジャンプ</a>を作ります。
※a01は好きな英数字


Page Top ▲

ツリーメニューを作る


ツリーメニューを増やす時は以下の部分を、サブメニュー部に追加します。
※スマートフォンでツリーメニューをタップすると、メニューが表示される前にリンク先に移動してしまうので、ツリーメニューを使う箇所は、一番上のリンクは空にします。
 <li><a href=""></a></li>
<li onmouseover="this.className='on'" onmouseout="this.className='off'" class="off">
<a>メニュー　2</a>　一番上のリンクは空にします
<ul class="sbm2">
<li><a href="page2.html">メニュー　2-1</a></li>
<li><a href="page3.html">メニュー　2-2</a></li>
<li><a href="page4.html">メニュー　2-3</a></li>
</ul>
</li>
 ツリーメニューを使わない時は以下の部分を削除します。
<ul class="sbm2">
<li><a href="page3.html">メニュー　2-1</a></li>
<li><a href="page4.html">メニュー　2-2</a></li>
<li><a href="page5.html">メニュー　2-3</a></li>
</ul>
 ※ホームページテンプレート　プルダウンメニュー＆ツリーメニュー付き用。
※ホームページテンプレート１面タイプには、ツリーメニューはありません。


Page Top ▲

サイドボックスを使う


サイドバーにサイドボックスを使います。
必要ない時は以下のタグを削除します。
※ホームページテンプレート１面タイプには、サイドボックスはありません。
<div class="box_head">ここにテキスト</div>
<div class="box_main">
<p>
ここにテキスト
</p>
</div>
 <div class="box_head"></div>内の文字はセンタリングされます。

サイドバーに見出しを使う場合は、<h4></h4>タグや、<h5></h5>タグを使います。
見出しは、<p></p>タグの外で使います。

<h4></h4>見出し

<h5></h5>見出し

Page Top ▲

本文を書く


文章を書くには、文章を<p></p>タグで囲みます。
見出しを使う場合は、<h2></h2>タグや、<h3></h3>タグを使います。
見出しは、<p></p>タグの外で使います。


<h2></h2>見出しは、文字がセンタリングされます

<h3></h3>見出し

<!-- メインテキスト▼ -->
<h2>見出し</h2>
<p>
ここにテキスト
</p>
<h3>見出し</h3>
<p>
ここにテキスト
</p>
 <div class="up"><a href="#top">Page Top ▲</a></div>
<!-- メインテキスト▲ -->

改行は<p></p>タグでくくり直すか、<br />タグを使います。
ホームページ作成 XHTMLに、XHTMLタグについての説明があります。


Page Top ▲

スクロールボックスや、カラーボックスを使う


下のようなスクロールボックスを使うには
<div class="sbox">
<p>
ここにテキスト
</p>
</div>
 とすることで使うことができます。
高さが150pxを超えるとスクロールバーが出ます。
スクロールボックスの高さを変えたいときは、スタイルシートで変更します。
ホームページテンプレートをカスタマイズに、変更方法があります。
スクロールボックスは、<p></p>タグの外で使います。

スクロールボックス
・
・
・
スクロールボックス
・
・
・
スクロールボックス


下のようなカラーボックスを使うには
<div class="cbox">
<p>
ここにテキスト
</p>
</div>
 とすることで使うことができます。
カラーボックスは、<p></p>タグの外で使います。

カラーボックス
・
・
・


Page Top ▲

レイアウトボックスを組み合わせる


レイアウトボックス１〜４を自由に組み合わせて、好みのデザインを作ります。

※ホームページテンプレート１面タイプ以外は、レイアウトボックスはありません。

<div id="main">
<!-- メインコンテンツ▼ -->
ここにレイアウトボックスを使います。
<!-- メインコンテンツ▲ -->
</div>

レイアウトボックス１
レイアウトボックス１は、一面タイプです。
レイアウトボックス１に見出しを使う場合は、<h2>タグや、<h3>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス１▼ -->
<div class="box1">
ここにコンテンツ
</div>
<!-- レイアウトボックス１▲ -->


レイアウトボックス２
レイアウトボックス２は、２分割タイプです。
レイアウトボックス２に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス２▼ -->
<div class="box2">
<div class="left1">
ここに左コンテンツ
</div>
<div class="right1">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス２▲ -->


レイアウトボックス３
レイアウトボックス３は、３分割タイプです。
レイアウトボックス３に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス３▼ -->
<div class="box3">
<div class="left2">
ここに左コンテンツ
</div>
<div class="center1">
ここに中央コンテンツ
</div>
<div class="right2">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス３▲ -->


レイアウトボックス４
レイアウトボックス４は、４分割タイプです。
レイアウトボックス４に見出しを使う場合は、<h4>タグや、<h5>タグを使います。
必要ない時は以下のタグを削除します。
<!-- レイアウトボックス４▼ -->
<div class="box4">
<div class="left3">
ここに左コンテンツ
</div>
<div class="center2">
ここに中央左コンテンツ
</div>
<div class="center3">
ここに中央右コンテンツ
</div>
<div class="right3">
ここに右コンテンツ
</div>
</div>
<!-- レイアウトボックス４▲ -->

文章を書くには、文章を<p></p>タグで囲みます。
見出しは、<p></p>タグの外で使います。


Page Top ▲

Copyrightを入れる


Copyrightを入れます。必要のない時は削除できます。
Copyright (C) <a href="index.html">サイト名</a> All Rights Reserved.


Page Top ▲

オリジナル画像を使う


オリジナル画像を使う場合は、以下の名前で [ image ] フォルダ内にある画像を、オリジナル画像で上書きしてください。 画像サイズを変更する場合は、スタイルシートも変更してください。
ホームページテンプレートをカスタマイズに、スタイルシートの変更方法があります。


ホームページテンプレートに使用している画像サイズ

ホームページテンプレート　３分割タイプ
ヘッダー画像 header.jpg 横幅850px 高さ150px
フッター画像 footer.jpg 横幅850px 高さ100px
背景画像 bg.gif 横幅850px 高さ1px
トップメニュー menu_bg.jpg 横幅850px 高さ30px
トップメニュー マウスオーバ menu.jpg 横幅300px 高さ30px
サイドメニュー menu2_bg.jpg 横幅180px 高さ25px
サイドメニュー マウスオーバー menu2.jpg 横幅180px 高さ25px
サイドボックスヘッダー box_h.jpg 横幅180px 高さ10px
サイドボックスフッター box_f.jpg 横幅180px 高さ10px
<h2></h2>タグ h2.jpg 横幅450px 高さ30px
<h3></h3>タグ h3.jpg 横幅450px 高さ30px
<h4></h4>タグ h4.jpg 横幅180px 高さ30px
<h5></h5>タグ h5.jpg 横幅180px 高さ30px

ホームページテンプレート　２分割タイプ
ヘッダー画像 header.jpg 横幅850px 高さ150px
フッター画像 footer.jpg 横幅850px 高さ100px
背景画像 bg.gif 横幅850px 高さ1px
トップメニュー menu_bg.jpg 横幅850px 高さ30px
トップメニュー マウスオーバ menu.jpg 横幅300px 高さ30px
サイドメニュー menu2_bg.jpg 横幅220px 高さ25px
サイドメニュー マウスオーバー menu2.jpg 横幅220px 高さ25px
サイドボックスヘッダー box_h.jpg 横幅220px 高さ10px
サイドボックスフッター box_f.jpg 横幅220px 高さ10px
<h2></h2>タグ h2.jpg 横幅600px 高さ30px
<h3></h3>タグ h3.jpg 横幅600px 高さ30px
<h4></h4>タグ h4.jpg 横幅220px 高さ30px
<h5></h5>タグ h5.jpg 横幅220px 高さ30px

ホームページテンプレート　フレームタイプ
ヘッダー画像 header.jpg 横幅850px 高さ150px
フッター画像 footer.jpg 横幅850px 高さ100px
背景画像 bg.gif 横幅850px 高さ1px
トップメニュー menu_bg.jpg 横幅850px 高さ30px
トップメニュー マウスオーバ menu.jpg 横幅300px 高さ30px
サイドメニュー menu2_bg.jpg 横幅200px 高さ25px
サイドメニュー マウスオーバー menu2.jpg 横幅200px 高さ25px
サイドボックスヘッダー box_h.jpg 横幅200px 高さ10px
サイドボックスフッター box_f.jpg 横幅200px 高さ10px
<h2></h2>タグ h2.jpg 横幅600px 高さ30px
<h3></h3>タグ h3.jpg 横幅600px 高さ30px
<h4></h4>タグ h4.jpg 横幅200px 高さ30px
<h5></h5>タグ h5.jpg 横幅200px 高さ30px

ホームページテンプレート　１面タイプ
ヘッダー画像 header.jpg 横幅850px 高さ150px
フッター画像 footer.jpg 横幅850px 高さ100px
背景画像 bg.gif 横幅850px 高さ1px
トップメニュー menu_bg.jpg 横幅850px 高さ30px
トップメニュー マウスオーバ menu.jpg 横幅300px 高さ30px
フッタメニュー menu_bg2.jpg 横幅850px 高さ20px
フッタメニュー マウスオーバ menu2.jpg 横幅300px 高さ20px
レイアウトボックス2背景画像 box2.gif 横幅830 高さ1px
レイアウトボックス3背景画像 box3.gif 横幅830 高さ1px
レイアウトボックス4背景画像 box4.gif 横幅830 高さ1px
レイアウトボックス1<h2></h2>タグ h2.jpg 横幅830px 高さ30px
レイアウトボックス1<h3></h3>タグ h3.jpg 横幅830px 高さ30px
レイアウトボックス2<h4></h4>タグ h4.jpg 横幅410px 高さ30px
レイアウトボックス3<h4></h4>タグ h4a.jpg 横幅270px 高さ30px
レイアウトボックス4<h4></h4>タグ h4b.jpg 横幅200px 高さ30px
レイアウトボックス2<h5></h5>タグ h5.jpg 横幅410px 高さ30px
レイアウトボックス3<h5></h5>タグ h5a.jpg 横幅270px 高さ30px
レイアウトボックス4<h5></h5>タグ h5b.jpg 横幅200px 高さ30px

Page Top ▲
inserted by FC2 system