現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：タイトルをロゴ画像にする
タイトルをロゴ画像にする
「横幅を広くするには」で指定したものと同じに「幅760px」で考えます。
ヘッダー部分のタイトルを
- 変更部分
-
- #header p
- その他事前変更
- 以前指定していた各パーツの背景は削除しています。
- 余白を指定しています。
- 画像は「img」というフォルダに保存したとします。
- タイトル部分を見出しh1へ変更してます。
- ロゴを準備してます。
**HTML**********************************************
<h1>カスタマイズ</h1>
/*----------下記が変更後のHTML*/
<h1>
<img src="img/logo.gif" border="0" alt="カスタマイズサンプルロゴ" width="250" height="61">
</h1>
/*----------リンクを指定した場合*/
<h1><a href="index.html">
<img src="img/logo.gif" border="0" alt="カスタマイズサンプルロゴ" width="250" height="61">
</a></h1>
**CSS***********************************************
#header p{
padding: 0;
margin: 0;
}
/*----------下記が変更後のソース*/
h1{
padding: 20px 50px;
}
/*----------リンクを指定した場合*/
h1 a,
h1 a:hover{
text-decoration: none; -----下線表示をなくしています
}
タイトルをロゴ画像にする-その2
今回は、ヘッダー部分にも背景画像を使った際の指定です。ロゴと背景が一体化したパターンです。
HTMLは上記のままです。
#header{
padding: 0;
margin: 0;
height: 100px;
background-color: silver;
color: black;
}
#header p{
padding: 0;
margin: 0;
}
/*----------下記が変更後のソース*/
#header{
padding: 0;
margin: 0;
height: 200px;
background: url(img/bg-header.jpg) no-repeat 0 0;
}
h1{
padding: 30px 0 10px 0; -----ここでロゴが背景画像に合うように調節
}
/*----------リンクを指定した場合*/
h1 a,
h1 a:hover{
text-decoration: none; -----下線表示をなくしています
}
高性能サーバ
低価格サーバ
無料ホームページスペース
