Latest Entries

ちょっとマシな画像置換

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

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

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

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

テキストに画像を重ねているだけで、消したり(display:none)飛ばしたり(text-indent:-9999px)しているわけではないので、画像を非表示にすればもとのテキストが現れます。 コピペはできませんが。