mamohoのHP作成講座

mamohoのHP作成講座

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

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

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

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

まず 普通に 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.
X
Design a Mobile Site
スマートフォン版を閲覧 | PC版を閲覧
Share by: