サンプルＨＰのカスタマイズ方法
無料雛形サンプルをカスタマイズしましょう。
ホームページテンプレートの記入箇所など。
ＨＰのタイトルタグやメタタグの記入
前のページで無料のサンプル雛形テンプレートを使用してＨＰを作成した方は実際に表示されましたでしょうか？
最終的に画像のようなページが表示されればＯＫなので、ホームページタイトルタグやメタタグなどを記入しながら実際にあなたの無料ホームページを作成してみましょう。
html ソースの部分に記入する箇所としては、あなたのホームページタイトルタグとキーワード、サイト説明などの数箇所です。
雛形テンプレートにはＨ１からＨ４までの見出しをとりあえず記入していますが、Ｈ１とＨ２だけでも初心者簡単にホームページを作成する際は大丈夫です。
headタグ内のメタタグの記入
最初に記入する箇所としては、html ファイルの head タグ内にあるタイトルタグやキーワードなどの「メタタグ」です。head 内のメタタグは実際にホームページとして表示される部分ではなく、検索エンジンやユーザビリティーのための一種の約束事みたいなものです。
あなたのホームページのタイトルやメインのキーワード、サイト説明を記入していきます。キーワードはだいたい３つぐらい、サイト説明はそのページの説明文をある程度の長さで記入するといいです。サイト説明は短すぎず長すぎずの80文字数ぐらいで記入するといいと思います。
ここまでのメタタグ部分を変えても、サイト自体の表示は変わりません。実際にインターネット上にホームページとして表示される部分は、次の body タグ以降からとなります。
body タグ以降の div 要素と、その要素が実際に表示されるホームページのどこに対応するかついてはこちらのページをご参照ください。
Ｈ１やＨ２の見出しなどの記入
head 内の meta タグが終わったら次にＨ１やＨ２の記事本文を記入していきます。Ｈ１にはそのページ全体のタイトルを、ページによってさらに話題が変わる場合はＨ２やＨ３を記入しながら作成していくといい感じなんではないかなって思います。
たとえばこのページを例にすると、Ｈ１からＨ３までを使って作成しています。
Ｈ１タグ（見出し）やＰタグ（段落わけ）で囲まれた部分が実際に表示されることになります。対応する箇所を書き換えたら保存して、実際に表示させてみながら作成していくといいのではないかなって気がします。
Ｈ１とフッターのリンクが切れていますので、リンクタグ作り方などを参照しながらつなげるか、このページのようにリンクなしにするのもいいと思います。
無料ブログでウェブページを作成する場合は、このメタタグの説明文やＨ１見出しなど固定されているものが多いですが、無料ホームページの場合、記事ごとに好きなタイトルや説明文を記述することができます。
この自由度の高さがブログよりもホームページで作成する際のメリットのひとつなので、ページごとにそれにあったメタタグや見出しを記述するようにしましょう。
さらに、ホームページの場合は、記事ごとにURLを自由につけることが出来る点も重要なメリットになるんで、そういう無料ホームページのいいところをフル活用した作り方をするといいと思います。
ここまでは html ファイルですが、次のページでは画像の色彩やレイアウトを変更するためのスタイルシート（ＣＳＳ）あれこれについて記事にしようと思います。
次のページ：ホームページのcssスタイルシート