テンプレート-使い方|XHTML版

　このページは独自に配布している無料テンプレートの使い方を説明しています。時々勘違いされて他のテンプレートで作業しようとされる方がいますけど、まったく意味は有りませんしホームページは出来上がりませんのでご注意ください。

具体的な使い方ですが、テンプレート内に書いてある記号（の事です）と同じ記号の説明を読んで、該当する部分をご自身が考えている内容に仕上げてください。

　なお、配布中のテンプレートは初心者にも簡単にホームページが運営できるように基本的な内容しか用意しておりません。その為デザイン的にもやや他のサイトより劣るイメージが有るかもしれませんが、初心者の方には難しい設定よりも簡単な設定の方が良いと判断した為です。

　このテンプレート以外に「XHTML+CSSに関する書籍」を用意されるとより効果的です。

ホームページの構造｜テンプレート

　ホームページの概要を簡単に説明しておきましょう。ホームページは本来ウェブサイトと呼ぶのが正解でした。ですが多くの人がホームページと呼び、これが慣例になっているようですから私もこの様に呼ぶ事にしています。あるいはＨＰと省略する時も多々あります。元々HPはW3C（ダブリュー・スリー・シー）と名乗る協会が基と成る規約を作りました。

　ですのでアドレス(URL)はWWWというつづりから始まります。現在はこのWWWを省略したサイトも多々ありますが、どちらも同じ効果を発揮しますので、深く考える必要はまったくありません。規約は数年毎に改訳されて理解するのが徐々に難しくなっています。逆に言えば熟成されているともいえますが、新規にHPを立ち上げる際、壁と成っていることは間違いないでしょう。

　ホームページを構成する要素を大きく分けると二つに分かれます。一つ目がヘッドで二つ目がボディです。ヘッドには該当するサイトの概要を書き込みます。通常この部分をブラウザで確認することは殆んどありません。逆にボディに書かれている内容はブラウザに全て反映されますので特にデザイン的要素に気遣いながら作業を進める必要があります。

テンプレート以外に必要なもの

　テンプレートを利用してウェブサイトを構築する際に必要となるアイテム（無料、有料両方）を説明します、後で「こんなはずでは……」と成らないように確認しておきましょう。

XHTML+CSSに関する書籍……基本的な知識を覚えましょう。2000円位
ウェブサイトのデザイン書籍……様々なデザインを研究しましょう。2000円位
レンタルサーバー……無料のタイプもありますが、年5,000円程度～
ドメイン代……汎用アドレスではなくオリジナルドメインでの運営、年1200円～
HP作成用エディタ……手書きの場合無料のソフトでも可能です。ですが専用ソフトだと4200円～
パソコン……パソコンも必要です。自分自身の専用PCが欲しいですね、10万円～

<?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 lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

この部分の説明です。……この部分は「これはホームページ用のファイルです」と言う意味を書いています。内容を簡単に言うと「使用している言語はXHTMLでバージョンは1.0です」見たいな事を書いていますが、初心者の場合ここを書き換えることはありません。理解できたらを削除しましょう、残していると後々面倒になりますよ。

<head>
<meta http-equiv="content-style-type" content="text/css" />

この部分の説明です。……ここはホームページを構成しているXHTML言語を大きく分けると、ヘッド部分とボディ部分に分かれていますがそのヘッド部分の始まりを<head>で表示します。続けてスタイルシートに関する記述があります。テキスト言語でスタイルシートを使いますよ、と言う意味です。今後スタイルシートに関する研究をより深く追求する際には該当するスタイルシートを書き換えますが、初心者の方は何もしないほうが無難でしょう。理解できたらを削除しましょう。以下同じ様に理解できたら記号を削除してください。

<link href="wide.css" rel="stylesheet" type="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

　この部分の説明です。……ここもスタイルシートに関する記述です。具体的な説せいですが、スタイルシートはwide.cssと言う名前のファイルに書き込んでいます。ブラウザはそのファイルを参照しながらホームページのデザインを再現し表示します。その為にはどのスタイルシートを参照するのか明記する必要が有ります。初心者の方がいじることはありません。

　また同時にスクリプト関係や使用する言語のタイプなどの記述も含めていますが、将来的に必要になった時を想定していますので、特に問題が起こらない限りいじることはありません。但しshift_jisと言う種類だけは覚えておいてください。

<title>ホームページ-タイトル</title>

　この部分の説明です。……既に書いている通り、ホームページのタイトルを記述します。多くの初心者が間違える第一歩でもあります。例えば写真集のホームページを作りたいのであれば「ホームページ-タイトル」と言う語句を消して「拓夢書房の写真集」みたいに書き換える必要があります。

<meta name="author" content="末森拓夢">

　この部分の説明です。……この部分は「ホームページ」の作成者名を書き込みます。あなたが見られているこのホームページは私が作成したものですから当然「末森拓夢」になっています。通常この部分が閲覧者に見られることはありませんが、ある程度の知識がある人は見ることがあります。その時に私の名前が残っていると貴方からみると恥ずかしい事ですので、絶対にご自身の名前（もちろんハンドルネームでＯＫ）に書き換えましょう。

<meta name="keywords" content="" />

　この部分の説明です。……ホームページ内でご自身が一番訴えたい事を5項目程度、単語で書き込みます。最近は「あまり意味がない」という人が増えていますが、将来的には重要になるかもしれません。ぜひ書き加えておきましょう。正しい例（テンプレート,使い方,XHTML,版）

<meta name="description" content="ホームページの説明を入力してください" />

　この部分の説明です。……ここには作成するホームページの概要を書き込んでおきます。貴方は時々ヤフーやグーグルなどの検索エンジンを利用して、何かを調べますよね。その時、ホームページの概要がサイトのタイトルの下に書かれています。そこに表示させたい内容をここに書き込むのです。但しサイトの内容とまったく違うことを書き込んでいると無視されます。

</head>

　この部分の説明です。……ホームページを構成しているXHTML言語を大きく分けると、ヘッド部分とボディ部分に分かれている、と説明しましたが、この記号が書かれている場所がヘッド部分の最後と言う意味です。ですのでこれから下部に書く内容が実際にブラウザで閲覧できる内容となります。

<body><div align="center"><div class="body">

　この部分の説明です。……ここにはサイト全体の大きさや文字の大きさなどを指定しています。ですが実際にはスタイルシート側にこれらの数値を書き込んでいますのでXHTML言語内で書くことはありません（私のテンプレートの場合、初心者向けに作っていますので書き込む事も可能です）

　スタイルシートを参考にする場合ですが、例えば「class="body"」とXHTMLファイルに書いてある場合、スタイルシート側（この場合はwide.cssファイル）のdiv.body部分に書き込んでいます。class=""を目安にして探されるとすぐに判別できるでしょう。

<div class="min">

　この部分の説明です。……ここからサイトのメイン（本文）を書くスペースですよ、と言う指定です。現状では幅を690ピクセルにして左側に寄せていますが、これらの数値を変えたい場合にスタイルシート側のmin部分を書き換えます。もちろん現状では何も書き換える必要はありませんが、将来的にスタイルの研究をされる際に変更して下さい。

<h1>ホームページ-タイトル</h1>

　この部分の説明です。……再び初心者の方が間違える場所です。先ほどにも同じ様に「ホームページ-タイトル」を変更されたと思いますが、その時はヘッド部分での記述です。今回はボディ部分の変更ですので合計すると2回ほど、同じ作業が必要です。なお時々ボディ内とヘッド内の「ホームページ-タイトル」が違う方を見かけますが、できる限り同じ語句を入れましょう。

<img src="g/c-25.jpg" width="130" border="0" alt="彼女へ贈る時のヒント集・イメージ" align="right">

　この部分の説明です。……これは画像を表示する際に使うタグです。私のテンプレートの場合、事前にある程度の画像を用意しておりますので、それらを利用されると良いでしょう。画像を変える際にはc-25.jpgと言う部分を変えたい画像のファイル名に変えてください。大きさを変える時はwidth="130"の数値を変えてください。

<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>

　この部分の説明です。……ここからはサイトの本文を書いていきます。その際<p>←この記号と→この記号の間に文章を書きます</p>。これらのタグが意味する内容は「段落」でして、文章を段落としてまとめる役目があります。例えば貴方が今読まれている文章は段落としてまとまっています。この様にまとめる役目がありますので記述場所を間違えないようにしてください。

<h2>サブタイトル-No1</h2>

　この部分の説明です。……ホームページにはメインのタイトルがありますが、このタイトルを装飾、あるい補助する役目として合計で6段階のタイトルが付けれます。具体的には<h1>～<h6>となっています。これらを見出しタグと言いますが。全てを使う必要はありませんが、ある程度使うことによりホームページを見易くする効果やデザインの向上が期待できます。

<img src="g/d-10.jpg" width="130" border="0" alt="彼女へ贈る時のヒント集・イメージ" align="left">

この部分の説明です。……ここもで説明したとおり、画像に関する処理です。同じ画像を使うと来訪された方が飽きますし、デザイン的にも？マークなので適時画像は変えましょう。

<p>　</p>
<p>　</p>
<p>　</p>
<p>　</p>

この部分の説明です。……と同じです。サイト内で使用する文章量に応じて適時増やしたり削除したりしてデザイン的要素も考慮しながらホームページを仕上げましょう。

<h3>サブタイトル-No2</h3>

この部分の説明です。……で説明しましたがサブタイトルを付けます。この場所ではh3を使っています。サイト全体を見たときに見出しタグには6種類あるわけですので、本文側でh1～h3メニュー側でh4～h6を使い分けています。もちろんこれらは適時変更されても構いません。

<p>　</p>
<p>　</p>
<p>　</p>

<p id="foot">―――― END of This page.And Copyright-あなたのサイトタイトル-All Rights Reserved――――<br>
現在この部分はありません。 <a href="http://www.takumu.net/ " class="white">ホームページ作成-マニュアル</a>|
<a href="http://ameblo.jp/takumu/ " class="white">サイドビジネス</a>|
<a href="http://www.takumu.net/aku/ " class="white">アクセスアップ</a>|
<a href="http://takumu-shobou.info/ " class="white">マンション</a>＆
<a href="http://takumu-shobou.info/hiroshima/ " class="white">マンション-広島</a>|
<a href="http://takumu-shobou.info/ " class="white">英語-勉強</a></p>

　この部分の説明です。……ここは重要ですので慎重に作業を進めてください。まず「あなたのサイトタイトル」の部分をあなたの好きな語句に書き換えてください。「あなたのサイトタイトル」と書いている訳ですのであなたが採用したホームページのタイトルで構いません。あるいは私の場合だとTakumushobou等と書いています。ここを修正されない方が多いので要注意です。

　次に、このテンプレートには事前に私のサイトを紹介するタグ（これらをリンクと言いますので覚えてください）を書き込んでいます。もちろん削除されても構いませんが、これらのタグを残されている方にはアクセスアップの秘訣を内緒でお伝えしております。ミクシー経由でご連絡いただければ、簡単では有りますが、アクセスアップの方法をお伝えしております。

</div>

　この部分の説明です。……左側本文の終わりを告げるタグです。

<div class="menu">

　この部分の説明です。……ここから右側のメニュー部分の記述開始を告げるタグです。

<h4><a href="index.html" class="black">メニュータイトル-INDEX</a></h4>

　この部分の説明です。……ここからメニューとして文章を書いていきますが、まずはメニューの紹介ですので、カッコいいタイトルを考えて「メニュータイトル-INDEX」を書き換えてください。なおこの部分は全てのページと同じ構成になりますので、予めトップページへのリンクを書き加えております。ですがメニューのタイトルが青色のリンクだとデザイン的におかしいのでスタイルシートを利用し黒色を採用しております。

　サイト全体を見たときにリンクがある語句は青色に仕上げています。ですがclass="red"と指定すればカーソルを合わせた際に赤色に変化し、class"black"を指定すれば黒色になります。もちろんこれらの細工はスタイルシートでより複雑に仕上げることも可能です。

<ul>
<li><a href="index.html" class="red">メニュータイトル-INDEX</a></li>
<li><a href="No1000th.html" class="red">作成した記事タイトルNo1</a></li>
<li><a href="No1000th.html" class="red">作成した記事タイトルNo2</a></li>
<li><a href="No1000th.html" class="red">作成した記事タイトルNo3</a></li>
<li><a href="No1000th.html" class="red">作成した記事タイトルNo4</a></li>
<li><a href="No1000th.html" class="red">作成した記事タイトルNo5</a></li>
</ul>

　この部分の説明です。……ここからは実際に記事として作成された新たなファイル（この場合のファイル名はNo1000th.html）をメニューとして整えながら記述します。このテンプレートの場合予めNo1000th.html～No5000th.htmlと言う5種類の空ファイルを用意しています。これらを利用してサイト内の新しいページを作成していただくことになります。

　メニュー部分に20項目ほど必要だと考えた場合当然ですが20ファイルほど必要になります。ですが現状では5種類のファイルしかありませんのでメニューとして分るように同じ内容を繰り返し使っています。ですので新たに作ったファイル名をこれら（赤文字の部分）に記述していただくことになります。

<h5><a href="No2000th.html" class="black">メニュータイトル-No1</h5>

この部分の説明です。……の部分で紹介しましたが、本文側でもサブタイトルを使ったように、メニュー側でもサブのメニュータイトルを使います。もちろんどの程度使うかはご本人で判断していただきますが、メニュー部分にメリハリをつけるという意味やデザイン的な面を考慮して適時使用します。

<ul>
<li><a href="No2000th.html" class="red">作成した記事タイトルNo1</a></li>
<li><a href="No2000th.html" class="red">作成した記事タイトルNo2</a></li>
<li><a href="No2000th.html" class="red">作成した記事タイトルNo3</a></li>
<li><a href="No2000th.html" class="red">作成した記事タイトルNo4</a></li>
<li><a href="No2000th.html" class="red">作成した記事タイトルNo5</a></li>
</ul>

この部分の説明です。……と同じです。

<h6><a href="No3000th.html" class="black">メニュータイトル-No2</a></h6>

この部分の説明です。……と同じです。

<ul>
<li><a href="No3000th.html" class="red">作成した記事タイトルNo1</a></li>
<li><a href="No3000th.html" class="red">作成した記事タイトルNo2</a></li>
<li><a href="No3000th.html" class="red">作成した記事タイトルNo3</a></li>
<li><a href="No3000th.html" class="red">作成した記事タイトルNo4</a></li>
<li><a href="No3000th.html" class="red">作成した記事タイトルNo5</a></li>
</ul>

この部分の説明です。……と同じです。

<h6><a href="No5000th.html" class="black">サイト情報＆その他</a></h6>

この部分の説明です。……と概ね同じです。ですがホームページを運営する上でやはり自己紹介は有る方が無いよりも来訪された方からの信用度が違います。もちろん私のテンプレートを使われる方の多くはサイドビジネスとしての観点でしょうから自分の本当の名前を記入する必要もありませんし、住所なども明記する必要はありません。ミクシーなどと同様に簡単な自己紹介をするページも作成しておきましょう。

<ul>
<li><a href="No4000th.html" class="red">サイト内情報＆必要な表示No1</a></li>
<li><a href="No4000th.html" class="red">サイト内情報＆必要な表示No2</a></li>
<li><a href="No5000th.html" class="red">サイト内情報＆必要な表示No3</a></li>
<li><a href="linkNo1.html" class="red">お勧めサイト＆リンク集No1</a></li>
<li><a href="linkNo2.html" class="red">お勧めサイト＆リンク集No2</a></li>
</ul>

　この部分の説明です。……これらのファイルには事前にリンクを張っています。ですので、これらのリンクを削除して新たなサイトを紹介するページに仕上げても構いません。ですがアクセスアップを考える上で、これらのファイルは必要になるので必ず用意しておきましょう。

<p>サイト内で公開している文章及び画像には全て著作権があります。運営者に許可無く複製、再配布等は著作権法で禁止されています。</p>

　この部分の説明です。……メニュー部分の終わりを告げる部分ですが、何も無いとかっこ悪いのでこの様な文章を記述しています。もちろんこれらの文章は適時変更されても構いません。

</div>

　この部分の説明です。……メニュー部分の終わりを告げるタグです。

<div class="head-menu">

　この部分の説明です。……ヘッダー部分（一番上の大きい画像と本文及びメニューの間の空間部分）にメニューを横並び配置します。もちろん無くてもかまいませんが採用する場合に使用するタグがこれらです。

<a href="index.html" class="black">HOME</a>｜
<a href="No1000th.html" class="black">コンテンツ1</a>｜
<a href="No2000th.html" class="black">コンテンツ2</a>｜
<a href="No3000th.html" class="black">コンテンツ3</a>｜
<a href="No4000th.html" class="black">コンテンツ4</a>｜
<a href="No5000th.html" class="black">コンテンツ5</a>
</div>

　この部分の説明です。……実際にヘッダー下部にメニューを採用する場合には横並びと言う関係上多くのメニューが並びません、サイト内のメインページにリンクを張ると良いでしょう。この場合は6項目ほど並べていますが、どの程度にするかは採用される個々の考え方で構いません。

　この部分の説明です。……ヘッダー部分のデザインを始めます。サイトの顔にも成るわけですので慎重に作業されることをお勧めします。

<div class="head"><img src="g/top-13.jpg" width="950" height="150" border="0" alt="拓夢書房・ロゴマーク" title="サイドビジネス｜月収25万。"></div>

　この部分の説明です。……まず最初にテンプレート内に用意している「g」のフォルダからご自身の好きな画像を決めて、そのファイル名をtop-13.jpgと書き換えます。その上でtitle=の「サイドビジネス｜月収25万。」と書き換えます。もちろん気に入った画像が無い場合にはご自身で探されると良いでしょう。

<div id="head-1">拓夢書房-オリジナルテンプレート</div>
<div id="head-2">拓夢書房-オリジナルテンプレート</div>

　この部分の説明です。……次に画像の上に文字を配置します。これらは屋号でも構いませんし、あるいはサイトの内容に沿った語句、あるいはまったく別のカッコいいロゴでも構いません。選ばれた語句を同じ内容で2回ほど書き込みます。本当は画像処理を行えばよいのですが、多くの場合画像処理の苦手な人が多いのでこの様な手段でサイトの顔を形成していきます。なお語句の位置はスタイルシート側で調整できます。気になる方はスタイルシートをいじってください。

<div id="head-3"><p><b>　テンプレートを使ってサイドビジネスをはじめましょうよ!!<br>　既に多くの方がチャレンジしサラリーマンの小遣い程度を稼いでいます。<br>　金額にすると毎月30,000円～50,000円程度、<br>多い人だと100,000円程度稼ぐ人もいます。</b></p></div>

　この部分の説明です。……サイトの顔をさらに詳細に作り上げます。もちろんこの部分を省略しても構いませんがデザイン的に見た場合、この部分にも適度な文章を入れておくとさらにカッコ良く見えるでしょう。

</div></div>

　この部分の説明です。……以上で本文とメニュー及びヘッダー部分のデザインは狩猟です。ですので一番最初に開いた<div>を閉じる為にこの記述が必要です。

　この部分の説明です。……将来的にアクセス解析が欲しくなると思う時期が必ずあるはずです。その際に「タグを埋め込んでください」と記述してある場合にはこの部分に埋め込んでください。

</body>
</html>

　この部分の説明です。……本当にこれで終わります。ですのでbodyタグとhtmlタグを閉じて終了です。

テンプレート-使い方|XHTML版

ホームページの構造｜テンプレート

テンプレート以外に必要なもの

ホームページ作成・Indexページ

ホームページ用テンプレートTopページ

ホームページ製作・関連記事

その他、サイト内情報