スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


テンプレート製作の手順5 CSSスタイルシートの変更

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

style.cssを開いてください

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

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

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

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

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


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

【最後に注意点】

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

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

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


スポンサーサイト

テンプレート製作の手順4 図の挿入

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

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


画像のタグ

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スタイルシートの変更


テンプレート製作の手順3 文字の装飾

【文字装飾等の方法】

●文字を太文字にする
 <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>

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

テンプレート製作の手順2 メインコンテンツの作成方法

【XHTMLでのタグの注意点】

1.タグはすべて小文字

2.注意するタグ

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

3.<font>タグは使わない


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

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

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


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

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

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


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




テンプレート製作の手順1

【最初に】

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

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

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


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


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

 上の図が開きます。

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


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

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


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

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


4.ナビを書き込みます。

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


5.サブタイトルを書き込みます。

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


6.サイトタイトルを書き込みます。

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


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


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

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


9.この作業を繰り返します。

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


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


ダウンロードからアップロード テンプレート製作の手順

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

テンプレートのダウンロード


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

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


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

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


4.解凍したファイルが出来ました。

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


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

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


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

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

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

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

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


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



2right-blue テンプレートのダウンロード

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



【ご利用規約】

■商用サイト(個人・法人問わず)が利用でき、カスタマイズ自由です。

■禁止事項

・アダルトサイトや違法サイトでのご利用。
・2次配布や販売など。
・スパムサイト。

■免責

・テンプレートを使用した際に発生した不都合などに関しては、一切の責任を負えません。

■上記のご利用規約を守って頂きご利用ください。

・サポートに関しては、基本的にございません。



→2right-blue テンプレートのダウンロード




2left-blue テンプレートのダウンロード

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



【ご利用規約】

■商用サイト(個人・法人問わず)が利用でき、カスタマイズ自由です。

■禁止事項

・アダルトサイトや違法サイトでのご利用。
・2次配布や販売など。
・スパムサイト。

■免責

・テンプレートを使用した際に発生した不都合などに関しては、一切の責任を負えません。

■上記のご利用規約を守って頂きご利用ください。

・サポートに関しては、基本的にございません。



→2left-blue テンプレートのダウンロード




2right-gray テンプレートのダウンロード

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



【ご利用規約】

■商用サイト(個人・法人問わず)が利用でき、カスタマイズ自由です。

■禁止事項

・アダルトサイトや違法サイトでのご利用。
・2次配布や販売など。
・スパムサイト。

■免責

・テンプレートを使用した際に発生した不都合などに関しては、一切の責任を負えません。

■上記のご利用規約を守って頂きご利用ください。

・サポートに関しては、基本的にございません。



→2right-gray テンプレートのダウンロード




2left-gray テンプレートのダウンロード

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



【ご利用規約】

■商用サイト(個人・法人問わず)が利用でき、カスタマイズ自由です。

■禁止事項

・アダルトサイトや違法サイトでのご利用。
・2次配布や販売など。
・スパムサイト。

■免責

・テンプレートを使用した際に発生した不都合などに関しては、一切の責任を負えません。

■上記のご利用規約を守って頂きご利用ください。

・サポートに関しては、基本的にございません。



→2left-gray テンプレートのダウンロード




ご利用規約


【ご利用規約】

■商用サイト(個人・法人問わず)が利用でき、カスタマイズ自由です。

■禁止事項

・アダルトサイトや違法サイトでのご利用。
・2次配布や販売など。
・スパムサイト。

■免責

・テンプレートを使用した際に発生した不都合などに関しては、一切の責任を負えません。

■上記のご利用規約を守って頂きご利用ください。

・サポートに関しては、基本的にございません。



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。