画像にツールチップをつける

2011/06/09 1:23 に 田口相 が投稿   [ 2011/06/24 4:49 に更新しました ]

ホームページの画像にマウスポインタを乗せた際、その画像の説明が表示されるのを見たことがありますよね。

代替テキストの説明画像

画像のHTMLタグに、「alt属性値」や「title属性値」を設定することで、このようなツールチップを出すことができます。

・alt属性…画像が非表示となってしまった場合の代替テキスト。
・title属性…ポインタを画像に合わせたときに表示される画像の説明テキスト。


ところが、Googleサイトにはこのような属性値を入力するツールがありません。
(Googleが画像のalt属性テキストをインデックスしないせいか…?)
…ということは、あえて設定する必要はないのかもしれませんが、一応、HTMLから設定する方法を記載しておきます。





①「ページを編集」を開いて、編集したい部分にカーソルを置き、編集バーの「HTML」をクリック。

②「HTMLを編集」で、画像を表すタグ「<IMG~~~」を探す。

③IMGの後ろに、alt="画像の代替テキスト" と title="画像の説明"を入力。※それぞれ、前後に半角あけること!


④「更新」→「保存」を忘れずに!