0からはじめる広告収入

トップページ

HPを作るぞっ！

遂にHPを作るときがきました。このサイトを見ている方は、まだ一度もHPを作ったことがないと思います。初心者の方がいきなりHPを作るというのは、まず無理でしょう。がんばってチャレンジしても形になるまで数ヶ月かかるかもしれません。

そこで管理人が作ったテンプレートを利用してHPを作ります。なぜ初心者でもテンプレートなら作れるのか？それは途中まで作っているからです。あとはちょこちょことカスタマイズしてあなたのオリジナルに仕上げるだけです。

HPを公開するまでの大まかな流れは

必要なツールをそろえる
↓
審査ナシのASP(A8.net)に登録する
↓
好きなテンプレートをセレクトする（あまり種類がないですが）
↓
テンプレートを自分用にカスタマイズする
↓
サーバーを借りて公開する
↓
審査ありのASPと契約する
↓
広報活動をする

です。

このページではトップページを完成させます。サンプルページも参考にして作成してください。

まずはダウンロード

まずは下の３種類の中からテンプレートをDLしてください。（保存先はデスクトップがオススメ）

ダウンロード | サンプルページ

ダウンロード | サンプルページ

ダウンロード | サンプルページ

ダウンロードすると、「temp001_○.zip」というzipファイルが保存されます。このファイルは圧縮されているので解凍します。temp001をクリックしたままlhasaのアイコンの上まで持っていって、アイコンの上で離してください（クリック&ドラッグ）。デスクトップにtemp001というファイルが新たに出てきたら解凍成功です。

中身を見る＆TeraPadの使い方

解凍したファイルの中身

• index.html　（トップページ）
• about.html　（小遣いサイトの説明）
• questionnaire.html　（アンケートでお小遣い）
• mail.html　（メール受信でお小遣い）
• prize.html　（懸賞でお小遣い）
• other.html　（その他でお小遣い）
• site.html　（当サイトについて）
• temp.css　（いじりません）
• images　（画像フォルダ）

トップページの中身を見る

早速index.htmlの中身を見てみましょう。TeraPadを起動してから「ファイル→開く→デスクトップ→temp001→index.html」を開いてください。

なんかよくわからない文字列が出てきましたね。これはHTMLと呼ばれる言語です（簡単なので尻込まないでくださいね）。では、ブラウザで見たときのイメージを確認してみましょう。ツールバーにあるeマークをクリックしてください。

InternetExplorerが立ち上がって、このHTMLが実際にどのように表示されるかが確認できます。

TeraPadの使い方

まず重要な機能は先ほど使ったeボタンです。編集したら、どのように表示されるのか逐一確認してください。

TeraPadの左側に表示されているのは、行番号です。また、メニューから「検索→検索」で文中の文字検索ができます。
「TeraPad」はこれぐらいの使い方を知っていれば十分です。

7行目：タイトルの設定

ここから、自分のホームページ用にカスタマイズしていきます。タイトルに○○行目と行数を書いていますが、これは人によって代わってきます。その行数あたりを探してください。

まずはページタイトルの設定です。

 <TITLE>サイト名を記入</TITLE>

<TITLE>～</TITLE>にサイト名を入れます。私の管理しているサイト（以下、「私のサイトでは」といいますね）「1からお小遣い稼ぎ」では、<TITLE>～</TITLE>に「1からはじめるお小遣い稼ぎ-お小遣い稼ぎならココ！」と書いています。

つまり、

<TITLE>1からはじめるお小遣い稼ぎ-お小遣い稼ぎならココ！</TITLE>

と書いているというわけです。サイト名だけでなく、簡単なキャッチフレーズなどを入れてもいいかもしれません。サイト名はずっと使うものなので、慎重に決めてくださいね。

「続きを読む…」をクリックすると、タイトルについての考察が読めます。

16行目：H1タグ

<H1>ここにサイト名を記入</H1>

<H1>～</H1>にサイト名を入れます。私のサイトなら

<H1>1からはじめるお小遣い稼ぎ</H1>

と書き換えます。eボタンを押すとこのように表示されるはずです。

20行目：タイトル下の設定

<p><strong>ここに何か書いてもいいです</strong></p>

何か書いたほうが見栄えがいいと思います。（笑）

<p><strong>お小遣いがほしいときは「1からはじめるお小遣い稼ぎ」で！</strong></p>

と書いてみました。使わなくても良いですが、ここは魅力的なスペースです。メニューバーにしてもいい感じかも。なにも書かない場合は<p>～</p>を消しちゃえばOKです。

30～56行目：メニューバー

<!--ここからが左メニューです-->

<h2>初めての方メニュー</h2>
<ul>
<li><A href="about.html">お小遣いサイトって？</A></li>
</ul>

<BR>

<H2>お小遣い稼ぎメニュー</H2>
<ul>
<li><A href="questionnaire.html">アンケートでお小遣い</A></li>
<li><A href="mail.html">メール受信でお小遣い</A></li>
<li><A href="prize.html">懸賞でお小遣い</A></li>
<li><A href="other.html">その他でお小遣い</A></li>
</ul>

<BR>

<H2>その他</H2>
<ul>
<li><A href="site.html">当サイトについて</A></li>
</ul>

<BR>

<!--ここまでが左メニュー-->

これが典型的なメニュー分けです。初めは高望みせずにこのくらいのコンテンツで十分だと思います。

メニューを増やす方法については、発展編で解説する予定です。
とりあえず、メニューはこのままにして次に進んでくださいね。

58～60行目：当サイトへのリンク

<div align="right">
<A href="http://affiliate.kodukai-fun.com" target="_blank">
<IMG src="images/c.gif" width="117" height="23" border="0" alt="テンプレート"></A>
</div>

これは「Template By」という画像でこのサイトへのリンク部分です。できるだけ消さないでほしいのですが、強制ではありません。消す場合は<div align="right">～</div>を取っ払ってください。

65行目～：メインコンテンツ

<!--ここからメインテーブルです-->
・・・
・・・
・・・
<!--ここまでがメインテーブル-->

までをカスタマイズしましょう！ここが一番の正念場です。がんばりましょう。

「続きを読む…」をクリックして、続きをご覧ください。

後ろから５～３行目：著作権表示

あなたの著作権表示

<div class="footer">copyright(c)2004.あなたのサイト名<br>

一応、著作権表示をしておきましょう。「あなたのサイト名」というところを書き換えてください。私ならこうです↓

<div class="footer">copyright(c)2004.1からはじめるお小遣い稼ぎ<br>

私の著作権表示

うしろから３行目はテンプレートの著作権の表示です。これだけは絶対に削除しないでくださいね。

Copyright © 0からはじめる広告収入 All Rights Reserved.