PamGau

概略

「ADP 方式」と kyorecoba が勝手に呼称。出典は下記の記事。

ADP: 背景画像でタイトル

画像に置換したいセレクタに、"position:absolute;" と指定されたセレクタをかぶせる。

このサンプルでの応用

「ブログの説明」に当たる文字列「Web周り、……」にトップページへのリンクアンカーを設定。

"div#description a" を、"display:block" とした上で、"padding-top" を画像高さ分だけ多めに設定。

"position:absolute;" で、"h1#blog-title" の文字列「PamGau」にかぶせている。

尚、馬の画像は、"h1#blog-title" の背景として設定。

長所

• 余分なセレクタを増やさずに済んだ (= HTML を汚さない)。
• 携帯ユーザに多い、画像非表示・CSS 有効で閲覧しても画像で置換された文字を読める。

短所

• "position:absolute;" を好まない人はやらないかも…。
• アンカー領域がロゴ部分よりも広くなる。

関連ブログ記事

ブログタイトルの画像置換の CSS (PamGau)

HTML ソース　(このファイルより抜粋)

<h1 id="blog-title"><a href="http://pamgau.net/">PamGau</a></h1>
<div id="description">
<a href="http://pamgau.net/">Web周り、サッカーの話、ときどきヌコ</a>
</div>
<ul id="topnavi">
<li>Home</li>
<li><a href="http://pamgau.net/archives/1">Archive</a></li>
<li><a href="http://pamgau.net/archives/1/#category">Category</a></li>
<li><a href="http://pamgau.net/member/1">About</a></li>
<li>
<form action="post" id="searchbox">
<input type="text" />
</form>
</li>
<li><a href="http://feeds.feedburner.jp/pamgau"
 title="このブログのRSSフィード">
 <img src="http://pamgau.net/skins/01pamgau/images/feed-icon-16x16.png"
  width="16" height="16"
   alt="RSS icon" id="feed-icon" /></a></li>
</ul>

CSS ソース　(title00.css より抜粋)

#blog-title{
  background:
  url('http://pamgau.net/skins/01pamgau/images/horse_s.gif')
   right bottom no-repeat scroll transparent;
  height:100px;
}

#blog-title a{
  font-size:378%;
  font-weight:bold;
  color:#333;
  text-decoration:none;
}

#description{
  font-size:107%;
}

#description a{
  position:absolute;
  top:40px;
  left:8%;
  color:#333;
  text-decoration:none;
  width:370px;
  padding:68px 0 0 0;
  background:
  url('http://pamgau.net/skins/01pamgau/images/title.gif')
   left top no-repeat scroll transparent;
}

#topnavi{
  background:#8faaa5;
  text-align:right;
  padding:4px;
  margin-bottom:40px;
  font-size:107%;
}

#topnavi li{
  display:inline;
  color:#000;
  padding:0 4px;
}


#topnavi li a{
  color:#eee;
  text-decoration:none;
}

#topnavi li a:hover{
  color:#fff;
  background:#5f716e;
}

#searchbox{
  display:inline;
}

img#feed-icon{
  margin:0;
  padding:0;
  vertical-align:middle;
}