画像？テキスト？

質問

このサイトの
http://www.flying-h.co.jp/
「企業のためのトータルサービス」のような、
画像の用に表示されていても、テキスト検索で引っかかるようにする方法を教えて頂けますか？
ソースを見たのですが、全くわからなかったので質問させて頂きました。
よろしくお願いします。

回答No.1

DR_D · ベストアンサー

＜img src="画像ファイル" alt="文字列"＞
この文字列の部分にワードをいれておくと、検索に引っ掛かりますよ～

回答No.3

noname#100277

２の補足ですが、該当箇所の要素とCSSは以下の通り。

<div id="total">
.box2 #total {index.css (83 行目)
background:transparent url(../img/top/total.jpg) no-repeat scroll 0 0;
float:left;
}
.box2 div {index.css (78 行目)
height:144px;
margin-bottom:10px;
width:306px;
}
継承元body#root.index
body {style.css (19 行目)
color:#333333;
font-size:12px;
line-height:1.5;
}

<h3 class="mot">起業のためのトータルサービス</h3>
#mcR h3 {style.css (246 行目)
color:#3399CC;
font-size:12px;
margin:15px 0 0;
}
u, .mot {style.css (120 行目)
left:-2999px;
position:absolute;
text-indent:0;
width:990px;
}
u, .mot {style.css (117 行目)
text-indent:-9999px;
}
h1, h2, h3, h4, h5, p, ul, ol, li, dl, blockquote, form, label {style.css (33 行目)
margin:0;
padding:0;
}
継承元body#root.index
body {style.css (19 行目)
color:#333333;
font-size:12px;
line-height:1.5;
}

回答No.2

abril

他人様の、しかも商用のサイトをあまり詳細に解説するのは差し障りがあるので、基本的なところだけ。
上記のサイトに限っていえば、下記の様な手段で実現しています。

<div id="total">
<h3 class="mot">起業のためのトータルサービス</h3>
(省略）
</div>

motというclassセレクタで、text-indentプロパティに大きなマイナス値を与える事でh3の内包するテキストの描画領域を飛ばして見た目的には非表示の様な状態にしてあります。
その上で、親要素であるdivに対してidセレクタで個別の見出しの画像を背景画像として指定する事で、あたかもh3に挿入されている見出し自体が画像データである様に見せています。
しかし、マークアップ上はh3の中の要素は「テキスト」でしかない為、テキスト検索にひっかかる、というわけです。
近年、よく使われる手法の一つですね。

なお、上記それぞれのセレクタによるスタイルは別個のCSSファイル（上記ページ1ファイルから参照しているCSSファイルは複数あります）で記述されています。HTMLソース中のCSSを全部辿って見ていけばわかりますよ。