無料ホームページテンプレート　SEO対策「XHTML＋CSS」

１．各種ダウンロードページ下の「テンプレートのダウンロード」をクリックします。
　（2left-greenで説明します。）




２．保存をクリックしマイドキュメントに保存してください。




３．zipファイルが保存されましたので、解凍してください。
　　解凍方法は「zipファイルの圧縮・解凍」で検索し、調べて解凍してください。




４．解凍したファイルが出来ました。




５．ファイルを開くと各種ページが出来ています。




６．６つのファイル、２つのhtml、cssスタイルシートをサーバーにアップロードしてください。

・アップロードの仕方は「FFFTPの使い方（ダウンロードとインストール）」で検索し、
　調べてアップロードしてください

・アップロードすると、当サイトの2left-green-s　サンプルと同じサイトになります。

・URLは下記の様になります。

　TOPページ ： 　　　ｈttp://www.●●●.com/
　カテゴリページ ：　 ｈttp://www.●●●.com/item/
　商品ページ ：　　　 ｈttp://www.●●●.com/item/syouhinn.html
　店舗情報ページ ： ｈttp://www.●●●.com/kaisya/
　個人情報ページ ： ｈttp://www.●●●.com/policy/
　問合わせページ ： ｈttp://www.●●●.com/contact/
　リンクページ ： 　　 ｈttp://www.●●●.com/link/
　サイトマップ ：　　　ｈttp://www.●●●.com/sitemap.html


→続きましてテンプレート製作の手順1です

【最初に】

アップロードが済みましたら、サイトを作り上げていきますが、ホームページビルダー
などのソフトでも出来ますが、余分なタグやfontタグが入ってしまいますので、テキスト
エディターで作り上げていくのが理想です。

最初は大変ですが、使用するタグは多くないので、慣れれば簡単に出来ます。

テキストエディターはメモ帳を使用してもいいですが、私が使用している
「EmEditor Professional」（4.200円ぐらい）ですと色分けしており、大変使いやすいです。





１．ダウンロードしたファイルを開き、index.htmlを右リックしEmEditorをクリックします。

　上の図が開きます。




２．キーワード、サイトの紹介文、サイトタイトルを書き込みます。




３．サイトタイトル、サイトの説明を書き込みます。




４．ナビを書き込みます。




５．サブタイトルを書き込みます。




６．サイトタイトルを書き込みます。




７．これでサイトの基礎が出来ましたので、上書きしてください。


８．サイトを見てみましょう。　ファイルを開いてindex.htmlをダブルクリックしてください。




９．この作業を繰り返します。

　　テキストエディターに書込み上書きする→サイトを開いて更新して確認する。


→続きましてテンプレート製作の手順2です

【XHTMLでのタグの注意点】

１．タグはすべて小文字

２．注意するタグ

　　＜br＞→＜br /＞　改行
　　＜images /＞　　　 図のタグは＜ /＞で閉じる
　　＜input＞→＜input /＞
　　＜meta＞→＜meta /＞
　　＜hr＞→＜hr /＞

３．＜font＞タグは使わない


【ホームページの主要部分メインコンテンツの作成方法】

メインコンテンツを作成する部分はここです。




【メインコンテンツで使用する主なタグ】

　＜p＞●●●＜/p＞
　＜span class="●"＞●●●＜/span＞
　＜br /＞
　＜a href="●"＞●●●＜/a＞
　＜img src="images/●.jpg" width="●" height="●" alt="●" /＞
　＜hr /＞

以上のタグでほとんど作成できます。


→続きまして文字の装飾の仕方です

【文字装飾等の方法】

●文字を太文字にする
　＜p class="b"＞文字を太文字にする＜/p＞

●文字の大きさを変える
　（f8 f9 f10 f11 f12 f13 f14 f15 f16 f18 f20 f22 f24）

　＜p class="f11"＞文字の大きさ、11px＜/p＞

●文字の色を変える
　（black red blue green yellow navy gray orange pink purple olive lime aqua win）

　＜p class="green"＞文字の色、緑＜/p＞

●複合して使用する

　＜p class="f11 green b"＞文字の大きさ11px、緑、太文字＜/p＞

●Pタグ意外での変換

　＜span class="f11 green b"＞文字の大きさ11px、緑、太文字＜/span＞

●文字を左寄せ、中央寄せ、右寄せ
　（al-l　al-r al-c）

　　　　　　　　　　　　　　　　　　　＜p class="al-c"＞中央寄せ＜/p＞

●文字の上下の間隔を変える
　上（m0-t m10-t m20-t m30-t m40-t m50-t m60-t m70-t m80-t）
　下（m0-b m10-b m20-b m30-b m40-b m50-b m60-b m70-b m80-b） 　
　


＜p class="m40-t"＞上に40pxの間隔＜/p＞

　
→続きまして図の挿入の仕方です

＊最初にimagesフォルダーに図を貼り付けてください




画像のタグ

1階層　＜img src="images/●" width="●" height="●" alt="画像の説明" /＞
2階層　＜img src="../images/●" width="●" height="●" alt="画像の説明" /＞

----------------------------------------------------------------------

画像の右に文字のタグ

1階層　＜img src="images/●" width="●" height="●" alt="画像の説明" class="left" /＞

2階層　＜img src="../images/●" width="●" height="●" alt="画像の説明" class="left" /＞

----------------------------------------------------------------------

画像の左に文字のタグ

1階層　＜img src="images/●" width="●" height="●" alt="画像の説明" class="right" /＞

2階層　＜img src="../images/●" width="●" height="●" alt="画像の説明" class="right" /＞


→続きましてCSSスタイルシートの変更

【CSSスタイルシートを変更してヘッダー画像、文字の色等を変更します。】

style.cssを開いてください

・#header　の　(header.jpg)　を変更するとヘッダー画像が変わります。
　変更前に　imagesフォルダーに画像をはりつけてください。

・#header h1　の　(#FFFFFF)　を変更するとタイトルの文字の色が変わります。

・#header a　の　(#FFFFFF)　を変更するとタイトルのリンクの文字の色が変わります。

・#header p　の　(#FFFFFF)　を変更するとタイトル説明文の文字の色が変わります。

同様に　/*全体　/*ナビ　/*右　/*左　/*フッター等も変更できます。




【最後に注意点】

ページを変更したときには上書きし、サーバーにアップロードしてください。

imagesフォルダーに画像貼り付けたときにはimagesフォルダーを、サーバーにアップロード。

CSSスタイルシートを変更したときにはstyle.cssを、サーバーにアップロード。