プロが教える店舗＆オフィスのセキュリティ対策術

背景画像に全体または部分的にリンクをつけたいです

解決済

  • 質問者：tekkenman7
  • 質問日時：
  • 回答数：3件

ヤフーなどで検索が少しでも上位にくるように
<h1>タグにはテキストを使用し、その背景に画像を入れます。
そして、その画像にリンクをつけたいです。
htmlで<img>にエリアを指定してリンクを任意の場所に設置する方法はありますが、
http://www.tagindex.com/html_tag/img/img_map.html
cssで指定した画像に使う方法はないのでしょうか。
<h1>内のテキストには特にリンクがあってもなくても構いません。

<html lang="ja">
<head>
<title></title>
<style>
#aaa{
height: 100px;
background-image: url(sample.png);
background-repeat: no-repeat;
}
#aaa h1{
font-size: 10px;
margin-left: 200px;
padding-top: 10px;
font-weight: 400;
line-height: 135%;
}
#aaa h1 span{
font-size: 17px;
font-weight: 900;
line-height: 225%;
}
</style>
</head>
<body>
<div id="aaa">
<h1><span>コメント</span><br />コメントコメントコメント</h1>
</div>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

どこで聞きかじった情報か知りませんが、検索結果の順位に小細工は意味ありません。


★ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ ( http://www.google.com/support/webmasters/bin/ans … )

検索エンジン最適化(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-html4 … )］より
です。スタイルシートのためだけに、書くことはありません。上記のHTML,CSSのように、きちんと「文書に構造を付加するため」につかい、スタイルを適用するときは、カスケーディング機能(せっかくのカスケーディングスタイルシートですから)をつかいます。
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： taloo
  • 回答日時：

>cssで指定した画像に使う方法はないのでしょうか。


ありません。

考え方が逆です。
背景画像にリンクを付けるのではなく、<a>を使ってリンクを作成し、そこに背景画像をつけてください。
    • good
    • 0
    • 件
通報する

No.1

イメージマップとかまあありますが、そもそも画像にリンクを設定する必然性はどこにあるんですか？


あとついでに、HTMLソース内に<style>タグを書いている状況でSEOも何も無いと思います。
    • good
    • 0
    • 件
通報する
この回答へのお礼

お返事ありがとうございます。

>イメージマップとかまあありますが、
>そもそも画像にリンクを設定する必然性はどこにあるんですか？

よく企業のサイトでロゴマークにトップページへのリンクがはられますが、
そのような感じです。


>あとついでに、HTMLソース内に<style>タグを書いている状況で
>SEOも何も無いと思います。

何を言いたいのかわかりません。
html内に<style>タグを書く＝SEOの効果を潰す、という意味ですか？
それか、
メインの内容が<style>タグによって下へ移動しSEOの効果が弱まる
ということでしょうか？

通報する
お礼日時：2011/10/11 13:57

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報