2007年01月07日
リンク文字の色の設定（CSS編集）
ブログの壁紙やタイトルの画像などを変更したときに、それにあわせて、リンク文字の色を変更したいものです。そんなときには、次のようにリンク文字の色の設定を変更してみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。
基本（ページ全体のリンク文字の設定）
リンク部分のCSSを編集するときには、下の擬似クラスとよばれるものを変更します。CSS編集の画面で、検索して色のコードを変更するだけです。４つ全てが指定されていないこともあります。そのときは追加して、好みの色を設定しましょう。なお、この４つは必ずこの順番で指定されているはずです。この順番でないと正しく反映されないことがあるようですので、ご注意ください。
CSS編集で修正するコード
/*リンク文字の設定*/a:link/*まだ見ていない状態*/
{
color:#ff3300;
}
a:visited/*すでに見た状態*/
{
color:#cd5c5c;
}
a:hover/*カーソルが上にある状態*/
{
color:#ffa500;
}
a:active/*クリックをしている状態*/
{
color:#a2cf03;
}
クラスを指定したリンク文字だけ設定した色にする方法
特別にリンク文字の色を指定するクラスを自分で決めてください。ここでは、specialとしてみました。
CSS編集で追加するコード
/*リンク文字の設定*/a.special:link/*まだ見ていない状態*/
{
color:#339900;
}
a.special:visited/*すでに見た状態*/
{
color:#999999;
}
a.special:hover/*カーソルが上にある状態*/
{
color:#ff6600;
}
a.special:active/*クリックをしている状態*/
{
color:#660033;
}
ソースコードの例
(特別にリンク文字の色を指定する場合は下の例のように入力します。)
<a href="http://yozoblog2.blog63.fc2.com/" class="special">yozoの気が向いたと記2.0</a>
特定の範囲のリンク文字だけ設定した色にする方法
特別にリンク文字の色を指定する範囲のクラスを自分で決めてください。ここでは、samplelinkとしてみました。
CSS編集で追加するコード
/*リンク文字の設定*/.samplelink a:link/*まだ見ていない状態*/
{
color:#ff3300;
}
.samplelink a:visited/*すでに見た状態*/
{
color:#cd5c5c;
}
.samplelink a:hover/*カーソルが上にある状態*/
{
color:#ffa500;
}
.samplelink a:active/*クリックをしている状態*/
{
color:#a2cf03;
}
ソースコードの例
(特別にリンク文字の色を指定する範囲は下の例のように入力します。)
<div class="samplelink"> ここに書かれた文章中のリンク文字の色が特別に指定できます。<a href="http://yozoblog2.blog63.fc2.com/">yozoの気が向いたと記2.0</a>や<a href="http://usamo.seesaa.net/">うさもの気が向いたと記</a>、<a href="http://blog.livedoor.jp/yozoblog/">yozoのおすすめ本</a>、<a href="http://yozoblog.blog48.fc2.com/">yozoのシスアドへの道</a>などのリンク文字の色の設定に利用しました。</div>
ここに書かれた文章中のリンク文字の色が特別に指定できます。yozoの気が向いたと記2.0やうさもの気が向いたと記、yozoのおすすめ本、yozoのシスアドへの道などのリンク文字の色の設定に利用しました。
- yozoからのお願い
また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m
↓ ぽちっと応援お願いします♪ m(_ _)m
↓yozoの気が向いたと記2.0の関連記事紹介
↓ ぽちっと応援お願いします♪ m(_ _)m
スレッドテーマ:みんなに紹介したいこと:ブログ
≪New Firefoxのブックマークのバックアップ | Top | yozo家の土鈴コレクション Old≫
トラックバックURL
コメント
テンプレートを変更したときにはリンクの色も変更して
合わせたいですよね♪(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ
私は最近時間がなくてそこまで変更してないですが。(^^;;
私もカスタマイズをやり始めたときにこの部分で苦労しました。
どの部分がどこに対応しているか分からなかったんです。
とっても分かりやすい記事をありがとうございました。(o*。_。)oペコッ
Posted by まゆび at 2007.01.07 15:14 | edit
コメント
＞テンプレートを変更したときにはリンクの色も変更して合わせたいですよね♪
そうでしょ。結構面倒なんですよね。それでどこをどの色にすればいいかって
考えてから、設置するのもなかなか面倒になりがちですからね。クラスで定義して
切替をしやすくすればいいかなぁ~って考えているところでっす m(_ _)m
＞私は最近時間がなくてそこまで変更してないですが。(^^;;
yozoも気に入ったリンク文字の色は、そのまま継続して使用していますね。(^｡^;)
yozoは、色を考える方が大変なんですよ。ヾ(・o・*)ｼ ｵｨｰｰｰｰｰｯ!!
Posted by まゆびさんへ at 2007.01.07 17:40 | edit
コメント
これはまたマイブックマーク行きな記事を（*´ω｀*）ﾃﾚﾃﾚ
今必死来いてリニューアルの構成を考え中なのですが
リニューアルしたらyozoさんの色んな記事をまた全て参考にさせていただくつもりです♪
いつもためになる記事をありがとうございますー＾＾
あっ usamo skin お借りした旨、設置の記事にコメント入れさせていただきました♪
ありがとうございます(´･ω･)(´-ω-)(´_ _)ﾍﾟｺﾘ
Posted by モンビッケ at 2007.01.07 21:15 | edit
コメント
>>ブログの壁紙やタイトルの画像などを変更したときに、それにあわせて、リンク文字の色を変更したいものです。
ハイハイハーイ同感！！（笑）
リンク部分はカーソルあてたら色が変わるとか変化を施してないと
素通りされる危険性がありますので（笑）リンクの色はぱっと目立つようにしたいんですよね。
私は不親切ながら（汗）linkとvisitedを同じ色にすることが多く、
かつ本文とも同色になりがちなのでhoverとactive部分をいつも目立つ色にしてます。
とっても解かりやすい解説で、この記事は活用度大ですね☆
いつもいつもありがとうございます！
Posted by mixbabar at 2007.01.07 22:37 | edit
コメント
これはなんとタイムリーな記事でしょう！！
まるで、ビビのために書いてくださったといっても過言じゃないっっ！
今丁度、カレンダー部分のリンク表示を変更したくて、ここにある「特定の範囲のリンク・・・方法」を使用して思い通りに指定することができました！ヽ(ﾟ∀ﾟ)ﾉ
ありがとう！ありがとう！！
コードを丸々コピペしたので、色の指定がそのままですが、妙にマッチしています！ヽ(ﾟ∀ﾟ)ﾉヤッター！
(人ω-)謝謝(-ω人)謝謝
Posted by ビビ at 2007.01.08 05:55 | edit
コメント
＞これはまたマイブックマーク行きな記事を（*´ω｀*）ﾃﾚﾃﾚ
いつも♪いつも♪応援ありがとーございまっす♪m(_ _)m
＞リニューアルしたらyozoさんの色んな記事をまた全て参考にさせていただくつもりです♪
わぁ♪どんなリニューアルなのでしょう♪とっても楽しみでっす♪少しでも、何かのお役に立てれば、うれしいでっす。遠慮なく活用してくださいね。 (^○^)
＞あっ usamo skin お借りした旨、設置の記事にコメント入れさせていただきました♪
(*^▽^*)ﾉﾊｰｲ とってもうれしい使用報告でしたよ♪ありがとーございまっす♪m(_ _)m
遠慮なくカスタマイズして楽しんでくださいね。(*ﾟｰﾟ)(*｡_｡)ｳﾝｳﾝ♪(ﾟｰﾟ*)(｡_｡*)ｳﾝｳﾝ♪
Posted by モンビッケさんへ at 2007.01.09 18:42 | edit
コメント
＞ハイハイハーイ同感！！（笑）リンク部分はカーソルあてたら色が変わるとか
＞変化を施してないと素通りされる危険性がありますので（笑）
なぁ~るほど。確かにそうですよね。yozoんちでも、プニュプニュリンクにしてますよ。(^○^)
とりあえず、見本は色の違いがわかるように、ド派手にしときました。通常記事は今までどおりのリンク色のままですよ♪(*^-^)
＞linkとvisitedを同じ色にすることが多く、かつ本文とも同色になりがちなので
＞hoverとactive部分をいつも目立つ色にしてます。
ロールオーバーと同じ感覚ですね。クリックする前に、目立つようにしておくのは、いいことだと思いますよ。どこにリンクがあるのかわからなかったら、(¬o¬)----☆ 怪しいって思われるかもしれませんもんね。(^○^)
Posted by mixbabarさんへ at 2007.01.09 18:54 | edit
コメント
＞まるで、ビビのために書いてくださったといっても過言じゃないっっ！
o(*^▽^*)oｴﾍﾍ!お役に立ちそうですか♪以前から、色々な人に質問されていた記事ネタだったんですよ。実際のテンプレートのカスタマイズでは、特に、クラス指定したり、範囲指定したりできないと、不便ですからね。自分用にもなるし、まとめておきました。(^○^)
＞「特定の範囲のリンク・・・方法」を使用して思い通りに指定することができました！ヽ(ﾟ∀ﾟ)ﾉ
わぁ♪お役に立ててうれしいですよ。とても励みになりまっす m(_ _)m
＞コードを丸々コピペしたので、色の指定がそのままですが、妙にマッチしています！
えっ？そのままなんですか？もちろん、使っていただいてyozoには全然不平などはありませんが、あれは、説明用に色の違いをはっきりさせてます。実用には向かないかも・・・って思ってますが・・・(;＠Д＠ A ｱｾｱｾ･･･まぁ、とりあえず、お役に立ててよかったでっす。(*^-ﾟ)vｨｪｨ♪
Posted by ビビさんへ at 2007.01.09 19:12 | edit
コメント
リンクの色が変わることでテンプレートもさらに素敵になりますよね。
ここに飛んでくるときまず、背景だけが表示されるのですが、
とても素敵でうっとりです。
しかもyozoさんのブログは、文字色やリンクまでも
細やかに設定されてるので 楽しませてもらってます(^-^)
Posted by ゆうゆ at 2007.01.10 18:18 | edit
コメント
＞リンクの色が変わることでテンプレートもさらに素敵になりますよね。
そうでしょ。ちょっと色を変えてみたいなって思ったときに、どうだったっけ・・・って調べるのは面倒ですからね。それで、記事にしてみましたよ。(^○^)
＞ここに飛んでくるときまず、背景だけが表示されるのですが、
とても素敵でうっとりです。
(*^.^*)エヘッ先に、壁紙から読み込まれるようになっていますからね。
それで、JavaScriptの遅延をごまかしているという噂もあったりして・・・(^｡^;)
でも、楽しんでくださってうれしいでっす。(//∇//(//∇//(//∇//) ﾃﾚﾃﾚ
＞細やかに設定されてるので 楽しませてもらってます(^-^)
まだまだ未熟者ですが、いつも応援ありがとーございまっす♪m(_ _)m
Posted by ゆうゆさんへ at 2007.01.10 22:55 | edit