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のより下に表示ることが可能になります。
ただ、この手法
- MacIEで画像が表示されない
- 文字を拡大すると画像から文字が溢れる
といった問題点も満載です。
結論
画像置換のデメリットを克服しているとはいえ、他のデメリットが多すぎるテクニックです。表示媒体が限定されている場合などは使えるテクニックかも知れません。
(微妙かな・・・)
予告
実は今回は画像置換5部作としてエントリーをしています。
という訳で次回は『一番簡単な画像置換の方法』です。
スポンサードリンク
«画像置換に関する考え方 | メイン | 一番簡単な画像置換の方法-imageReplace.js-»
- このエントリーのトラックバックURL
- https://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1322
- トラックバック内容
-
» text-indent:-9999pxはSEOのスパムになるのかと対策について
from N-Brid - WEBクリエイティブ Labo.
懸念事項のような問題点については、ホームページをビジュアルなものとして制作しながら、SEO対策を施すということをすると必ず出てくる問題点だ。 ...
はじめまして。
text-indent:-9999px;以外で、SEO対策として有効そうな手法として大変参考になりました。
ただし、いろいろとデメリットもあるようですが、工夫次第では使えるそうですね。
コレに似た手法ですが、ほとんどのブラウザ(Opera6以外)に対応しています。
MacIEももちろん。
文字が大きくなっても可能。
です。
DKIR
http://kikky.net/pc/css_ir2.html
本家で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