ＴＯＰページテンプレートの作り方

無料で稼げるホームページの作り方＞ＳＴＥＰ２　ホームページの作り方＞ＴＯＰページテンプレートの作り方

では、本格的にホームページの作成を始めてみましょう。
まずは、ＴＯＰページのレイアウトです。
このレイアウトで、ホームページ全体のイメージが固まってきます。気合を入れて作りましょう！
ここでは、作成例とホームページビルダーを使った作成手順を紹介致します。

　お小遣いサイトＴＯＰページ作成例

わ、我ながらセンスがない・・・涙。
こんなんでも、「使ってやるよ！」って勇気のある人の為に、あえて公開しておこう！
そんな人はコピーして使うなり、加工して使うなり、ご自由にどうぞ！

【注意】
当方無料サーバの為、ページを保存すると忍者ＴＯＯＬＳの強制広告も一緒に保存されてしまいます。必ず最下段の忍者ＴＯＯＬＳの広告を削除して使って下さい。

こりゃカッコ悪くって使えない！って人でも、作成例のページを一度保存し、ホームページビルダーで開いてみてもらえば、ホームページ自体の構成が何となく理解出来るかと思います。

センスはどうであれ、訪問者の為に、すっきりした見やすいレイアウトになってるかが重要です。

　ＴＯＰページレイアウトの作成手順

殆どのホームページは、表（枠）でレイアウトを構成し、その中に文字や広告などを入れただけの、単純な構成で成立っています。
表の作り方と色のつけ方さえマスターしてしまえば、粗方は作れる様になってしまうって訳です。

①ホームページビルダーを起動させて編集スタイルをお好みで選択
ワードやエクセルを使った事がある人なら、「スタンダード」が違和感無く使えます。
パソコンが全く苦手！って人は「かんたん」でどうぞ。

②ツールバーの「新規作成」ボタンの▼をクリックして「標準モードで新規作成」を選択

ここで一点注意事項。
ホームページビルダーでは、「どこでも配置モード」っていう、絵や文字を好き勝手にレイアウトして、簡単にホームページが作成出来る便利な機能があります。
便利な反面、そのレイアウトが崩れやすいっていう欠点があります。
勿体無い様な気もしますが、「どこでも配置モード」は諦めて使わない方が無難でしょう。
特に、ホームページスペースを忍者ＴＯＯＬＳにした人は、本来左最下段に表示されるべきサーバの広告が、左最上段の一番目立つところに表示されてしまったりする様です。
→詳しくは忍者ＴＯＯＬＳのＱ＆Ａページを参照して下さい。

③「編集」メニュー「背景／文字色の設定」をクリックし基本書式を設定する
壁紙などの素材を拾ってきたらここで設定しておこう。それ以外は、まずは標準でよし。

④ホームページタイトルと紹介文用の表を挿入
では、早速レイアウト用の表を作成しましょう。

⑤表の幅を変更する
作成した表を選択し、画面右側のメニューで見やすい幅に変更します。

画面横にはみ出て、横スクロールが必要なホームページほどストレスを感じるものはありません。
画面サイズが８００×６００ピクセルの人も多くいます。
枠の幅は７５０ピクセル位までにしておいた方が良いでしょう。

⑥表に色をつける
次に、表にお好みの色をつけます。
ここで選んだ色が、最終的にはその表の枠の色になってきます。

すると表の枠とその内部が全て選択した色になります。

これでは文字が読める状態ではないので、表の中を白抜きします。

あとは、、表の高さをお好みで設定し、タイトルと説明文用の表が完成です。

⑦同じ要領で本文やメニュー用の表を作る
あとは同じ要領の繰り返しです。
ひすら表を使ってＴＯＰページのレイアウトを作成していきましょう。

　その他注意点

●　フレームを使うな
見やすいホームページを作ろうと思うと、つい使いたくなるのがフレーム。でもちょっと待った！これっていくつかのページを合成した複合ページです。
甘くみると、リンクを辿った時にフレームの中身だけしか表示されなかったなんて事になります。
また、検索エンジン対策としてもマイナス要因です。慣れないうちは手を出さない方が無難です。

●　音や動く画像なんかはいらない
ホームページを開いた時に音や曲が流れたり、凝った動く画像を取り入れる仕掛けは
初めて見た時→おっ！
２回目に見てくれた時→はいはい・・・。
３回目に見てくれた時→またこれか・・・。
はっきり言っときます！お小遣い稼ぎには全く関係がありません！！
そんな事に凝る時間があったら、１日でも早くお小遣い稼ぎを開始させて下さい。

　無料テンプレート配布サイトの紹介

もっとカッコ良いテンプレートはないのか！って人
無料で提供してくれてる素晴らしいサイトがあるので、ありがたく活用させてもらいましょう。
（制限、報告義務、著作権等、利用規約を良く確認して、マナーを守った活用お願いしますね）

てんぷれの天ぷら	アフィエイトサイト向けのテンプレートなので、楽にお小遣いサイトが作れます。実は・・・、私もここで貰った「あったか系」でお小遣いサイトのＴＯＰページを作成した経験あり！
ネットマニア	管理人さんの言う、クールサイトの定義「ユーザーに優しく、使い易いサイト」ってとっても共感です。クールサイトを作りたい人必見！その他、素材やホームページ作りのノウハウも充実してます。
Webデザインテンプレート集	シンプル系でカッコ良くサイトを作りたいならここ！ＴＯＰページ向けだけではなく、リンクページ用とか枠用とかもセットで揃えてくれています。
１０プレート	Webデザインテンプレートサイト専門のリンク集です。テンプレートもどきなどと言って管理人さんオリジナルも公開してますが、何を言いますか。なかなかの出来です。
Cool-website.NET	グラフィックデザイナー・Webディレクターである管理人さんが運営するサイト。さすがプロが作るテンプレートは物が違います！

　ホームページタイトルの作り方　へ進む