ホームページ作成用テンプレートの使い方

　このページはホームページ作成用テンプレートの使い方となっています。作成するサイトの例として「日本の歴史」について記述する内容と仮定します。ですからあなたが「女性用の香水」を売りたいのであれば日本の歴史の部分を「女性用の香水」と考えながら作業を進めてください。

テンプレートを使う際に必要なもの

　テンプレートの使い方を読む前にホームページを作成するための必要なアイテムが揃っているか、あるいは作業の進め方を理解しているか、事前にご確認ください。

テンプレートのダウンロードはお済ですか？　ダウンロード方法はこちらから。
作業の進め方は理解できてますか？　作業の進め方はこちらから。
編集用ソフト（編集用エディーター）はTeraPadがお勧めです。

テンプレートの使い方/説明文

　ホームページ作成にはHTML言語とCSS言語が必要な事は既にご存知でしょう。この内CSS言語はstyle="" と書かれている部分で指定し、HTML言語中に記述しています。ですのでstyleと書かれた部分はCSSだな、と思いながら作業を進めてください。

配布しているテンプレート内にはと言った感じで作業が必要な部分を書いています。は注釈文と言い、サイトを編集する時にサイトを編集する人が分るように目印をつける為の暗号です。実際にはを最後に書くと注釈文として成立します。

重要度が低い項目は作業されなくてもけっこうです。目安として星マークをつけました。

……重要度☆☆☆☆☆　絶対に作業してください。
……重要度☆☆☆☆　　必ず作業してください。
……重要度☆☆☆　　　作業される事をお勧めします。
……重要度☆☆　　　　作業されなくても大きな問題は起きません。
……重要度☆　　　　　作業されなくてもアクセスアップに関する問題は起きません。

テンプレートの使い方/ここから本文

……重要度☆☆☆☆☆
書かれている文字列→　<title>ホームページ作成用テンプレート</title>

　<title>と</title>の間にあなたが考えたサイトのタイトルを入れます。この時に注意する事は、例えば「拓夢書房の部屋」などと言った、サイトの内容が分らないタイトルは避けます。サイトの内容が分るよう、具体的な単語を使うように気をつけましょう。

　良い例として「日本の歴史を現在に生かす」等といった、タイトルだけでサイトの内容が分るような語句を考えましょう。あなたが運営したいサイトの方向性をよく考えて決める事が重要です。

……重要度☆
書かれている文字列→　　<meta name="author" content="末森拓夢">

　content="末森拓夢"の意味はサイトを作成した人の名前となっています。現状では私の名前を記述していますが、公開する際にはあなたの名前、もしくはＨＮ（ハンドルネーム）を記述します。サイトを公開する際に重要となる点ではありませんが、知識のある人があなたのソースを見る可能性があります。その時に恥をかかないよう、真面目に記述しておきましょう。

……重要度☆☆☆
書かれている文字列→　 <meta name="keywords" content="ホームページ,作成,テンプレート">

　content="○○,○○,○○"内の○○に任意の言葉を入れます。意味はサイト内で紹介しているアイテムの内、重要視しているキーワードとなっており、英半角の「,」で区切りながら、概7種類ぐらいの単語を記述します。多く書けば良い訳ではなく、本当に重要視している単語を入れましょう。ただしサイト内で使っている単語に限ります。

……重要度☆☆☆☆☆
書かれている文字列→　<meta name="description" content="○○">

　サイトの内容をごく簡単に紹介する文章を記述します。通常はサイト内で使っている文章の内、書き出し部分をそのまま記述しますが、ある程度であれば、サイト内の文章を引用する事もお勧めな方法です。ただし、ページ内に書かれていない文章を書く事はスパム行為と判定される危険性が高いので避けた方が無難です。

……重要度☆☆
書かれている文字列→　<body bgcolor="#ffffff" text="#333333" link="#0000ff" alink="#ff0000" vlink="#0000ff">

　サイト内で使用する言語の色や、背景色、リンクする際の色を指定します。bgcolorが背景色、textがサイト内で使用する文章の色、linkがリンクを張ったときの色、alinkが現在開こうとしているリンクの色、vlinkが過去に閲覧したページへのリンク色となっています。

　通常、リンク線は青色になっているのが普通で、多くの人は青色の文字でその下にリンク線がある状態を「違うページへのリンク」と認識していますから、リンク線は青色をお勧めします。

　サイト内で使用する背景色と文章の色はそれぞれ、白色の背景色に黒系の文字色をお勧めします。例えば背景色に赤色を使った場合、赤色を好む方には向いていますが、来訪者が赤色を嫌っていると、あなたのサイトそのものも嫌う可能性が高くなります。

　このように考えていくと一番無難な色は背景色が白でテキスト文章が黒系の色となります。よく分らない方は設定をこのままにしてください。無難な色使いに仕上げています。

……重要度☆
書かれている文字列→　<div align="center"><div style="position:relative;width:800px;top:0;font-size:10pt;line-height:1.2;background-color:#ffffff"><div align="left">

　この部分ではサイト全体の大きさと位置を指定しています。最初の内はこの設定のままで作業された方が無難です。
<div>～</div>は「範囲」という意味で、必ず対の状態で使用します。<div align="center">……最初にサイト全体を中心「"center"」に寄せるよう指示します。これが無いとサイト全体が左側に寄ります。左寄せが良いか？　中心寄せが良いか？　は個人の好みですから、左寄せが良いと思われる方はcenterではなく、leftと指定してください。

<div style="position:relative;width:800px;top:0;font-size:10pt;line-height:1.2;background-color:#ffffff">……はホームページ全体の横幅やフォントの大きさ、行間の高さなどを指定しています。position:relativeはポジションを自然に位置するという意味でこの前の書き込みで中心寄せとしましたからブラウザの中心に幅width:800pxと指定しています。また上部top:0;は0pxしか開けていません。（つまり一番上）

font-size:10ptはフォントの大きさをしています。現在あなたが読まれている文字の大きさです。少し大きい方が良い方は11pt小さい方が良い方は9pt程度を指定してください。来訪された方が文字の大きさを自由に設定できるようにしたい方はこの部分「;font-size:10pt」を削除して下さい。
　行間の高さも変えれます、「;line-height:1.2」の内1.2を1.0～1.5程度に変更されると可能です。

<div align="left">
　サイト全体の文字を左寄せにします。この前に指定しているタグが中心寄せになったままですから、これを指定しないと文字列や画像が、非常に読みにくいホームページが出来上がります。

……重要度☆☆☆
書かれている文字列→　<div style="position:absolute;top:120px;left:0;width:540px;background-color:#ffffff">

　この部分から実際のホームページ内容を記述していきます。要するにサイトの本文に当ります。<div style="position:absolute;top:120px;left:0;width:540px;background-color:#ffffff">で位置を指定していますが、まだこの部分はいじらないように。右側のメニュースペースと一緒に作業します。

<!--E=->……重要度☆☆☆
書かれている文字列→　<img src="g/sub-2.jpg" border="0" alt="ホームページ作成・見本画像" align="right" width="100">
　この部分はサイト上に画像を表示する際に使う言語です。<img が画像を表示します、という意味のタグです。src="g/sub-2.jpg"の内srcは画像がある位置を指示しています。私のテンプレートの場合、画像は「g」というフォルダ内に格納していますからg/から始まり、sub-2.jpgという画像の正式名称で指定します。

　border="0"はリンクを張るときに必要な指示で、リンク線の幅が0（つまり無という意味）で表示するよう指定しています。alt="ホームページ作成・見本画像" の内altは画像の説明をする部分で"と"の間に説明文を記入します。

　align="right"は画像を右寄せにしたい場合に使用するタグで、左側に寄せたい場合にはleftを記入します。width="100"は画像の横幅を指定していて高さを指定する場合にはheight=""と指示します。

……重要度☆☆☆☆☆
書かれている文字列→　<h1 style="font-size:16pt;color:#333333">ホームページ作成用テンプレート</h1>
　この部分は何も考えずにタイトルと同じ語句を記入してください。後はデザイン的な要素として文字の大きさを変えます。"font-size:16ptで文字の大きさを微妙に変え、;color:#333333"で色をお好みに変化させてください。

　文字に背景をつけて文字色を抜いた状態にしたい場合には下記のように記述します。下記の通りに記入すれば背景色が黒で文字色が白色になります。
<h1 style="font-size:16pt;color:#ffffff"><span style="background-color:#333333">ホームページ作成用テンプレート</span></h1>

……重要度☆☆☆☆☆
書かれている文字列→　<p></p><p>　本文はこの部分に書き込んでいきます。</p>　文章が多くなった時には<p></p>を追加して記述を増やします。改行する場合には<br>と書き込めば改行になります。<p></p>は段落という意味で文章は段落としてまとめていくのがコツです。
この部分は<!--E=->と同じで画像の指定です。

……重要度☆☆☆☆
書かれている文字列→　<h2 style="font-size:11pt;color:#333333">テンプレートの使い方</h2>
　<h1></h1>や<h2></h2>は見出しという意味で通常は<h1>はサイトのタイトルと同じ語句を使い、<h2>～<h6>は補助的な見出しを使います。

このときに必要な事は「日本の歴史」に関係する語句を考えて使用するのが重要な点です。日本の歴史に関係しないような語句は出来る限り避けることが無難です。
　また見出し語句は続けて使わないようにしましょう。その為には再びの部分を設ける事が重要です。
……重要度☆☆
書かれている文字列→　<h3 style="font-size:11pt;color:#333333">彼女との関係を先に決めてください。</h3>
　FAの部分では「日本の歴史」に関係する語句を使うようにと説明しましたが、関係ない語句を使用しても構いません。使って行けない法律があるわけではありませんから、ご自身で使いたい時には使いましょう。

……重要度☆☆☆
書かれている文字列→　<div align="center"><span style="font-size:10pt;background-color:#c0ffc0">
――― END of This page.And Copyright-Suemoritakumu-All Rights Reserved.―――
</span></div>

　実際に作業される場合にはSuemoritakumuの部分をご自身の名前やＨＮ（ハンドルネーム）に買えるだけで十分ですが、その前後も好みで変化させるのも良いでしょう。また、この部分を設ける意味には別の理由があり、使われているブラウザによっては文章の一番下が読みにくい可能性があります。

　せっかく書いた文章ですから最後まで読んでいただきたいですよね。ですので文章の最期が読みにくい状況を避ける為に必要のない語句で飾っているのです。

……重要度☆☆☆☆☆
書かれている文字列→　<div style="position:absolute;top:120px;left:550px;width:250px;background-color:#ffff99;font-size:9pt;line-height:1.1">

ここからは右側のメニューの作り方です。まずメニューを左に寄せたい方は上記文章の内left:550pxを0pxに変えてください。次にの<div style="position:absolute;top:120px;left:0;width:540px;background-color:#ffffff">の内left:0pxを260pxに変えてください。これでメニューが右から左に移動します。

……重要度☆☆☆☆☆
書かれている文字列→　<h4 style="font-size:10pt">ホームページ作成・メインメニュー</h4>

　メニュー部分の最初は必ずあなたが記述したい内容（説明例では日本の歴史）に続けてメインメニュー（あるいは類似語句）と書きます。ですので日本の歴史・メインメニューとなるのが正解です。また<h4>は見出しタグですから日本の歴史に関係する語句を記入する、必要がありましたよね。

<ul>……重要度☆☆☆☆
書かれている文字列→　<li>和の心を映す・和室の部屋</li>
<li>現在を生きる・洋風の部屋</li>
<li>彼女に初めてプレゼントする場合</li>
<li>彼女にプレゼントするのは複数回</li>
<li>彼女と結婚する意識ありの場合</li>
</ul>

この部分はメニューですから箇条書きにするのがベターです。箇条書きにするにはまず<ul>を宣言し、その後<li>を使ってメニューらしく

短い語句で紹介していきます。ここで重要な事は日本の歴史という語句を使わないことです。この部分でいちいち使用すると「日本の歴史」という語句が多くなりすぎ、来訪者から見て見難いサイトに仕上がります。

メニューの考え方ですが、日本の歴史を考えてみましょう。まず近代歴史として平成、その前が昭和、その前が大正、そして明治があり、その前の時代があります。

ですのでまずは
<h4 style="font-size:10pt">日本の歴史・メインメニュー</h4>
<h4 style="font-size:10pt">日本の歴史・平成</h4>
<h4 style="font-size:10pt">日本の歴史・昭和</h4>
<h4 style="font-size:10pt">日本の歴史・大正</h4>
<h4 style="font-size:10pt">日本の歴史・明治</h4>
<h4 style="font-size:10pt">日本の歴史・上記以前</h4>
と書きます。次に<h4>（見出しタグ）は続けて使わないという原則がありますから、

<h4 style="font-size:10pt">日本の歴史・メインメニュー</h4>
<p>日本の歴史について研究しています。時代に合わせた事件などを知りたい方は下記メニューからお選びください。</p>
<h4 style="font-size:10pt">日本の歴史・平成</h4>
<h4 style="font-size:10pt">日本の歴史・昭和</h4>
<h4 style="font-size:10pt">日本の歴史・大正</h4>
<h4 style="font-size:10pt">日本の歴史・明治</h4>
<h4 style="font-size:10pt">日本の歴史・上記以前</h4>

といった感じで追加語句を入れます。さらに昭和の部分などを追加します。

<h4 style="font-size:10pt">日本の歴史・メインメニュー</h4>
<p>日本の歴史について研究しています。時代に合わせた事件などを知りたい方は下記メニューからお選びください。</p>
<h4 style="font-size:10pt">日本の歴史・平成</h4>
<h4 style="font-size:10pt">日本の歴史・昭和</h4>
<ul>
<li>バブルへと成長</li>
<li>高度成長時代</li>
<li>戦後の日本</li>
<li>戦前の日本</li>
</ul>
<h4 style="font-size:10pt">日本の歴史・大正</h4>
<h4 style="font-size:10pt">日本の歴史・明治</h4>
<h4 style="font-size:10pt">日本の歴史・上記以前</h4>

などと、それぞれの時代に合わせたメニューを考えて追加していきます。メニューはサイトの顔であり、サイトの方向性を決める重要な項目です。また実際に作業を進めだしてからメニューを変えようと思えば面倒な作業をすることになります。ですのでメニューはじっくりと考えてから決められる事をお勧めします。

<ul>
<li><a href="http://www.takumushobou.com/ ">誕生日プレゼント・相手が喜ぶ贈り物</a></li>
<li>友人へ贈る場合のヒント週</li>
<li>両親への贈り物</li>
<li>子供が喜ぶアイテムとは</li>
<li>相互リンクの正しい知識</li>
</ul>……重要度☆☆☆☆

この部分は直接メニューとは関係ないリンクを設定します。例えば知り合いのサイトを紹介したり、あるいは私のサイトを紹介したりします。ここで注意すべき点として他のサイトへのリンクは沢山張らない。リンクページは専用のページを作成します。サイトの中で一番力のあるページは通常トップ（index.html)です。せっかく力のあるページを作成するのですから安易に他のサイトへのリンクは張らないようにしましょう。

逆に言えば私は、トップページからリンクを張ってくださいと利用規約の中で説明していますよね。それだけトップページには力があるからです。

……重要度☆☆☆☆
書かれている文字列→　<p>文章及び画像にはすべて著作権があります。著作者に許可無く複製・再配布することは法律で禁じられています。<a href="http://www.takumu.net/ " class="white">ホームページ作成・テンプレート</a></p>

サイト上に書いた記事を第三者が勝手に引用しないように注意文章を書いておきましょう。そしてこの部分から私のサイトwww.takumu.net/へのリンクが張ってあります。目立たないように語句を黒色で指定しています。削除されないようお願いします。
　080425日修正ーリンク部分は削除いたしました。

<……重要度☆☆☆
書かれている文字列→　!--ここからトップ部分の記述です--><img src="g/top.jpg" style="position:absolute;top:10px;left:0px;width:236px;height:60px" border="0" alt="ロゴ画像">

上記で指定は、ブラウザの左上に当る部分です、サイトを訪れた人が無意識に見る一番重要な部分です。通常はロゴマークなどを入れるのですが、普通の人はいきなり画像を作ることは難しいので汎用の画像にあなたが好きな語句でそれらしい雰囲気が出るように考えてあります。

将来的にはご自身で作るか、誰かに製作を依頼する事になります。

……重要度☆☆☆
書かれている文字列→　<div style="font-size:15pt;position:absolute;top:45px;left:81px;color:#333333"><strong>末森拓夢の部屋</strong></div>
<div style="font-size:15pt;position:absolute;top:46px;left:80px;color:#ff0000"><strong>末森拓夢の部屋</strong></div>

上記で説明した、ご自身で考えた語句を記入します。CSSで文字を重ねる事により、深みのある印象を来訪者に与える事ができます。

<img src="g/top-8.jpg" style="position:absolute;top:10px;right:0px;width:450px;height:60px" border="0" alt="インテリア・イメージ画像">……重要度☆☆☆

トップの右側に当る部分です。将来的にはここに広告を載せる事を前提に考えています。ですが必ずしも広告を載せる必要はなく、ご自身が好きな画像で飾る事が可能です。

……重要度☆☆☆
書かれている文字列→　<img src="g/green-line.jpg" style="position:absolute;top:85px;left:500px;width:300px;height:15px" alt="くつろぎライフ・イメージ">

この部分が一番悩みの種で、何も無いと寂しいですからサイト内の簡単な情報を載せるようにしています。その為に作ったアイキャッチです。

……重要度☆☆☆書かれている文字列→　<div style="position:absolute;top:75px;left:0px;width:480px;height:30px" align="left">
<p>　私もサイトを運営する関係で「女性が喜ぶ方法」を考えていて「様々な書籍を参考」にしながら研究しました。充分な成果を出せたとは思っていませんが、</p></div>

この部分も何も無いと寂しいですからサイトの簡単な紹介文を載せるようにしています。

……重要度☆☆☆
書かれている文字列→　 <div style="font-size:10pt;position:absolute;top:78px;left:530px">管理者　末森拓夢</div>
<div style="font-size:10pt;position:absolute;top:91px;left:530px">サイトのご利用案内</div>
<div style="font-size:10pt;position:absolute;top:78px;left:680px">お勧めサイト紹介</div>
<div style="font-size:10pt;position:absolute;top:91px;left:680px">スポンサー募集中</div>

サイトのご利用案内などを記載するスペースはここに決めました。アフィリエイトなどの広告を載せる場合などはサイトのご利用案内を作成し、ここに記載する事をお勧めします。

……重要度☆☆☆☆

ここから下にアクセス解析用のタグを載せます。

ホームページ作成・製作メインメニュー

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

HP用テンプレートの見本

その他、サイト内情報

　サイト内の文章及び画像には全て著作権があります。許可無く複製・再配布することは著作権法で禁じられています。

スポンサードリンク