CSSで画像を置き換えるための最良の(クロスブラウザのような)テクニックは何ですか? スプライトを使用してナビゲーションを行っていますが、マークアップを SEO フレンドリーのままにしたいと考えています。次の HTML 構造を考えると...
<div id="menu">
<ul>
<li><a href="#">Test</a></li>
<li><a href="#">Tester</a></li>
<li><a href="#">Testing Testing</a></li>
</ul>
</div>
CSSのみを使用してテキストを背景画像に置き換える最良の方法は何ですか?
私は現在これを使用しています...
text-indent: -9999px;
ただし、CSS をオンにして画像をオフにすると失敗します。
2008年のAnEventApartでのGoogleのプレゼンテーションでは、有効な画像の置き換えがGoogleによってペナルティを科されることはないことが明らかになりました。それについてのMezzoblueの投稿を参照してください
基本的に、テキストを置き換える画像に同じテキストが含まれている限り、それは有効であると見なされ、検索エンジンをだまそうとはしません。画像が有効かどうかをどのように判断しますか？わからない…OCR？手動レビュー？
CSSのオン/オフに関する限り、完璧な解決策はありません。それらはすべて、追加の非セマンティックマークアップを必要とします。さまざまなテクニックについての投稿を懇願するcss-tricksリンクを参照してください。私は個人的に、CSSで閲覧しているが、画像を閲覧していないユーザーのごくわずかな割合を気にしません。
あなたの選択は簡単です。追加のマークアップ、またはcssオン/画像オフを気にしないでください。
これがhtmlの場合：
<div id="menu">
<ul>
<li><a href="#" id="home">Home</a></li>
<li><a href="#" id="about">About</a></li>
<li><a href="#" id="contact">Contact</a></li>
</ul>
</div>
そして、これはcssです：
#menu ul li a{
display: block;
overflow: hidden;
text-indent: -9999px;
background: transparent url(yourpicture.png) no-repeat 0 0;
width: 100px;
}
#home{
background-position: 0px 0px
}
#about{
background-position: -100px 0px
}
#contact{
background-position: -200px 0px
}
画像の幅は 300 ピクセル、各タブの幅は 100 ピクセルになります。
私はちょうどこれを思いつきました、それはすべての最新のブラウザで動作するようです、私はちょうどそれをテストしました（IE8/互換性、Chrome、Safari、Moz）
HTML
<img id="my_image" alt="my text" src="images/small_transparent.gif" />
CSS
#my_image{
background-image:url('images/my_image.png');
width:100px;
height:100px;}
プロの:
私が考えることができる最大の欠点は、透明な gif しか送信しないため、CSS オフ/画像オンの状況です。
すべての画像ソースを background-image css プロパティに置き換えて、これを支援するために小さな JavaScript を作成することは可能かもしれません。ただし、これは、ブラウザーがまだ css プロパティを要素にアタッチし、それらを無視する場合にのみ機能します。これが当てはまるかどうかはわかりません。テストする必要があります。また、JavaScript ベースのテストを開発して、css がページに適用されているかどうかを確認することもできます (テスト要素の位置を確認するなど)。
ところで、スタイルシートなしで画像を使うのは誰ですか? 携帯電話か何か？
編集：
以下のコメントに基づいて...インラインスタイルhrm ...おそらく、次の<?php echo css_image('image_id','my text','image_url');?>ようなコードを生成するようにphpヘルパー関数を作成する必要があります。
HTML
<div id="image_id" style="background-image:url('image_url')" class="image">
<img src="image_url" class="alt_text" alt="my text" />
<p>my text</p>
</div><!--/#my_image-->
次に、スタイルシートにいくつかの CSS を添付するだけです
#image_id{width:*image width*;height:*image height*}
.alt_text{position:absolute;top:0px;left:0px}
.image{display:block;background-position:left top}
.image p{position:absolute;left:-9999em}
これは私が使用している古い手法ですが、どこで見つけたかはわかりません。CSS オン/画像オフ、CSS オフ/画像オン、CSS オン/画像オンで動作します。
CSS オフ/画像オフのユーザーがアクセスすると、テキストが二重に表示されます。検索エンジンのスパイダーがアクセスすると、代替テキストと通常のテキストが表示されます。インテリジェントなスパイダーは、これが何であるかを簡単に識別できます。無害な画像置換技術です。
したがって、代替テキストが読み取られるため、この手法はスクリーン リーダーには最悪ですが、これらのユーザーは次の段落にスキップできるはず<p></p>です。
CSSと画像の両方がオフになっている他のすべての人は、ある種のボットですよね?
通常、背景画像は<a>リンクに適用され、クリック可能な領域全体に画像が表示されます。テキストを非表示にするには、 に非常に大きな負の値を使用できますtext-indent。
これは、テキストをコード内に保持しながら、ユーザーには表示されないようにしながら、ロゴ テキストを画像に置き換えるために使用するコードです (これは Google によって承認されています)。ここで完成した例を表示します。
http://discretiondesigns.com/overflow/imagereplacement/
完全なコードは次のとおりです (画像は上記のリンクにあります - 画像はさまざまなサイズにすることができます - 画像全体をクリックしてホバーすると変化します):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Replacement</title>
<style type="text/css">
<!--
#menu li { list-style: none; }
#menu #a { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #a a { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #a a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/a_on.gif); }
#menu #a span { display: none; }
#menu #b { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #b a { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #b a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/b_on.gif); }
#menu #b span { display: none; }
#menu #c { font: .9em Verdana, Arial, Helvetica, sans-serif; color: #E9E7E0; height: 20px; width: 100px; padding-top: 8px; padding-left: 8px; float: left; }
#menu #c a { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_off.gif) no-repeat left top; height: 20px; width: 100px; display: block; }
#menu #c a:hover { background: url(http://discretiondesigns.com/overflow/imagereplacement/c_on.gif); }
#menu #c span { display: none; }
-->
</style>
</head>
<body>
<div id="menu">
<ul>
<li id="a"><a href="#" title="This is A!"><span>Nav A</span></a></li>
<li id="b"><a href="#" title="This is B!"><span>Nav B</span></a></li>
<li id="c"><a href="#" title="This is C!"><span>Nav C</span></a></li>
</ul>
</div>
</body>
</html>
これは、css/images の設定に関係なく機能すると宣伝されています。
CSS Tricks には、このテーマに関する最も詳細な投稿の 1 つがあります。
様々なテクニックを見せてくれます。CSSをオンにして画像をオフにするという問題を解決するものは次のとおりです。
HTML:
CSS Tricks には、このテーマに関する最も詳細なページの 1 つがあります。
様々なテクニックを見せてくれます。CSSをオンにして画像をオフにするという問題を解決するのは、テクニック＃8です。
HTML:
<div id="menu">
<ul>
<li><a href="#"><span></span>Test</a></li>
<li><a href="#"><span></span>Tester</a></li>
</ul>
</div>
CSS:
#menu a {
width: 350px; height: 75px; /*your values here*/
position: relative;
}
#menu a span {
background: url("images/li.jpg"); /*your image here*/
position: absolute;
width: 100%;
height: 100%;
}
編集: コードを提供されたサンプルに更新しました。
PS: 上記のコードはテストしていません。
#menu ul li a {
display: block;
background-image: url(images/someimage.png);
text-indent: -9000px;
width: 454px;
height: 64px;
}
display:block は重要です。そうしないと、幅と高さが正しく表示されない場合があります。
CSS :
#menu ul li a{
display: block;
background-image: url(http://example.com/sprite.png);
width: 100px;
height: 50px;
}
#a {
background-position: <offset for sprite>;
}
#b {
background-position: <offset for sprite>;
}
#c {
background-position: <offset for sprite>;
}
HTML :
<div id="menu">
<ul>
<li id="a"><a href="#" title="Test">Test</a></li>
<li id="b"><a href="#" title="Tester">Tester</a></li>
<li id="c"><a href="#" title="Testing Testing">Testing Testing</a></li>
</ul>
</div>
編集：リンクテキストを追加しました... 見逃されたからです。:-)