331592 ランダム
 HOME | DIARY | PROFILE 【フォローする】 【ログイン】

mamohoのＨＰ作成講座

mamohoのＨＰ作成講座

リンクの文字色を変えるには

●　リンクの文字色を変えよう！

リンクの文字の色を変えてみましょう

楽天広場を使ってる場合は　基本デザインのページで
リンク色の　クリック前　クリック後　と設定できるようになっていますね
これは　それ以外でのリンクの色を変える方法です
この方法は　そのページ全体のリンクの色を変えるものではなく
文字に対して　個別に変更する方法です
つまり　リンクの色を変えたいものが複数ある場合は
一つ一つ設定をしていく必要があります
この方法を使えば　リンクの色は変えられますが　クリック後のリンクの色が
無効になってしまいますので　ご注意ください

まず　普通に　font colorで設定する方法です
これが一番簡単で　なじみやすいかもしれませんね

　　<a href="ページのアドレス"><font color="色を指定">リンクの文字</font></a>

です

では　リンクのページは私のHPのトップページで　
リンク色を　緑色（006600）　で　設定してみます

<a href="http://plaza.rakuten.co.jp/mamoho/"><font color="#006600">HPは難しくない</font></a>

すると　このようになります

HPは難しくない

今度は　文字を　サイズ4で太字に　色は茶色（660000）で　リンクの下線を消してみましょう

<a href="http://plaza.rakuten.co.jp/mamoho/" style="text-decoration:none"><font size="4" color="#660000"><b>HPは難しくない</b></font></a>

すると　このようになります

HPは難しくない

ソースの表示だけ見ると　凄く面倒そうですが
ひとつひとつ分解すれば　簡単です　頑張りましょう！

他にも　スタイルシートでリンクの色を変える方法があります
こちらでもリンクの色を変えることは可能です

<a href="ページのアドレス" style="color:色の指定">リンクの文字</a>

文字色は　990099で　太字に指定してみるとこんな感じです

<a href="http://plaza.rakuten.co.jp/mamoho/" style="color:#990099"><b>HPは難しくない</b></a>

HPは難しくない

今度は　ページ全体でリンクの色を指定したい場合のお話です

HTMLの基本構造は覚えてらっしゃいますでしょうか

<html>
<head>
<title>ページのタイトル</title>
<head>
<body　この後に指定をします>


</body>
</html>

上の赤い部分に訪問前の色　訪問した後の色　マウスでクリックしたときの色
と指定するようになっています

たとえば

<body text="660000 link="006666" vlink="666600" alink="660066">

と　設定すると

文字色は　　文字色
リンクの色は　　リンク色
訪問済みのリンクは　　訪問済み
選択リンク色は　　選択リンク

と　なるわけです

スタイルシートで設定する場合は
<head>　　</head>の間に　こんな感じで記述します

<style type="text/css">
<!--
a:link { color: #006666; }
a:visited { color: #666600; }
a:active { color: #660066; } -->
</style>


© Rakuten Group, Inc.