私はウェブサイトに4つのリンクを持っています。各リンクは別のページに移動します (窓、羽目板、屋根、サンルーム)。ただし、通常のリンクとは異なる方法でリンクを設定しました。スニペットを次に示します。
<a href="windows.html">
<div id="img-block">
<div id="img-link">
<h1>Windows</h1>
</div>
</div>
</a>
CSS:
#img-block {
width:275px;
height:175px;
margin:25px 0;
background-image:url(images/windows.jpg);
}
#img-link {
height:40px;
width:275px;
margin:135px 0 0 0;
background-image:url(images/img-link-bg.png);
}
私がこれを行った理由のいくつかの理由。
A) 画像とテキストをクリックできるようにしたかった
B) H1 は、Google が見出しをより高いランクに設定していると読んだから
C) また、誰かがリンクをクリックすると、文言が関連性があることを Google に知らせることも読んだ (クリック「Windows」は、Windows に関するページに移動し、「Windows」のページ ランクが上がります)。
今私が持っている質問は、私はこれらすべてのことを達成していますか? 明らかに目標Aを達成しましたが、画像の上にあるテキスト(「windows」)を選択できなくなりました(カーソルが手のアイコンに変わり、リンクを通知するため)...また、画像をドラッグすると、画像、img-link 画像、テキストをすべて 1 つの画像のようにドラッグしていることがわかります。
これが十分に明確であることを願っています、事前に感謝します!