|
画像に関する小技です。
画像はうまく使えばホームページに彩りやアクセントを与えてくれます。
alt属性とは簡単に言うと、画像に文字の属性を付け加えるものです。
上の画像にマウスのポインタを持っていくと、「クロです、こんにちは！」と表示されます。
また、画像が重かったりといった、何らかの理由で画像が表示されない場合や、目の悪い方の為の音声ブラウザで画像の情報を表示できます。
これはソースで変更しなくても、作成ソフトで画像を張る時に出来るようになっています。
alphaEDITとホームページ・ビルダーでは、「代替テキスト」
ホームページマネージャーは、「代わりの文字列」で設定できます。
フロントページエクスプレスは、画像を左クリックして画像のプロパティを表示させ、全般タブの代替表示部の「テキスト」です。
Dreamweaverの場合は画像を選択した状態の際に下のプロパティにある代替で変更できます。
ソースで変更する場合は、画像のタグである <img
src="画像"> を探し、これを
<img src="画像" alt="テキスト">
と変更すれば完了です。
■注意点
あんまり意味無いんでは？と思われるかもしれませんが、これはかなり重要なものです。
SEO対策に重要なもので、長くなってしまうので理由は後述しますが、特に外部リンクでバナー画像を使う場合にはalt属性を付随させておく事をおすすめします。
無いと嫌う人は意外と多いです。
背景の壁紙を固定する小技です。
まずホームページ作成ソフトで背景を設定します。
例は背景を上一列に固定するスタイルシートです。
| <head>から |
|
<STYLE TYPE="text/css">
body {
background-attachment:fixed;
background-repeat:repeat-x ;}
</STYLE> |
| </head>の間に表記 |
青の background-attachment:fixed; が背景を固定させる命令で、これを消すとスクロールしたら一緒に画像も動きます。
赤文字の x を y にすると左一列になります。
背景画像を繰り返さず、１つのみ表示したい場合は、同じ様に背景をまず設定し、
| <head>から |
|
<STYLE TYPE="text/css">
body {
background-attachment:fixed;
background-repeat :
no-repeat;
background-position : 0%
0%;}
</STYLE> |
| </head>の間に表記 |
0% 0% が固定する位置で、画面左上からみた位置となっています。
100% 0% が右上に固定、0%
100% が左下、100%
100% が右下です。
数値はお好きな様に設定できるので、好きなところに固定できます。
ロールオーバーとは、画像の上にマウスのポインタを持っていくと画像が変わる小技です。
↑コレですね。
画像を２つ用意して、元の画像を作成ソフトで設置します。
画像のhtmlタグ <img src="元の画像"> を探し、
<img src="元の画像"
onMouseOver="this .src='ポイント時の画像'"
onMouseOut="this
.src='元の画像'"> |
と変更すれば完了です。 | 
