ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > カスタマイズをしよう! > title - リンクの色を変えたい!

リンクの色を変えたい!

リンクの色の基本

リンクの色は文字の色よりも簡単に色を変える事ができると思います
それは何故かというと、4つ並んで指定してあるから見つけやすいのです。

4つは何かというと・・・

link { color: 色の値 }
通常のリンクの色を指定します。

visited { color: 色の値 }
クリックした後のリンクの色を指定します。

hover { color: 色の値 }
マウスのカーソルを乗せた時のリンクの色を指定します。

active { color: 色の値 }
マウスでクリックした瞬間のリンクの色を指定します。
この4つです。スタイルシートを見てみてlinkで検索すると、この4つが並んでいるのでわかりやすいです。そしてここの色の値をカラーコードから好きな色を自分で選んで変えればいいだけなんです。

リンクの色の指定の具体例

リンクの色は記事の部分・プラグインの部分・タイトル部分・コメント部分とテンプレートによっては細かく分けられているものもあります。
なので上の基本だけでは上手くリンクの色を変えられない場合もあるのでどの様にリンクの色を指定しているのかを紹介します。

全体のリンクの色の指定は「a:」で決められています。
a:link { color: #3FBFAF; }
a:visited { color: #979F5F; }
a:hover { color: #FF0020; }
a:active { color: #0020FF; }
この様な感じになっています。

名前をつけて指定してある場合は、「.名前 a:」などとなっています。
.entrymain a:link { color: #3FBFAF; }
.entrymain a:visited { color: #979F5F; }
.entrymain a:hover { color: #FF0020; }
.entrymain a:active { color: #0020FF; }
この様な感じになっています。

他にも数個の名前を一括で指定してある場合もあるので少しだけ注意です。
.entrymain h2 a:visited,
.menuBlock a:visited,
#header a:visited,
#footer a:visited { color: #3FBFAF; }
この様にvisitedに対してたくさんの名前で指定してある場合があります。

それぞれ自分が変えたい部分が何の名前で指定してあるのかを探して、その名前でスタイルシートを検索して、linkの4つの部分を好きな色に変えて下さい。
linkの指定はそんなにたくさんないと思うので、比較的わかりやすいのではないでしょうか?


標準のリンクは文字の下に線がついているリンクなのですが、それを下線をつけなかったり、上線をつけたり、このブログの様にマウスのカーソルが乗った時に、背景色をつけたり、文字を大きくしたりなどと色々な事ができます。
そのやり方を次回から紹介していきます。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
単独の言葉のリンクの色を変えたい。
いつもお世話になっています。
記事中の単独の文字(言葉)のリンク色を変える為に、スタイルシートの編集で変更しようとしているのですが、全体のリンク色の指定しかなく entrymain a:linkとしたのですが変更できませんでした。なにか良い方法はないでしょうか?
以下はスタイルシートの一部分です。
/* リンクの色 */
a{ color: #656565;
}
a:link{ color: #FF80FF; text-decoration: underline;
}
a:visited{ color: #337777;
}
a:hover{ color: #ff2200; text-decoration:none;
}
また、スタイルシートでの変更は全ての記事に及ぶのでしょうか?
色々とすみません教えてください。
misatoさんへ
記事中の全てのリンクの色を変えたいとお考えでしょうか?
entrymain a:linkと新しく自分で名前をつけて指定するなら、一番頭に「.」をつけてください。 .entrymain a:link ←こんな感じです。
あとはHTMLの編集の方も記事の部分のHTMLを
<div class="entrymain">~~~</div>などの様にする必要があります。
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/137-a27acee3   

Template Designed by DW99