0

ヘッダーにh1要素を追加しようとしていますが、画面の解像度が変更されたときに互いに置き換わるタグ（背景画像ではない）をヘッダーで使用しています。

私はテクニックを見てきました

<h1 class="technique-four">
<a href="#">
    <img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>


h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
}

...しかし、私のレイアウトは流動的であるため、画像が変更されたときに背景が表示されます。

h1を画像に置き換える必要さえありますか？私は次のようなことをすることができませんでした：

<h1 class="headerhone">kb-k bwf-kb</h1> 

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/720.jpg" class="show-on-phones"/></a>

<a href="#"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/980_full.jpg" class="hide-on-phones"alt=""/></a>

（phpを無視してください）

次に、h1の高さをゼロにします。

h1.headerhone{
height:0px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;

} /*this was suggested to me as an alternative to the -9999px; thing.*/

これはうまくいくでしょうか？SEOにマイナスの影響や使いやすさの問題はありますか？

4

2 に答える 2

0

2 番目の解決策では、スクリーン リーダーで h1 コンテンツが「kb-k bwf-kb」になり、スクリーン リーダーはalt次の画像のプロパティが実際には h1 であることを認識しません。

Google の場合、この 2 番目の解決策は、コンテンツを h1 タグで非表示にしたいようです: 悪い。

視覚的な例は役に立ちますが、あなたが達成したいことをすべて理解していません.

于 2012-06-08T09:32:08.050 に答える
0

タグでテキストを非表示にしたり、画像を使用したりすることについて、Google から前向きなことは何も言われていない<h1>ので、解決策としてそれを勧めるのをためらっています。あなたの最後の手法は、検索エンジンにさまざまなコンテンツを提供することにほぼ確実に該当するため、これもお勧めしません。

ただし、2番目のアイデアは正しい軌道に乗っています。あなたがしたいことは、レスポンシブ デザインを使用してレイアウトの幅を決定し、それに応じて画像を調整することです。実際、Google は最近ブログで多くのことを書いています。その方法を学ぶことを強くお勧めします。

于 2012-06-08T11:47:51.447 に答える