タイトルロゴをテキストからイメージに置き換える方法
初心者向けですが、トップのタイトル部分のロゴをテキストからイメージに置き換える方法です。
初めての方は難しいと感じられますが、少しづつ体験していくうちに分かってきますよ。
設置方法
その部分の<$header$>を削除し、ロゴをクリックしたらリンクに移動できるようにリンクタグを入れています。
なお、ロゴイメージはCSSで指定しています。
HTML編集部分
【修正前の一例】
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=800>
<TR><TD HEIGHT=30></TD></TR>
<TR><TD VALIGN=TOP>
<!------ ここから修正------>
<DIV CLASS=HEADER><$header$></DIV>
<!------ ここまで ------->
<DIV CLASS=URL><$blogurl$></DIV>
【修正後の一例】
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=800>
<TR><TD HEIGHT=10></TD></TR>
<TR><TD VALIGN=TOP>
<!------ ここから修正------>
<a href="サイトのURL"><DIV CLASS=HEADER></div></a>
<!------ ここまで ------->
<DIV CLASS=URL><$blogurl$></DIV>
CSS編集部分
イメージはCSSのバックグランドとして表示しています。もちろん、HTML部分で追加して表示する方法もありますので、ご自由に設定して下さい。
DIV.HEADER {
/*------- 追加部分--------*/
background-image:url(ロゴイメージファイル名);
background-repeat:no-repeat;
height:65px;/*イメージの高さ*/
width:518px;/*イメージの幅*/
/*------------------------*/
}
今日のポイント
- <$header$>は削除可能です。
- イメージの設置は画像の幅と高さを指定すると表示速度が速くなります。
CopyRight(C) 2004 All rights reserved by potto37