2006年02月05日

ページ内で、特定のリンク文字だけ違う色で表示させる。4

本日の更新情報。

新着サイト(7件)




せっかくなので、今日もスタイルシートのお話を(笑)

ページ内で、特定のリンク文字だけ違う色で表示させる方法を...
(またまた超初心者向けですが...)



外部スタイルシートの作成方法、
スタイルシートの呼び出し方法が分からない方は

「font color」をスタイルシートで表示

を参考にしてみて下さい。

「ページ内で、特定のリンク文字だけ違う色で表示させる方法」ですが、
これは、

・背景色が黒のテーブルがあって、
 そのテーブル内ではリンク文字を「白」で表示したい

というような場合に使います。

手っ取り早く結論から書くと、スタイルシートに

a.white:link {
text-decoration : underline;
color : #ffffff;
}


というように記述→「上書き保存」→サーバーにアップロードします。

そして、リンク文字を「白」に指定したい場所に、

<a class="white" href="リンク先URL">白く表示</a>

と書きます。

ポイントは「class="white"」ですね。
これでリンク文字は白く表示されます。




しかし、これだけでは「訪問済み」や「クリック時」のリンク色まで
「白」に指定できていません。

・背景色が黒のテーブルがあって、そのテーブル内では
 「訪問済み」や「クリック時」のリンク色も「白」で表示したい

場合は、以下のように記述する必要があるのです。


a.white:link {
text-decoration : underline;
color : #ffffff;
}
a.white:visited {
text-decoration : underline;
color : #ffffff;
}
a.white:active {
text-decoration : underline;
color : #ffffff;
}
a.white:hover {
text-decoration : underline;
color : #ffffff;
}

このように記述→「上書き保存」→「サーバーにアップロード」でOKです。

これで、

<a class="white" href="リンク先URL">白く表示</a>

と書かれた「白く表示」というリンク文字は、常に白く表示されます。

ちなみに、上記スタイルシートの

link は「通常時」のリンクを、
visited は「訪問済み」のリンクを
active は「クリックした時」リンクを
hover「マウスポインタが触れた時」のリンクを意味しています。

という訳で、

「基本的にリンク文字は白で表示したいけど、
 クリックした瞬間だけは赤で表示したい」

という場合には、

a.white:active {
text-decoration : underline;
color : #ff0000;
}

と書きます。
(他も同様)




今回は「ページ内で、特定のリンク文字だけ」の色指定をしましたが、
ページ全体のリンク文字の色を指定したい場合は、
以下のように記述すれば、好きなように設定できます。


a:link {
text-decoration : underline;
color : #色番号;
}
a:visited {
text-decoration : underline;
color : #色番号;
}
a:active {
text-decoration : underline;
color : #色番号;
}
a:hover {
text-decoration : underline;
color : #色番号;
}


ちなみに、「text-decoration : underline; 」というのは、
『テキストに、アンダーラインを付けますよ』という意味です。

アンダーラインを付けたくない場合は、
「text-decoration : underline; 」の箇所を
「text-decoration : none; 」にします。

アンダーラインではなく、テキスト上部にラインを付けたい場合は、
「text-decoration : underline; 」の箇所を
「text-decoration : overline;」にします。

アンダーラインも上部の線も付けたい場合は、
「text-decoration : underline; 」の箇所を
「text-decoration : underline overline;」にします。

さらに、
「text-decoration : underline; 」の箇所を
「text-decoration : line-through;」とすれば、
打ち消し線を付けることもできます。


)サンプル


マウスを乗せると、打消し線が表示されます


マウスを乗せると、上部にラインが表示されます

マウスを乗せると、アンダーラインと上部のラインが表示されます



SEO対策ディレクトリ型検索エンジン マーキュリー


スポンサード リンク
seo666 at 00:25│Comments(1)TrackBack(0)
│更新情報 | html、CSS

トラックバックURL

この記事へのコメント

1. Posted by 天皇賞 春 2011   2011年04月20日 17:38
第142回 天皇賞 春 2011の大穴馬、勝ち馬全て予想!オッズ・枠順に惑わされない必勝データ競馬予想術を結果で証明!弊社が収集した極上データを惜しみなく公開中!過去のレース展開から見える穴場とは!?

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 


スポンサード リンク