ちょっとマシな画像置換

2005年11月08日（火）コメント:0 トラックバック:2

「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。まもるべき条件はつぎの2つ。

HTMLに手を加えず、CSSの変更だけで実現できること
CSS有効かつ画像非表示の環境では、もとのテキストが表示されること

一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。

該当箇所の（X）HTML

<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>

追加したCSS

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のもとの装飾に合わせるためのもので、必ずしも必要ではありません。