テキストリンクをロールオーバーさせる方法 / ホームページビルダー

3月 12, 2010
BESTグループ

テキストリンクをロールオーバーさせる方法を教えてください。/ホームページビルダー


ご質問にお答えします。

画像のロールオーバー(マウスを画像の上に乗せると画像が変化する)のように、文字でもマウスを乗せると色が変化するように動きを付ける表現ができます。

まず、ページをホームページビルダーで開いてスタイルシートマネージャを起動します。

ルール情報の下部の「追加」をクリックします。

左上の箇所が「HTMLタグのスタイルを設定」となっていることを確認し、「HTMLタグの候補」から「リンク」の項目を探します。

リンクの中に5つのリストがありますね。

この5つに対して、文字色を設定します。

まず、「リンク A」を選んで、「色と背景」タブの「前景色」の色を選びます。

※前景色が文字の色になります。

カラーを選んでいただくときに、「ユーザー定義」を選択するとさまざまな色が選べます。

そして、OKをクリック。

そうすると、ルール情報に「A」というルールが追加されます。

残りの4つに関しても同様に設定していきます。

それぞれのスタイルの意味に関しては下記のとおりです。

a:link ・・・リンクが設定されている文字(未表示のリンク)
a:visited ・・・表示済みのリンク
a:hover ・・・マウスが上にあるリンク
a:active ・・・選択されてアクティブなリンク

ロールオーバーに重要なのは、「a:hover」です。

ここを他とは違う色に設定するようにすると、マウスが乗った時に色が変わるようになります。

ロールオーバーと同じで、あまりにも極端な色への変化はお勧めしません。

さりげなく、明るさを調節したりすると少し光ったような感じが出たりしていいですね。

No comments

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>