エントリー本文
CSS の画像置換で画像にリンクを設定する
「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。
このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1
１．サンプル１
h1 の後方に img を置く場合は、CSSハックを使います（h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…）。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。
(X)HTML
<div id="header">
<h1>タイトル</h1>
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
</div>CSS
#header h1 {
font-size: 100%;
}
#header div {
position: relative;
}
#header div p {
position: absolute;
top: -19px;
_top: -18px; /* IE6 */
left: 0;
}
*:first-child+html #header div p {
top: -18px; /* IE7 */
}
/* opera9 \*/
html:\66irst-child #header div p {
top: -18px;
}ここでは適用していませんが、Windows XP + Safari3 の CSS ハックは下記で有効になります。
body:first-of-type #header div p {
top: -18px;
}２．サンプル２
img 要素を h1 要素より前に記述すれば CSS ハックが不要になります。ただし文書構造的にはサンプル１の方がいいかもしれません。
(X)HTML
<div id="header">
<div><p><a href="[URL]"><img src="[画像のURL]" alt="[代替テキスト]" title="[ツールチップ用テキスト]" /></a></p></div>
<h1>タイトル</h1>
</div>CSS
#header div {
position: relative;
}
#header div p {
position: absolute;
top: 0;
left: 0;
}３．その他
上記の設定は、画像サイズが表示領域を超えないことを前提にしています（overflow: hidden を設定して試したところ、IE7 では適用されませんでした）。
上記の他、何か良いアドバイスがあればお待ちしています。
４．参考・関連サイト
*1：このテクニックは「XREA のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。
≫ 【CSS】画像置換の方法を変更してみた from トイレのうず
CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で... [続きを読む]
お世話になります。
CSS の画像置換で画像にリンクを設定できたのですが、
今度はその横にメニューリンクのようなものを一列に並べて設定したいと思っていて、
それがどうにもうまくいきません。
http://zaitaku-shufu.com/index2 のように、
メニューリンクが改行されてタイトル画像の下にいってしまいます。
しかも、リンクの画像とテキストが重ならずに、こちらは横並びになってしまいます。
無知なのに、身の程知らずにがんばってしまっているので、
ずいぶんとおかしな質問をしてご迷惑をおかけしてしまいますが、
すみません、よろしくお願いします。
お世話になります。
CSS の画像置換で画像にリンクを設定できたのですが、
今度はその横にメニューリンクのようなものを一列に並べて設定したいと思っていて、
それがどうにもうまくいきません。
http://zaitaku-shufu.com/index2 のように、
メニューリンクが改行されてタイトル画像の下にいってしまいます。
しかも、リンクの画像とテキストが重ならずに、こちらは横並びになってしまいます。
無知なのに、身の程知らずにがんばってしまっているので、
ずいぶんとおかしな質問をしてご迷惑をおかけしてしまいますが、
すみません、よろしくお願いします。
＞サエコさん
こんにちは。
ご質問の件ですが、メニューリンクについては画像置換を用いるのではなく、順不同リスト（ul/li）を用いるが一般的です。
本ブログには画像を用いた記事がないのですが、
http://www.koikikukan.com/archives/2007/06/28-021131.php
を参考にチャレンジしてみて頂けますでしょうか。
それではよろしくお願い致します。
: December 28, 2007 1:58 PMyujiroさん、
いつもありがとうございます。
すみません、私の説明がへたで・・・。
画像置換を使ってメニューリンクをつくりたいわけではないのです。
画像置換したタイトルのとなりに並べてメニューリンクを置きたいのですが、
改行されてしまって、どうしてもタイトルの下にメニューリンクが来てしまいます。
同じ要素内におさめれば改行しないのかと思って、１つのdivの中にタイトルもメニューリンクも入れてしまったら、
当然ですが、メニューリンクも画像置換になってしまいました。
メニューリンクは、「WEBデザインの新しいルール」の“グローバルナビゲーションでページを切りかえる”の項を参考にさせていただいて（ul/li）を使って並べてあります（のつもりです汗）。
応用ができないのにへんにデザインに凝ってみたりなんかして、
すみません、お手を煩わせてしまいました。
また違う方法も含めてもう少し調べて勉強してみます！
すみません、
メニューリンクも画像置換になってしまうのは、
違う理由なのですね。
ごめんなさい、とんちんかんなこと言ってしまって。
とりあえず、画像置換になってしまう件は、解決しました！
たびたびすみません。
タイトル画像の横に、メニューリンクを並べることができました！
ほんとうに変な質問をしてしまってごめんなさい。
お恥ずかしいかぎりです。
タグがきちんと合っているかどうかはよくわからないのですが、
どうにか横並びにできたので、とりあえず先に進んでみます。
ありがとうございました。
