てんぽ: ちょっとマシな画像置換

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

ちょっとマシな画像置換

2005年11月08日(火)

「画像置換」の最大の欠点を克服し、CSS有効かつ画像非表示の環境ではもとのテキストが表示される方法。 まもるべき条件はつぎの2つ。

  • HTMLに手を加えず、CSSの変更だけで実現できること
  • CSS有効かつ画像非表示の環境では、もとのテキストが表示されること

一番目の条件はもとのHTMLがどんなだったかに依存しますが、ここでは公式テンプレのcfdn_09を例にします。 サイドバーのh3要素「Categories Archives」「Monthly Archives」「Links」を画像に変換します。

該当箇所の(X)HTML
<div class="secondary-column">
<h2>Appendix</h2>

 <div class="section" id="categories-archives">
  <h3>Categories Archives</h3>
  <ul>
  <li><a href="#">カテゴリ1</a></li>
  <li><a href="#">カテゴリ2</a></li>
  <li><a href="#">カテゴリ3</a></li>
  <li><a href="#">カテゴリ4</a></li>
  </ul>
 </div>

(略)

</div>
追加したCSS
div.secondary-column div {
 position:relative; /* (つぎのwidth:100%のためのpositionの基準)*/
}

div.secondary-column h3 {
 position:absolute; /* 通常フローから除く */
 z-index:1;
 width:100%; /*(もとのテンプレはh3にボーダーがあるので)*/
 padding:0;
 margin:0;
}

div.secondary-column ul {
 position:relative;
 z-index:2; /* h3より上にする */
 padding-top:38px; /* 画像を表示させる部分 */
 margin-top:0!important; /*(もとのテンプレの指定を上書き)*/
 background-position:top left;
 background-repeat:no-repeat;
}

div#categories-archives ul {
 background-image:url(cfdn_09categories.png);
}

div#monthly-archives ul {
 background-image:url(cfdn_09monthly.png);
}

div#links ul {
 background-image:url(cfdn_09links.png);
}
解説

ポイントは強調箇所。 position:abosoluteを指定した箇所が通常の流し込みから取り除かれるのを利用して、直後のul要素をh3要素に重ねます。 そしてul要素に画像の高さ分ほどのpadding-topをとって、そこに背景画像を表示させます。z-indexでul要素をh3要素の上にもってきて完成。

カッコ内はcfdn_09のもとの装飾に合わせるためのもので、必ずしも必要ではありません。

テキストに画像を重ねているだけで、消したり(display:none)飛ばしたり(text-indent:-9999px)しているわけではないので、画像を非表示にすればもとのテキストが現れます。 コピペはできませんが。

負のmargin-topの方法

position:absoluteではなく、負のmargin-topを使ってボックスを重ねる方法もあります。

#51
カテゴリ:HTML・CSS
タグ[ CSS ]

(-0件)

コメントの投稿

トラックバック(-2件)

http://mb.blog7.fc2.com/tb.php/51-e5d60543

PSPブラウザだと画像置換リンクがクリックできない

昨日はオフ友のhydroさんに遊んでもらいました。NetFrontというブラウザが採用されている、PSPのでの表示状態が気になっていたので、hydroさんが持っていたPSPを借りてブラウジングさせてもらいました。レガシーレ

  • 2006年09月18日(月)15:27:47
  • from ウェビンブログ
画像置換で考えていること(1)

考えていること。 ADP: これからのCSS画像置換の話、思いつきにしてはいいと...

  • 2007年09月27日(木)20:18:15
  • from Alternative Design Project

<<画像置換の問題点 | 『トリック』新作スペシャル 本日午後9時>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。