--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2007年01月07日

リンク文字の色の設定(CSS編集)

 ブログの壁紙やタイトルの画像などを変更したときに、それにあわせて、リンク文字の色を変更したいものです。そんなときには、次のようにリンク文字の色の設定を変更してみましょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。


基本(ページ全体のリンク文字の設定)

 リンク部分のCSSを編集するときには、下の擬似クラスとよばれるものを変更します。CSS編集の画面で、検索して色のコードを変更するだけです。4つ全てが指定されていないこともあります。そのときは追加して、好みの色を設定しましょう。なお、この4つは必ずこの順番で指定されているはずです。この順番でないと正しく反映されないことがあるようですので、ご注意ください。


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からのお願い
 この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
 また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取るようにしてくださいね♪
 この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは?」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。 m(_ _)m

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


yozoの気が向いたと記2.0の関連記事紹介

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

スレッドテーマ:みんなに紹介したいこと:ブログ

メイン

≪New Firefoxのブックマークのバックアップ | Top | yozo家の土鈴コレクション Old≫

トラックバックURL


コメント

yozoさん、こんにちは♪ヾ(=^▽^=)ノ
テンプレートを変更したときにはリンクの色も変更して
合わせたいですよね♪(゚-゚*)(。。*)ウンウン
私は最近時間がなくてそこまで変更してないですが。(^^;;
私もカスタマイズをやり始めたときにこの部分で苦労しました。
どの部分がどこに対応しているか分からなかったんです。
とっても分かりやすい記事をありがとうございました。(o*。_。)oペコッ

コメント

>まゆびさん、こんばんはー♪

>テンプレートを変更したときにはリンクの色も変更して合わせたいですよね♪
そうでしょ。結構面倒なんですよね。それでどこをどの色にすればいいかって
考えてから、設置するのもなかなか面倒になりがちですからね。クラスで定義して
切替をしやすくすればいいかなぁ~って考えているところでっす m(_ _)m

>私は最近時間がなくてそこまで変更してないですが。(^^;;
yozoも気に入ったリンク文字の色は、そのまま継続して使用していますね。(^。^;)
yozoは、色を考える方が大変なんですよ。ヾ(・o・*)シ オィーーーーーッ!!

コメント

yozoさん(*・ω・)ノ~☆コンバンワ♪
これはまたマイブックマーク行きな記事を(*´ω`*)テレテレ
今必死来いてリニューアルの構成を考え中なのですが
リニューアルしたらyozoさんの色んな記事をまた全て参考にさせていただくつもりです♪
いつもためになる記事をありがとうございますー^^

あっ usamo skin お借りした旨、設置の記事にコメント入れさせていただきました♪
ありがとうございます(´・ω・)(´-ω-)(´_ _)ペコリ

コメント

こんばんはー。
>>ブログの壁紙やタイトルの画像などを変更したときに、それにあわせて、リンク文字の色を変更したいものです。
ハイハイハーイ同感!!(笑)
リンク部分はカーソルあてたら色が変わるとか変化を施してないと
素通りされる危険性がありますので(笑)リンクの色はぱっと目立つようにしたいんですよね。
私は不親切ながら(汗)linkとvisitedを同じ色にすることが多く、
かつ本文とも同色になりがちなのでhoverとactive部分をいつも目立つ色にしてます。
とっても解かりやすい解説で、この記事は活用度大ですね☆
いつもいつもありがとうございます!

コメント

ヽ(゚∀゚)ノyozoさん、こんばんは~。(ん?おはよう??

これはなんとタイムリーな記事でしょう!!
まるで、ビビのために書いてくださったといっても過言じゃないっっ!

今丁度、カレンダー部分のリンク表示を変更したくて、ここにある「特定の範囲のリンク・・・方法」を使用して思い通りに指定することができました!ヽ(゚∀゚)ノ

ありがとう!ありがとう!!
コードを丸々コピペしたので、色の指定がそのままですが、妙にマッチしています!ヽ(゚∀゚)ノヤッター!

(人ω-)謝謝(-ω人)謝謝

コメント

>モンビッケさん、こんばんはー♪

>これはまたマイブックマーク行きな記事を(*´ω`*)テレテレ
いつも♪いつも♪応援ありがとーございまっす♪m(_ _)m

>リニューアルしたらyozoさんの色んな記事をまた全て参考にさせていただくつもりです♪
わぁ♪どんなリニューアルなのでしょう♪とっても楽しみでっす♪少しでも、何かのお役に立てれば、うれしいでっす。遠慮なく活用してくださいね。 (^○^)

>あっ usamo skin お借りした旨、設置の記事にコメント入れさせていただきました♪
(*^▽^*)ノハーイ とってもうれしい使用報告でしたよ♪ありがとーございまっす♪m(_ _)m
遠慮なくカスタマイズして楽しんでくださいね。(*゚ー゚)(*。_。)ウンウン♪(゚ー゚*)(。_。*)ウンウン♪

コメント

>ばばるさん、こんばんはー♪

>ハイハイハーイ同感!!(笑)リンク部分はカーソルあてたら色が変わるとか
>変化を施してないと素通りされる危険性がありますので(笑)
なぁ~るほど。確かにそうですよね。yozoんちでも、プニュプニュリンクにしてますよ。(^○^)
とりあえず、見本は色の違いがわかるように、ド派手にしときました。通常記事は今までどおりのリンク色のままですよ♪(*^-^)

>linkとvisitedを同じ色にすることが多く、かつ本文とも同色になりがちなので
>hoverとactive部分をいつも目立つ色にしてます。
ロールオーバーと同じ感覚ですね。クリックする前に、目立つようにしておくのは、いいことだと思いますよ。どこにリンクがあるのかわからなかったら、(¬o¬)----☆ 怪しいって思われるかもしれませんもんね。(^○^)

コメント

>ビビさん、こんばんはー♪

>まるで、ビビのために書いてくださったといっても過言じゃないっっ!
o(*^▽^*)oエヘヘ!お役に立ちそうですか♪以前から、色々な人に質問されていた記事ネタだったんですよ。実際のテンプレートのカスタマイズでは、特に、クラス指定したり、範囲指定したりできないと、不便ですからね。自分用にもなるし、まとめておきました。(^○^)

>「特定の範囲のリンク・・・方法」を使用して思い通りに指定することができました!ヽ(゚∀゚)ノ
わぁ♪お役に立ててうれしいですよ。とても励みになりまっす m(_ _)m

>コードを丸々コピペしたので、色の指定がそのままですが、妙にマッチしています!
えっ?そのままなんですか?もちろん、使っていただいてyozoには全然不平などはありませんが、あれは、説明用に色の違いをはっきりさせてます。実用には向かないかも・・・って思ってますが・・・(;@Д@ A アセアセ・・・まぁ、とりあえず、お役に立ててよかったでっす。(*^-゚)vィェィ♪

コメント

yozoさん、こんばんは^^
リンクの色が変わることでテンプレートもさらに素敵になりますよね。

ここに飛んでくるときまず、背景だけが表示されるのですが、
とても素敵でうっとりです。
しかもyozoさんのブログは、文字色やリンクまでも
細やかに設定されてるので 楽しませてもらってます(^-^)

コメント

>ゆうゆさん、こんばんはー♪

>リンクの色が変わることでテンプレートもさらに素敵になりますよね。
そうでしょ。ちょっと色を変えてみたいなって思ったときに、どうだったっけ・・・って調べるのは面倒ですからね。それで、記事にしてみましたよ。(^○^)

>ここに飛んでくるときまず、背景だけが表示されるのですが、
とても素敵でうっとりです。
(*^.^*)エヘッ先に、壁紙から読み込まれるようになっていますからね。
それで、JavaScriptの遅延をごまかしているという噂もあったりして・・・(^。^;)
でも、楽しんでくださってうれしいでっす。(//∇//(//∇//(//∇//) テレテレ

>細やかに設定されてるので 楽しませてもらってます(^-^)
まだまだ未熟者ですが、いつも応援ありがとーございまっす♪m(_ _)m

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。