きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(フォント編)リンク文字の色を変えるテクニックいろいろ

<<   作成日時 : 2010/05/11 00:49   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 8 / トラックバック 0 / コメント 18

リンクの文字色を変えるためのCSS編集についていくつか書いておきます(ん)



はじめに

文字を<a>〜</a>タグで括ることで他ページへのリンクを作ることが出来ます。
このリンクを貼った文字をクリックをすると他サイトや画像などにジャンプする仕組みになってますね。

リンクがついた文字が他文字と同じデザインだと、どこにあるかわかりません。
なので、区別するために、文字色を変えたり下線を引いたりして差別化するのが一般的です。

こちらはブラウザの仕様で表示されるものですが、スタイルシートでデザインの指定が可能です。
ウェブリブログでも各テンプレートにそれぞれ違和感のないようにデザイン指定がされています。


アクションによるリンク文字の変化

リンクのついた文字列にはアクションによって色を変えたりすることも出来ます。
未訪問サイトと訪問済みサイトの区別やポインターを置いた時・離した時の区別などですね。

CSS編集では、それぞれのアクションに対して個別のデザイン指定を行います。

各アクションのデザイン指定のための文字列は以下の通り。

■ 未訪問のリンク
      a,a:link{}
■ 訪問済みのリンク
      a:visited{}
■ マウスオーバー(ポインターをリンク文字の上に置いた時)
      a:hover{}
■ リンク文字をクリックしている間
      a:active{}




ブログ全体のリンク文字色を変える

では、実際にリンク文字にスタイル指定をしてみます。
デザイン指定はデフォルトのスタイルシートの文字列群を置き換える形で行うのが好ましく思います。

デフォルトのスタイルシートはこんな風になっています。
  ■ デフォルトスタイルシート 16行目付近 ※行番号は目安程度
/* アンカー */
a,
a:link,
a:active,
a:visited,
a:hover{
}



こちらを以下の順になるように置き換えて、それぞれデザイン指定をしてみます。

  【CSS編集】
/* アンカー */
a,a:link{color:#33CC00;} /* 未訪問 緑 */
a:visited{color:#0000FF;} /* 訪問済 青 */
a:hover{color:#FF0000;} /* マウスオーバー 赤 */
a:active{color:#800080;} /* クリック 紫 */



  【サンプル】
ブログトップへのリンク
この記事へのリンク
    ※ 上記サンプルは外部スタイルシートにてデザインの指定をしています。
    ※ デザイン指定が反映されていない場合は時間を置いてからお試しください。
    ※ 色指定はお好みでへんこうしてください。
    ※ カラーコードはこちらを参考に → Webセーフカラーチャート



【ヒトリゴト】 個人的には「a:active{}」の必要性がイマイチよくわかりませんw




記事本文のリンク文字色を変える

要素に割り当てられているクラス属性やID属性に対してスタイル指定をすることで、
特定のエリアのリンク文字色のみの変更をするといったこともできます。

例として記事ページのブログ本文に書き込んだリンクにスタイルの指定をしてみます。
ブログ本文は<td>タグに『blog-body』というID名が割り当てられています。
上述したリンク指定の文字列にそれぞれ『#blog-body』という文字列を加えればOKです。
書き込み位置はスタイルシートの200行目辺りの『記事本体』付近が整理しやすいかと思います。
書き込む文字列は以下の通り、サンプルは上記のものと同じです(笑)


  【CSS編集】
/* 記事本体リンク */
#blog-body a,
#blog-body a:link{color:#33CC00;} /* 未訪問 緑 */
#blog-body a:visited{color:#0000FF;} /* 訪問済 青 */
#blog-body a:hover{color:#FF0000;} /* マウスオーバー 赤 */
#blog-body a:active{color:#800080;} /* クリック 紫 */





特定エリアのリンク文字色を変える

上では記事本文のリンク文字色の変更のためのスタイル指定の方法をかきました。
これと同じように他エリアのリンク文字に対するスタイル指定が可能です。
ここで全て書き上げるといいのですが、それだけでひとつ記事が書けちゃうんじゃ?って量なので(気まずい)
またいつか書き上げてみたいと思います(爆

「ここのリンク文字はどうしたらいいの?」と疑問な方はコメントくださいませ(*_ _)人ゴメンナサイ






ブログにあるリンクについては他にもテクニックがちょこちょこあったりします。
今回は文字についてだけでしたが、画像を使ったリンクの場合とかもありますね。
これらについては、また別の記事で紹介していきたいと思います(ん)


それでは、今回はこのくらいで(わら)

|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■


テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 8
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(18件)

内 容 ニックネーム/日時
やりやいやりたい(わら)(@わら)
本文にリンクを張ることはあまりないけど、サイドバーのリンクを訪問前、訪問後でい色変えたいですぅ(ひょえ)

アンカーでいいのかなぁ(ぶーん)
はいじ
2010/05/11 05:27
はいじさん、いらっしゃいませ(にこ)

3カラムで左右にサイドバーがあるので【#utilities】と【#utilities2】のふたつにデザイン指定をします。
ちなみに左側が【#utilities2】になります(ぇ
以下の文字列を新規で追加です。
色はお好みで変更してください。

#utilities a,
#utilities2 a,
#utilities a:link,
#utilities2 a:link{color:#33CC00;}
#utilities a:visited,
#utilities2 a:visited{color:#0000FF;}
#utilities a:hover,
#utilities2 a:hover{color:#FF0000;}

こちらはサイドバー全体のデザイン指定です。
もう少し細かくデザイン指定も可能です。
mairis
2010/05/11 07:51
友人との共同ブログでいろいろ変えたのはいいのですが、リンクの色はどうやってかえるのだろう・・といいもってわからなかったのでほったらかしていたのです!
mairisさんの記事をみて、検索かけて直すべき場所を発見!(@わら)
明日ゆっくりやってみます。ありがとうございましたぁ(@ぐっど)
さふぁぃぁ
2010/05/11 22:33
さふぁぃぁさん、いらっしゃいませ(ん)
ぉ〜お役に立てたようでなによりです〜♪
もっと早く書けばよかったかな(気まずい)
がんばってくださいね(ん)
mairis
2010/05/12 20:42
リンク文字変えてみましたっ(ほし)
(おそっ(はず)

アンカーと記事本体だけ弄ってみたんですけど、『友だちリンク』以外は変わった・・・・ように・・・・思います(ぶーん)

ここまでは合ってますか?
サイドバーがイマイチよく分からないんですけど(@あせ)
はいじ
2010/05/15 13:28
>> はいじさん
お疲れ様です〜(ん)ノ
さて、『友達リンク』のトコロなのですが、リンクに直接<font>タグで文字色が指定されているようです。
そちらを外していただくとスタイルシートのデザインが反映されます。

リンク部分の<font>タグ、それからリンクタグ内の「target="_blank style=" text-decoration:none;=""」の記述がおかしいので、その辺も一緒に修正しちゃいましょう。
「text-decoration:none;」はCSS編集で指定するようにします。
とりあえずはタグ内の記述を消去するだけでOKかと思います。

【修正例】全てうちんとこへのリンク(笑)

<font color="#ff9900" size="1">●</font> <a href="http://mairis.at.webry.info/" target="_blank" >きまぐれAWA's Life<br />(mairisさん)</a><br />

こちらを1セットとして、全て同じ形で修正してください。
<p>タグも不要かな〜と思います。
数が多いので大変だと思いますがKIAIでがんばですよ〜(尸・ω・)尸゙ フレー

-余談-
リストスタイルで記述をするとうちのトコロの「お知り合いリンク」のような形になります。
その辺はお好みで(ん)
mairis
2010/05/15 21:01
おはようございます(三角帽子)
 
すみません(あせ)
まだへばりついてます(にこ)

『友だちリンク』できましたぁ(わら)
これでいいかなぁ(ひょえ)(@ひょえ)

あのですね、記事タイトル文字の大きさを本体文字の大きさにそろえたいんですけど、どこを弄ればよかったんでしたっけ?(はず)
変えた覚えがないのですが小さくなっていてこっちの方がいいかな、なんて(気まずい)

CSS編集を見てたんですけど「ん?(あれ)」なことになってしまって(ぎょ)
はいじ
2010/05/17 07:26
あのぉ、リストスタイルって????(気まずい)(あせ)(はず)
はいじ
2010/05/17 07:57
>> はいじさん
おつかれさまでーす(にこ)ノ
たくさんあったから大変でしたでしょ(気まずい)

■ 記事タイトルの文字の大きさ
記事見出しのトコロは230行目くらいの記事タイトル【#blog-head h2】ですね。
下のように変更してみてください

/* 記事タイトル */
#blog-head h2{
font-size:100%;
color:#FF3366;
}

これでOKです(にや)

■ リスト
リストは<li>タグで作る箇条書きになります。
アタマにちょぼ(リスト)がつきます(なんて説明だw)
リストの形は丸や四角などCSSで指定できますが、
はいじさんが今やってる形のままのが可愛くていいかもしれないです(ん)

ちなみに記述の仕方は、

<ul>
<li>リンクタグ</li>
<li>リンクタグ</li>
<li>リンクタグ</li>
</ul>

…になります(ん)
mairis
2010/05/17 19:29
おはようございますっ(@三角帽子)

すみません、まだへばり付いていました(気まずい)
文字の大きさ変更ありがとうございます(@ほし)

早速変更したいところですが、只今出張中でして(気まずい)
ノートからだとなにぶんやりにくいので帰ってから取り掛かりたいと思いまーす(ぶーん)
はいじ
2010/05/20 08:47
≫ はいじさん
ごゆっくり〜ですよ(にこ)ノ
編集はのんびりまったりが吉ですよ(ん)
σ(@気まずい)は慌ててやってミスしちゃうコト多いですw
mairis
2010/05/20 14:05
mairisさん、おはようございます(三角帽子)
すみません、まだこんな所にへばりついています(はず)

/* 記事タイトル */
#blog-head h2{
font-size:100%;
color:#FF3366;
}

って入れたんですけど記事タイトル文字の大きさが変わってないんですぅ(しょぼ)
なぜかしら(あれ)
はいじ
2010/05/28 06:45
>> はいじさん
およよ、変わりませんでしたか(あれ)
確認してみますのでちょっとお時間ください〜(べこ)
mairis
2010/05/28 09:20
>> はいじさん
ごめんなさーいっ(わーん)ノノ
思い〜っきり勘違いしてました(はず))
上で書いたのは記事見出し部分でした。

記事タイトルの文字サイズは下記のようになります。
変更箇所は197行目付近になります。

/* タイトルテキスト */
#subbanner h1{
color:#FF3366;
/* タイトル領域内での位置を指定します */
font-size: large;
}

※201行目くらいに「position:absolute;」とありますが、必要ないので消しちゃってください。
無駄なお手数をおかけしてスイマセンでした(*_ _)人ゴメンナサイ 


mairis
2010/05/28 21:13
mairisさん、おはようございます(おんぷ)
出来ました(ほし)
変更できましたぁ(わら)
ありがとうございま〜す(はーと)

えっと、

/* 記事タイトル */
#blog-head h2{
font-size:100%;
color:#FF3366;
}

は、そのまま置いといていいですか?
はいじ
2010/05/29 05:36
>> はいじさん
お疲れさまでした〜♪
/*記事タイトル*/ のトコロは記事の見出し部分になります。
※この記事だと『CSS(フォント編)リンク文字〜』のトコロ

フォントサイズの指定は消してしまっても問題ありません。
消す消さないはお好みでOKで〜す(にこ)
mairis
2010/05/29 09:36
mairisさん、おはようございます(ぶーん)

ありがとうございます(でんき)
フォントサイズは残しておくことにします(にこ)

ありがとうございました(ほし)
はいじ
2010/05/31 05:22
>> はいじさん
おつかれさまでしたーっ(わら)
mairis
2010/05/31 22:16

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(フォント編)リンク文字の色を変えるテクニックいろいろ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる