CSSを使ってテキストを画像に置き換えるTips

トップ > パソコン > インターネット > Webデザイン > CSSを使ってテキストを画像に置き換えるTips

« 子供が「水疱瘡（みずぼうそう）」になりました | 子供から「父の日」のプレゼント »

CSSを使ってテキストを画像に置き換えるTips

Posted by 琉羅 at 2007年06月16日 15:48

サンプルロゴ

ブログやサイトのタイトルをクールな画像で表示してみたい、と思ったことはありませんか？
ただ画像をタイトルロゴとして表示するなけなら話は簡単なんですが、今回はCSSを利用してテキストを画像に置き換える方法をご紹介したいと思います。

大体のブログは初期状態でブログタイトルをテキストで表示するようになっているはずです。具体的には下記のような感じですね。

<h1><a href="http://www.hogehoge.com" title="ブログタイトル">ブログタイトル</a></h1>

で、ブログタイトル部分を画像にしたければ通常、

<h1><a href="http://www.hogehoge.com" title="ブログタイトル"><img src="http://www.hogehoge.com/images/logo.gif" alt="ブログタイトル" width="200" height="50" /></a></h1>

このようにテキストを<img>タグに置き換えれば良い訳です。

しかし、以前当ブログでもタイトルロゴをWeb2.0風にしたことをエントリーにしましたが、このロゴを上手く表示させるために少なくとも私は結構苦労した訳で、というのも背景が単色なら何の苦労もしなかったんでしょうけど、当ブログの場合は背景にも画像を利用しており、微妙なグラデーションがかかっています。

ではどのようになるのかを見ていただくために、実際に透過gifを使ってタイトルロゴを表示させてみました。

一目瞭然だとは思いますが、透過gifやpng-8はアルファチャンネルを持っていないためアンチエイリアスが崩れ、透過部分も白くなってしまい、このような表示になってしまいます。これでは折角作ったクールなロゴも台無しです。もし背景が白単色だったら、

このように何の苦労も必要無いんですがね。背景色が単色であれば別に白でなくとも、元々画像の背景にその色を使って作成すればいい訳ですし。

では、アルファチャンネルを持っているpng-24を利用すればいいんじゃないか？という案も考え、早速表示させてみました。

お、綺麗に表示されてるじゃないか！と思ったアナタはIEユーザーではない！（￣ー￣）
・・・という冗談はさておき、これをIE6以下で見てみるとこのような表示になってしまう訳で、原因はIE6以下がアルファチャンネルに対応していないため（IE7は対応しています）。流石にまだまだ現役のIE6でウチのサイトを閲覧するな！と強制する度胸も無く、これも却下。

つまり<img>タグを使ってブログタイトルを画像に置き換える方法は全滅しました。しかし、ここまでやって諦めるのは嫌でしたので、色々なサイトのソースやCSSを見て回り、やっとのことでその方法を発見することに成功（・∀・）

それはCSSと背景画像を利用した方法で、最初からロゴと背景を統合した画像を利用し、CSSでブロック要素を指定して通常の画像リンクのように動作させます。
では早速その方法をご紹介しましょう。

まずHTMLの構文は冒頭でご紹介したテキストリンクを利用します。

<body>
  <div id="container">
    <div id="header">
      <h1><a href="http://www.hogehoge.com" title="ブログタイトル">ブログタイトル</a></h1>
    </div>
          ：

次にCSSに下記のような記述を追加します（このCSSはサンプル用ですので実際に利用する場合は各自で変更及び調整してください）。

#body {
  text-align: center;
}

#container {
  width: 700px;
  margin: 0 auto 0 auto;
  text-align: left;
}

#header {
  width: 100%;
  height: 200px;
  background: url(test-bglogo.gif) no-repeat top center;
}

h1 {
  /* ボックスの表示位置を調整 */
  padding: 35px 0 0 67px;
}

h1 a {
  display: block;
  /* ボックスの幅と高さを調整 */
  width: 400px;
  height: 130px;
}

すると下記のような表示になります。

ブログタイトル

しかし、このままではテキストが重なって表示されてしまいますので、HTMLとCSSに下記青字部分を追加します。

          ：
    <div id="header">
      <h1><a href="http://www.hogehoge.com" title="ブログタイトル"><span class="none">ブログタイトル</span></a></h1>
    </div>
          ：-

          ：
.none {
  display: none;
}

これで下記のようになれば完成です。

サンプルロゴ

また、ボックスの余白や幅・高さを調整することによってクリック可能な箇所を変更することができますので、デザインに合わせて上手く調整してみてください。

          ：
h1 {
  /* ボックスの表示位置を調整 */
  padding: 20px 0 0 40px;
}

h1 a {
  display: block;
  /* ボックスの幅と高さを調整 */
  width: 455px;
  height: 82px;
}
          ：

サンプルロゴ

クリック可能な位置を変更した例

ただ、CSSでこのようにテキストを隠蔽するような手法は検索エンジンスパムとなるのではないかという疑問がありますが、下記を読む限りでは「正当な理由で利用する限り問題がない」だそうです。