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

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

style.cssを開いてください

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

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

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

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

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




【最後に注意点】

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

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

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

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

【文字装飾等の方法】

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

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