ちょっと大きなタイトルつけすぎた（笑）
IE6を非対応にすれば、CSSの画像置換もこんなに簡単に、という例を紹介する。見出しの「次の要素」の背景画像で見出しを踏みつぶすやり方だ。できあがりはサンプルを参照のこと。
もちろん、いまIE6を見捨てるわけにはいかないが、自動更新でWindows XP以降のユーザーがIE7に移ってくれれば、IE6では画像置換できなくても十分許容されるはずだ。
html>body h1 {
margin: 0;
font-size: 16px;
height: 64px;
}
h1+* {
position: relative;
z-index: 2;
margin-top: -64px;
padding-top: 64px;
min-width: 320px;
background-image: url(title.gif);
background-repeat: no-repeat;
}<h1>画像でタイトル</h1>
<p>背景画像（320 by 64 pixels）をh1のテキストの上にかぶせています。</p>ソースも非常に簡単にすむ。h1で高さを確保し、次の要素（h1+*）で上に負のマージンで戻って、同じだけpaddingでまた下に持っていき、そのpadding部にno-repeatを指定した背景画像を置く。CSSのon/off、画像のon/offの4パターンどれでも、読めなくなることはないはずだ。
隣接セレクタを使っているので、h1の次の要素に制約を設けていないことがメリットのひとつである。今回はXHTML 1.0 Strictで書いたので次の要素は暗黙のうちにブロック要素であると仮定しているが、なんならdisplay:blockを書いてもいい。また、min-widthを使っているため、次の要素（例えばp）の文字数が少なくても多くてもちゃんと画像が表示される。
h1自体は子セレクタを使って高さを指定する。子セレクタ、隣接セレクタの両方ともIE6よけになっているので、IE6だと指定はすべて適用されず、ただのすっぴんになるはずである。position:relativeだけですましているので、ADP: 背景画像でタイトルよりも汎用性がある。
以下、いくつか注意点を。
h1のテキストのフォントサイズを固定しなければいけないこと、Firefoxではある程度フォントサイズを大きくしたらはみでてしまうことは注意する必要がある。場合によっては、h1にoverflow:hiddenやそれに伴うMacIE5よけをすることになる。
h1+*だと、優先順位的に弱いので他の指定に上書きされてしまう危険性がある。しかし普通に使うやり方は見出しにidをつけて決め打ちだろうから、心配せずがんがん使えるはずだ。
ケースにもよるが次の要素ではborderの指定があると困るので、border:0を書いた方がいいかもしれない。
あと、今のサンプルだとSafari（1.3.2または2.0.4）で印刷しようとするとはまる。症例と対策については、ADP: 負のマージンとSafariの話を参照のこと。
うちのサイトでも、コメントとか、トラックバックとかの見出しにはすでにidがついているので、すぐに適用できそうだなと考えている。
トラックバックURL: http://adp.daa.jp/cgi/mt2/mt-tb.cgi/629
自己レス。ちょっとマシな画像置換（てんぽ） http://mb.blog7.fc2.com/blog-entry-51.html とほぼ同じですが、次の要素がなんであるかに制約を設けない点でよりスマートだと思っています。なんにしても、こっちが使えるようになるのはIE6のシェアが下がってからです。