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 のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。
- YouTube動画にキャプションをつけてテキストを回り込ませる方法
- 画像を下揃えにしてテキストを回り込ませる方法
- style要素にCSSの擬似要素は記述可能か？
- position:relativeを設定すると他の要素がずれる場合の対処
- CSSでタブ切り替えする方法
- :target擬似クラスのまとめ
- CSSでヘッダを固定したスクロールテーブルを作る方法
- レスポンシブウェブデザインで画像を縮小する方法
- disabledなボタンのhoverのスタイルを無効にする方法
- HTML要素を別の要素を基点にしてCSSで絶対配置する方法
- :not擬似クラスでCSS3のサポートをチェックする方法
- :checked擬似クラスでチェックボックスに連動して要素を表示させる方法
- ol要素の入れ子で親の番号を子に割り当てる方法
- チェックボックスやラジオボタンを大きくする方法
- CSSで中央に配置する方法
≫ 【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）を使って並べてあります（のつもりです汗）。
応用ができないのにへんにデザインに凝ってみたりなんかして、
すみません、お手を煩わせてしまいました。
また違う方法も含めてもう少し調べて勉強してみます！
すみません、
メニューリンクも画像置換になってしまうのは、
違う理由なのですね。
ごめんなさい、とんちんかんなこと言ってしまって。
とりあえず、画像置換になってしまう件は、解決しました！
たびたびすみません。
タイトル画像の横に、メニューリンクを並べることができました！
ほんとうに変な質問をしてしまってごめんなさい。
お恥ずかしいかぎりです。
タグがきちんと合っているかどうかはよくわからないのですが、
どうにか横並びにできたので、とりあえず先に進んでみます。
ありがとうございました。
＞サエコさん
こんばんは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ではでは！
: December 30, 2007 12:49 AM
