スポンサーサイト

上記の広告は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>

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


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