<< いろんなご意見をありがとうござ... お知らせ:スキン編集のカテゴリ... >>
 

タイトルロゴをテキストからイメージに置き換える方法


初心者向けですが、トップのタイトル部分のロゴをテキストからイメージに置き換える方法です。
初めての方は難しいと感じられますが、少しづつ体験していくうちに分かってきますよ。




設置方法


HTML編集部分の<DIV CLASS=HEADER><$header$></DIV>の部分を探してください。

その部分の<$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>


図1 HTML修正前の一例



【修正後の一例】

<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>


図2 HTML修正後の一例


CSS編集部分



イメージはCSSのバックグランドとして表示しています。もちろん、HTML部分で追加して表示する方法もありますので、ご自由に設定して下さい。


DIV.HEADER {


/*------- 追加部分--------*/
background-image:url(ロゴイメージファイル名);
background-repeat:no-repeat;
height:65px;/*イメージの高さ*/
width:518px;/*イメージの幅*/
/*------------------------*/

}

図3 CSS追加例


今日のポイント
  • <$header$>は削除可能です。
  • イメージの設置は画像の幅と高さを指定すると表示速度が速くなります。


ぽっと


CopyRight(C) 2004 All rights reserved by potto37
[PR]
記事の下の方に広告が表示される場合があります。この広告はエキサイトの広告枠です。
by potto37 | 2004-08-30 21:25 | │├タイトルロゴ
<< いろんなご意見をありがとうござ... お知らせ:スキン編集のカテゴリ... >>
掲載の記事や画像などすべての複写・転載・公衆送信等はご遠慮ください。