BIR-もうひとつの画像置換

画像置換が普及し出した頃、一瞬だけ話題になって消えていったテクニックがあります。

それがBIR (Bob Image Replacement)とういうテクニックです。

このテクニックの特筆すべき所は、『CSSがONで画像がOFFの際に何も表示されない』という画像置換の欠点を克服している所にあります。

どのような手法かというと(X)HTMLは以下のようになります。

<p><em>とあるWEBクリエイターのblog</em></p>

画像で表示、つまり、目立たされる為に画像に置き換える為、em要素で包み込む。
em要素はそれ自体では意味を成さない為、ブロックレベル要素(この場合はp要素)で包む。

ただ、マークアップの説明は後付けで、本当は置き換えたい文字を2つの要素で包めれば良いので、好みでマークアップしてください。

CSSは以下のようになります。

body{
　position:relative;
　z-index:1;
}
p {
　width:400px;
　height:50px;
　background:url("logo.gif") top left no-repeat;
}
p em{
　position:relative;
　z-index:-1;
}

注目するところはz-index:1をbody要素にしている所です。
emに記述されているz-index:-1;で、em要素に記述されている文章をbodyのより下に表示ることが可能になります。

サンプル

ただ、この手法

といった問題点も満載です。

結論

画像置換のデメリットを克服しているとはいえ、他のデメリットが多すぎるテクニックです。表示媒体が限定されている場合などは使えるテクニックかも知れません。
(微妙かな・・・)

予告

実は今回は画像置換5部作としてエントリーをしています。

  1. 画像置換
  2. 画像置換でメニューを作る
  3. 画像置換に関する考え方
  4. BIR-もうひとつの画像置換
  5. 一番簡単な画像置換の方法

という訳で次回は『一番簡単な画像置換の方法』です。

スポンサードリンク

«画像置換に関する考え方 | メイン | 一番簡単な画像置換の方法-imageReplace.js-»

このエントリーのトラックバックURL
https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1322
トラックバック内容
» text-indent:-9999pxはSEOのスパムになるのかと対策について from N-Brid　- WEBクリエイティブ Labo.
懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。 ...
トラックバック時刻: 2007年7月26日 11:42
コメント

はじめまして。
text-indent:-9999px;以外で、SEO対策として有効そうな手法として大変参考になりました。
ただし、いろいろとデメリットもあるようですが、工夫次第では使えるそうですね。

投稿者:N-Brid | 2007年7月26日 11:35

コレに似た手法ですが、ほとんどのブラウザ（Opera6以外）に対応しています。
MacIEももちろん。
文字が大きくなっても可能。
です。


DKIR
http://kikky.net/pc/css_ir2.html

投稿者:hama | 2007年8月22日 17:42

本家でMacIEの画像が出ないのはIEのバグですね
background:transparent url('image.jpg') top left no-repeat;
を
background:transparent url(image.jpg) top left no-repeat;

とすると表示されます。
http://kikky.net/pc/css_bug026.html

投稿者:hama | 2007年8月23日 17:35
コメントを投稿