CSS3を使った新しい画像置換の方法

約3分で読めます。

ソースコードはテキストで、見た目は画像に変える画像置換について、CSSでよく使われる方法はtext-indent:-999pxが有名だと思いますが、発見したのでメモ。

現状の画像置換について

2009年の時点でGoogleはこの方法を推奨していません。

最近であれば、@font-faceの使用をGoogleは推奨という記事があります。

しかし日本では@font-faceの使用は難しいのが現状です。
日本語フォントはサイズが非常に重いです。私も@font-faceを一時期使ってみましたが、重すぎて使い物になりません。

そこでCSS3のcontent:url()を使用した方法を発見しました。

contentを使った画像置換

text-indentに比べて、非常に簡単です。ソースコードは以下の通りです。

<style type="text/css">
p.replace {content:url(img/test.jpg);}
</style>

<p class="replace">test</p>
Sample

test（webkit, Operaのみ）

非常に軽量に画像置換を行うことが可能ですが、この方法だとWebkit系とOperaは画像置換できますが、FireFoxとIEが表示されません。

FireFoxの表示について考える。

FireFoxの場合、::beforeや::afterでないとcontent:url()が使用できません。
そこで考えた方法が以下のソースです。

<style type="text/css">
p.replace {line-height:0;}
p.replace::after
{	display:block;
	content:url(http://kojika17.com/cntimg/replace/test.jpg);
	margin:-1em 0 0;}
</style>

<p class="replace">test</p>
Sample (FireFox対応)

test(FireFox対応)

  1. 文字同士の高さの間隔を0にします。
  2. ::afterで画像を吐き出します。
  3. そのままだと元の文字が見えてしまっているので
    1文字の単位であるemでマイナスマージンで隠せば画像置換できます。

Internet Explorerの対応

IE6まで対応しようと思うと、::after, ::before, content:url()が使えるようになるjavascriptを入れて、対応するしかないと思います。 ブックマークの中にあったので、そのjsがあったので紹介しておきます。

ie7-js - Google Project Hosting

ただしこのjsは色々な機能があり重いので、擬似要素に特化したjsを使う方が良いかもしれません。

この方法が使用できるシーン

IEの問題もありますが、使えるシーンを考えた場合、モバイル系なら使えるかもしれません。 Androidは、FireFox for Androidがあるので、マイナスマージンで飛ばす方法が必要になるかもしれませんが、iPhone, iPadのコンテンツであれば、contentでそのまま画像を置きかることができます。

ただし画像置換自体が検索エンジンが推奨していることではないのであまり使うべきではないと思います。
画像置換に応用できる方法を発見したので、メモとして記載しておきます。

Entry Categories
CSS
CSS3
SEO
↑次の記事：
↓前の記事：
↑ページの先頭へ戻る

RelatedEntries