FC2ブログのテンプレートをつくったりしてます。
「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。 まもるべき条件はつぎの2つ。
一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。 サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。
<div class="secondary-column">
<h2>Appendix</h2>
<div class="section" id="categories-archives">
<h3>Categories Archives</h3>
<ul>
<li><a href="#">カテゴリ1</a></li>
<li><a href="#">カテゴリ2</a></li>
<li><a href="#">カテゴリ3</a></li>
<li><a href="#">カテゴリ4</a></li>
</ul>
</div>
(略)
</div>
div.secondary-column div {
position:relative; /* (つぎのwidth:100%のためのpositionの基準)*/
}
div.secondary-column h3 {
position:absolute; /* 通常フローから除く */
z-index:1;
width:100%; /*(もとのテンプレはh3にボーダーがあるので)*/
padding:0;
margin:0;
}
div.secondary-column ul {
position:relative;
z-index:2; /* h3より上にする */
padding-top:38px; /* 画像を表示させる部分 */
margin-top:0!important; /*(もとのテンプレの指定を上書き)*/
background-position:top left;
background-repeat:no-repeat;
}
div#categories-archives ul {
background-image:url(cfdn_09categories.png);
}
div#monthly-archives ul {
background-image:url(cfdn_09monthly.png);
}
div#links ul {
background-image:url(cfdn_09links.png);
}
ポイントは強調箇所。 position:abosoluteを指定した箇所が通常の流し込みから取り除かれるのを利用して、直後のul要素をh3要素に重ねます。 そしてul要素に画像の高さ分ほどのpadding-topをとって、そこに背景画像を表示させます。z-indexでul要素をh3要素の上にもってきて完成。
カッコ内はcfdn_09のもとの装飾に合わせるためのもので、必ずしも必要ではありません。
テキストに画像を重ねているだけで、消したり(display:none)飛ばしたり(text-indent:-9999px)しているわけではないので、画像を非表示にすればもとのテキストが現れます。 コピペはできませんが。