文字列(h1など)を画像で置き換える(span要素使用)

h1要素で指定したタイトルなどを画像に置き換える方法を紹介します。

SEOを考えると画像よりも文字の方がよいと考えられるため次のような方法を取ってみます。 実際のところは、わかりませんが・・・。

HTMLの例

<h1 id="logo"><span>Hello world!</span></h1>

CSSの例

*{
    margin:0;
    padding:0;
}
h1#logo span {
    display: none;
}
h1#logo {
    height: 80px; /* 画像の高さ(height) */
    background-image: url('./img/logo.png');
    background-repeat: no-repeat;
}

bnote

この方法では、h1要素の背景に置き換える画像を指定し、文字列にspan要素を指定することで 文字列を非表示にしています。