ブログ隆盛の現在、正直言えばあまり乗り気にはなれないのですが、請われればホームページビルダーのインストラクションもしています。
そのホームページビルダーで画像のロールオーバー効果についてインストラクションすると、必ずと言っていいほどいただく質問があります。
文字にロールオーバーを設定するにはどうすればいいのでしょうか?
ロールオーバーとは、マウスポインタが文字や画像の上に来たときに、文字や画像の表示が変化する効果のことです。例えばこのサイトなら、本文中のリンク文字の上にマウスポインタが来ると、色が変化したりしますが、これがロールオーバー効果です。
ホームページビルダーで画像にロールオーバー効果を設定するには、メニュー[挿入]−[画像の効果]−[ロールオーバー効果]をクリックして表示される[画像のロールオーバーウィザード]に従えば簡単にできてしまいますが、この方法で設定できるのはあくまでも画像だけです。
そのため、文字にロールオーバーを設定するにはどうすればいいのか、というご質問をいただくわけです。
(リンク文字上にマウスポインタがあるときに文字を赤色にする例)
メニュー[表示]−[スタイルシートマネージャー]をクリック
↓
[スタイルシートマネージャー]−[追加]ボタンをクリック
↓
[スタイルの設定]ダイアログ−[HTMLタブの候補]コンボボックスから、
「マウスが上にあるリンク A:HOVER」を選択
↓
[スタイルの設定]ダイアログ−[カラーと背景]タブをクリック
↓
[前景色]コンボボックスから「赤」を選択
↓
[スタイルの設定]ダイアログ−[OK]ボタンをクリック
上記の操作をすればHTMLソースに
<STYLE type="text/css">
<!--
A:HOVER{
color : red;
}
-->
</STYLE>
といったソースが自動的に追加され、リンク文字をポイントすると文字が赤色に変化するロールオーバー効果が得られます。
[スタイルの設定]ダイアログ−[カラーと背景]タブで設定できる色は限りがありますから、他の色を設定する場合は、ソースを修正してください。
CSSを利用したロールオーバー効果ですから、CSSが解釈できないブラウザではロールオーバー効果は得られませんが、2005年現在そういうブラウザを使っている方はごく少数でしょうから、いいんじゃないかと思っています。
- Newer:セル範囲を指定して文字列を結合・連結するユーザー定義関数
- Older:存在しないはずの1900年2月29日が存在する