- ベストアンサー
背景画像にリンクをつける方法とは？
- 背景画像にリンクをつける方法について、HTMLとCSSを使用した方法をご紹介します。HTMLでは<img>タグを使用して、指定した画像にリンクを設定することが可能です。また、CSSを使用して背景画像を指定する場合には、リンクを直接つけることはできません。
- HTMLでは、<img>タグを使用して背景画像を設定し、その上にリンク付きのテキストを配置することで、背景画像にリンクをつけることができます。一方、CSSを使用した場合は、背景画像に直接リンクを設定することはできません。
- 背景画像にリンクを付ける方法については、HTMLとCSSを組み合わせて使用することが一般的です。HTMLでは<img>タグを使用して画像を表示し、その上にリンク付きのテキストを配置します。CSSを使用して背景画像を指定する場合には、リンクを直接設定することはできません。
- tekkenman7
- お礼率70% (150/212)
- CSS
- 回答数3
- ありがとう数1
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
どこで聞きかじった情報か知りませんが、検索結果の順位に小細工は意味ありません。 ★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://www.google.com/support/webmasters/bin/answer.py?answer=35769&hl=jp ) 検索エンジン最適化(SEO)とは、検索エンジンがきちんと情報を得られるようにマークアップすることで、 ・<title></title>や<h1>見出し</h1>が内容に一致しているか? ・文書構造にしたがって正しくマークアップされているか。重要な語句は<strong>や<em>、段落は<br>じゃなく<p>で括られているか・・、レイアウトのためにtableを使わない・・文字を画像に置き換えていないか・・・などのことです。 [例 HTML4.01] <div class="header"> <h1></h1> <div class="abstract"> </div> <div class="nav"> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </div> </div> <div class="section"> ・・・・・ HTML5だと <header> <h1></h1> <div class="abstract"> </div> <nav> <ol> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ol> </nav> </header> <section> ・・・・・ というふうに、 もし見出しは文字で、見栄えは背景画像で表現するのはよいことですが、そこにリンクの有無は無関係です。 h1要素の画像にリンクを付けたかったら、上記の<nav>あるいは、<div class="nav">のリンクをボックスに変更して絶対配置で、その画像に重ねるのが良いですが、それでしたらナビゲーションブロック自体に背景を指定したほうが、SEO的には正しいです。 [例]上のHTML4.01の場合で、olの背景を画像にする場合 div.header div.nav{width:640px;height:480px;position:relative;background-image:url();} div.header div.nav ol,div.header div.nav ol li{display:block;list-style:none;} div.header div.nav ol li a{display:block;width:100%;height:100%;background-image:url();} div.header div.nav ol li{width:100px;height:60px;position:absolute;left:10px top:10px;} div.header div.nav ol li+li{left:110px top:10px;} div.header div.nav ol li+li+li{left:220px top:10px;} とか・・ ★むやみやたらと#(id)を使ったら、SEOになりません。idやclass名は 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より です。スタイルシートのためだけに、書くことはありません。上記のHTML,CSSのように、きちんと「文書に構造を付加するため」につかい、スタイルを適用するときは、カスケーディング機能(せっかくのカスケーディングスタイルシートですから)をつかいます。
その他の回答 (2)
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>cssで指定した画像に使う方法はないのでしょうか。 ありません。 考え方が逆です。 背景画像にリンクを付けるのではなく、<a>を使ってリンクを作成し、そこに背景画像をつけてください。
- ・真 綾・（@Ma-yan_bh1011）
- ベストアンサー率30% (79/257)
イメージマップとかまあありますが、そもそも画像にリンクを設定する必然性はどこにあるんですか？ あとついでに、HTMLソース内に<style>タグを書いている状況でSEOも何も無いと思います。
お礼
お返事ありがとうございます。 >イメージマップとかまあありますが、 >そもそも画像にリンクを設定する必然性はどこにあるんですか？ よく企業のサイトでロゴマークにトップページへのリンクがはられますが、 そのような感じです。 >あとついでに、HTMLソース内に<style>タグを書いている状況で >SEOも何も無いと思います。 何を言いたいのかわかりません。 html内に<style>タグを書く＝SEOの効果を潰す、という意味ですか？ それか、 メインの内容が<style>タグによって下へ移動しSEOの効果が弱まる ということでしょうか？