TopCSS > 2007年11月
2007年11月21日

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

November 21,2007 1:01 AM
Tag:[]
Permalink

「画像置換」とは、ヘッダ部分にあるブログ名などのテキストを画像に置き換える手法で、文書構造や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 のバナー広告を固定レイアウトのヘッダに表示する」の記事の応用です。

Comments [7] | Trackbacks [1]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3