CSS の画像置換で画像にリンクを設定する

CSS の画像置換で画像にリンクを設定する

Posted at November 21,2007 1:01 AM
Tag:[CSS]

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造やSEOを損ねないための複数のテクニックが紹介されています。

このエントリーでは、画像置換をしつつ、さらに画像にリンクも与えられるサンプルを作ってみました。*1

1.サンプル1

h1 の後方に img を置く場合は、CSSハックを使います(h1 のフォントサイズを固定することで画像配置位置がブラウザに依存しなくなると思ったのですが…)。表示は Windows XP + IE6/IE7/Firefox2/Opera9/Safari3 でしか確認しています。

画像置換サンプル1

(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;
}

2.サンプル2

img 要素を h1 要素より前に記述すれば CSS ハックが不要になります。ただし文書構造的にはサンプル1の方がいいかもしれません。

画像置換サンプル2

(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;
}

3.その他

上記の設定は、画像サイズが表示領域を超えないことを前提にしています(overflow: hidden を設定して試したところ、IE7 では適用されませんでした)。
上記の他、何か良いアドバイスがあればお待ちしています。

4.参考・関連サイト


*1:このテクニックは「XREA のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

【CSS】画像置換の方法を変更してみた from トイレのうず
CSSの画像置換とはJavascriptを使わずにテキストを画像に置き換えて表示する方法。画像をbackgroundに指定する方法が一般的だけれど、印刷で... [続きを読む]

Tracked on December 13, 2008 10:50 PM
コメント

お世話になります。

CSS の画像置換で画像にリンクを設定できたのですが、
今度はその横にメニューリンクのようなものを一列に並べて設定したいと思っていて、
それがどうにもうまくいきません。

http://zaitaku-shufu.com/index2 のように、
メニューリンクが改行されてタイトル画像の下にいってしまいます。
しかも、リンクの画像とテキストが重ならずに、こちらは横並びになってしまいます。

無知なのに、身の程知らずにがんばってしまっているので、
ずいぶんとおかしな質問をしてご迷惑をおかけしてしまいますが、
すみません、よろしくお願いします。

[1] Posted by サエコ : December 27, 2007 2:12 PM

お世話になります。

CSS の画像置換で画像にリンクを設定できたのですが、
今度はその横にメニューリンクのようなものを一列に並べて設定したいと思っていて、
それがどうにもうまくいきません。

http://zaitaku-shufu.com/index2 のように、
メニューリンクが改行されてタイトル画像の下にいってしまいます。
しかも、リンクの画像とテキストが重ならずに、こちらは横並びになってしまいます。

無知なのに、身の程知らずにがんばってしまっているので、
ずいぶんとおかしな質問をしてご迷惑をおかけしてしまいますが、
すみません、よろしくお願いします。

[2] Posted by サエコ : December 27, 2007 2:33 PM

>サエコさん
こんにちは。
ご質問の件ですが、メニューリンクについては画像置換を用いるのではなく、順不同リスト(ul/li)を用いるが一般的です。
本ブログには画像を用いた記事がないのですが、
http://www.koikikukan.com/archives/2007/06/28-021131.php
を参考にチャレンジしてみて頂けますでしょうか。
それではよろしくお願い致します。

[3] Posted by yujiro logo : December 28, 2007 1:58 PM

yujiroさん、
いつもありがとうございます。

すみません、私の説明がへたで・・・。

画像置換を使ってメニューリンクをつくりたいわけではないのです。
画像置換したタイトルのとなりに並べてメニューリンクを置きたいのですが、
改行されてしまって、どうしてもタイトルの下にメニューリンクが来てしまいます。
同じ要素内におさめれば改行しないのかと思って、1つのdivの中にタイトルもメニューリンクも入れてしまったら、
当然ですが、メニューリンクも画像置換になってしまいました。

メニューリンクは、「WEBデザインの新しいルール」の“グローバルナビゲーションでページを切りかえる”の項を参考にさせていただいて(ul/li)を使って並べてあります(のつもりです汗)。

応用ができないのにへんにデザインに凝ってみたりなんかして、
すみません、お手を煩わせてしまいました。

また違う方法も含めてもう少し調べて勉強してみます!

[4] Posted by サエコ : December 28, 2007 2:39 PM

すみません、
メニューリンクも画像置換になってしまうのは、
違う理由なのですね。
ごめんなさい、とんちんかんなこと言ってしまって。

とりあえず、画像置換になってしまう件は、解決しました!

[5] Posted by サエコ : December 28, 2007 4:21 PM

たびたびすみません。

タイトル画像の横に、メニューリンクを並べることができました!

ほんとうに変な質問をしてしまってごめんなさい。
お恥ずかしいかぎりです。

タグがきちんと合っているかどうかはよくわからないのですが、
どうにか横並びにできたので、とりあえず先に進んでみます。

ありがとうございました。

[6] Posted by サエコ : December 29, 2007 12:17 AM

>サエコさん
こんばんは。
ご連絡ありがとうございました。
無事に解決されたようで良かったです。
ではでは!

[7] Posted by yujiro logo : December 30, 2007 12:49 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)