ハイパーリンクの外観の変更
カスケード スタイル シート (CSS) でスタイルを定義すると、色、フォント サイズ、フォント ファミリなど、ハイパーリンクの外観に関するさまざまなプロパティを指定できます。さらに、表示済みのハイパーリンクや、ポインタがホバー時のハイパーリンクなど、ハイパーリンクのさまざまな状態にプロパティを割り当てることもできます。
ハイパーリンクの状態
ハイパーリンク (a:link) |
まだ選択されていないハイパーリンク |
アクティブ ハイパーリンク (a:active) |
現在選択されているハイパーリンク |
表示済みのハイパーリンク (a:visited) |
リンク先を表示したことがあるハイパーリンク |
ホバー時のハイパーリンク (a:hover) |
ポインタが上に置かれているハイパーリンク |
1 つまたは複数の Web ページでハイパーリンクの外観を変更するには、ハイパーリンク スタイルを Web ページごとに内部 CSS で定義するか、外部 CSS で定義して各 Web ページに適用します。複数の Web ページで同じハイパーリンク スタイルを使用する場合は、Web ページごとに内部 CSS でスタイルを定義するよりも、外部 CSS でスタイルを定義して、対象の Web ページに適用する方が効率的です。
単一の Web ページでハイパーリンクの色のみを定義する場合は、[新しいスタイル] ダイアログ ボックスまたは [ページのプロパティ] ダイアログ ボックスを使用します。どちらの方法でも CSS を使用しますが、[新しいスタイル] ダイアログ ボックスでは、複数の Web ページに適用できる外部 CSS でスタイルを定義できます。[ページのプロパティ] ダイアログ ボックスでは、内部 CSS でのみスタイルを定義できます。[新しいスタイル] ダイアログ ボックスを使用するには、「ハイパーリンクの外観を変更するには」の手順を参照してください。また、[ページのプロパティ] ダイアログ ボックスを使用するには、「単一ページでハイパーリンクの色のみを変更するには」の手順を参照してください。
.gif "ヒント") ヒント : |
|---|
単一の Web ページで 1 つのハイパーリンクの外観を変更するには、ハイパーリンクを選択して、目的のプロパティを定義するインライン スタイルを作成します。「スタイルの作成」を参照してください。 |
ハイパーリンクの外観を変更するには
ハイパーリンク スタイルの場所を選択するには、次のいずれかの操作を行います。
ハイパーリンク スタイルを Web ページの内部 CSS に追加するには、[デザイン] ビューまたは [コード] ビューで Web ページを開きます。内部 CSS はそのページのハイパーリンクのみに適用されます。
スタイルを外部 CSS に追加するには、既存の .css ファイルを開くか、新しい .css ファイルを作成します。外部 CSS は 1 つまたは複数の Web ページに適用できます。詳細については、「カスケード スタイル シートの作成」を参照してください。
[スタイルの適用] 作業ウィンドウで [新しいスタイル] をクリックします。
[新しいスタイル] ダイアログ ボックスの [セレクタ] ボックスで、次のいずれかの操作を行います。
項目
目的
a
ハイパーリンクの既定の外観を設定します。
a: active
クリックされたときのハイパーリンクの外観を設定します。
a :hover
ポインタがハイパーリンク上にあるときの、ハイパーリンクの外観を設定します。
a: link
まだクリックされていないハイパーリンクの外観を設定します。
a: visited
既にクリックされたハイパーリンクの外観を設定します。
[カテゴリ] ボックスで、次のプロパティのうち必要なものを設定します。
項目
目的
フォント
サイズ、太さ、装飾、色などのフォントのプロパティを設定します。
ブロック
行の高さ、テキストの配置、テキストのインデント、およびテキストの間隔を設定します。
背景
背景の色および背景の画像のプロパティを設定します。
枠線
枠線および枠線のプロパティを設定します。
ボックス
ボックスおよびブロック レベル要素の、間隔および余白のプロパティを設定します。
配置
ボックスおよびブロック レベル要素の、大きさおよび配置を設定します。
レイアウト
ボックスおよびブロック レベル要素の、表示または非表示、表示位置や周囲の要素の折り返し、切り抜きなど、レイアウトのプロパティを設定します。
[OK] をクリックします。
.gif "メモ")
メモ :ハイパーリンク スタイルが外部 CSS にある場合は、そのスタイルを使用する Web ページに .css ファイルを適用する必要があります。「外部カスケード スタイル シートの適用または適用解除」を参照してください。
単一ページでハイパーリンクの色のみを変更するには
[デザイン] ビューまたは [コード] ビューで、Web ページを開きます。
[ファイル] メニューの [プロパティ] をクリックします。
[ページのプロパティ] ダイアログ ボックスの [書式設定] タブをクリックします。
[色] の [ハイパーリンク]、[表示済みのハイパーリンク]、[アクティブ ハイパーリンク]、および [ホバー時のハイパーリンク] ボックスで、使用する色を選択します。
[OK] をクリックします。
特定文字のハイパーリンク色を変更するには
[デザイン] ビューまたは [コード] ビューで、Web ページを開きます。
変更する対象のハイパーリンクが設定された文字を選択します。
[標準] ツール バーの [フォントの色] ボタン
.gif "Cc294936.7d82a39a-24b2-44b2-9c48-b4b40a414535(ja-jp,Expression.10).gif")
上の矢印をクリックし、色を選択します。