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 でブログ本文の画像だけをセンタリングする
- XREA のバナー広告を固定レイアウトのヘッダに表示する
- Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。
- グローバルナビゲーション（その1：基本スタイル）
- RSS フィードにスタイルシート（CSS）を適用する
- 「追記文章の折りたたみ 2.0」でIE7の不具合を解消する
- サブカテゴリーリストのツリー画像で親カテゴリーのみ異なる画像を表示する
- 公開テンプレートにフッタを追加する（2カラム版）
- CSS の after 擬似要素で回り込みを解除する
- テンプレートカスタマイズ支援ツール Column Resizer
- サイドバーのタイトル背景をカラム幅にあわせて表示する
- 公開テンプレートのサイドバーのカラム幅を変更する
- JavaScript 不要な月別アーカイブの年別ツリー化＋折りたたみ
- CSSでブログに影をつける - ドロップシャドウ画像ファイルの作り方
- CSSでブログに影をつける（ドロップシャドウ）
- IE7 の CSS ハック
- CSSでブロックレベル要素をセンタリングする
- 3カラムレイアウトをナビゲーションバー部分に適用する
お世話になります。
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
