PC Bibo 6 サンプル詳細ページ

バナーのタイトルに画像を使ったページの HTML とスタイルシート

このページでは、バナー部分を #banner、バナーのタイトルを <h1> とし、スタイルシートと HTML を以下のように記述しています。

スタイルシート

#banner {
text-align:left; margin:0px 30px 10px 30px;padding:30px 0 10px 0;border-bottom: 3px solid #cccccc; background-color:#ffffff;
}

h1 {
color: #ffffff; width: 200px; height: 40px;font-size: 0;
font-weight:normal; margin:0 0 5px 0; padding:10px 10px 10px 0;
}

h1 a {
display:block; width:200px; height:40px; font-size:0; font-weight:normal; text-decoration:none; text-indent:-9999px; background:url(http://xxxxxx/xxx/logo.gif) no-repeat 0 0; border-bottom:0px;
}

margin や padding など、#banner の各スタイルはお使いのブログやサイトに応じて設定してください。

ポイントは h1 のフォントカラーを背景色と同じ色に、font-size を 0 に、text-indent を -9999px に指定することです。width: 200px; height: 40px; が、画像におけるリンクエリア（マウスのポインターが変わる箇所）になります（バナーの PC Bibo 6 の画像にマウスを乗せてみてください）。このページでは、たまたま画像（ロゴ）のサイズとリンクエリアのサイズが一致していますが、画像のサイズがたとえば width: 800px; height: 80px; の場合に、その一部（たとえば、width: 250px; height: 50px; など）をリンクエリアに指定することも可能です。

background:url(http://xxxxxx/xxx/logo.gif)にはバナータイトルに使用する画像の絶対 URL を指定します。

HTML の記述例は以下のとおりです。

HTML
<div id="banner">

<h1><a href="http://xxxxxx/index.html">PC 備忘録: ブログのカスタマイズや便利なサイトやツールに関する情報</a></h1>
<h2>便利なサイトやツール、ブログのカスタマイズなど、何度も検索してしまうお役立ち・便利情報の備忘録</h2>
</div>

<a href="http://xxxxxx/index.html"> には、トップ（ホーム）ページの URL を指定します。h1 に指定する文字列（上記の例では「PC 備忘録: ブログのカスタマイズや便利なサイトやツールに関する情報」）は実際には表示されません。したがって、ロゴ画像とは異なる文字列を指定できます。キーワードを盛り込んだタイトルを指定すると SEO 的にも効果があると思います。

このページのバナー部分の PC Bibo 6 の画像ロゴ部分をクリックしてみてください。このサンプルのトップページにジャンプします。