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

TOP > カスタマイズをしよう! > title - リンクの種類紹介.1

リンクの種類紹介.1

線をつけるタグを紹介

色々なサイトを見ているとリンクに下線があったりなかったり、マウスを乗せたら下線ができたり消えたりするリンクってありますよね。あれを紹介します。

[テンプレートの設定]→[スタイルシート]のlinkの所を見るとほとんどの場合は一緒にtext-decorationというものがあると思います。これでリンクの線の有無や種類を決めています。

全体の指定なら  a { color: #000000; text-decoration: ~ }
リンクの種類なら  a:hover { color: #000000; text-decoration: ~ }
名前をつけての指定なら  .Name a:link {color: #000000; text-decoration: ~ }という風になっていると思います。


リンクのおさらい。
link { color: 色の値 }   通常のリンクの色。
visited { color: 色の値 }   クリックした後のリンクの色。
hover { color: 色の値 }   マウスのカーソルを乗せた時のリンクの色。
active { color: 色の値 }   マウスでクリックした瞬間のリンクの色。

線の種類
none線をつけません。
underlineテキストに下線が付きます。
overlineテキストに上線が付きます。
line-throughテキストに打ち消し線が付きます。


スタイルシートのlinkやhoverと基本のtext-decorationに上記の線の種類のタグを組み合わせて色々なリンクの線を作る事ができます。

使い方の紹介

●下線がないリンク-FC2ブログランキング
a { color: 色の値; text-decoration: none; }
という風にtext-decoration:の後ろにnone;をつけます。

●下線があるリンク-FC2ブログランキング
a { color: 色の値; text-decoration: underline; }
という風にtext-decoration:の後ろにunderline;をつけます。

●通常は下線がないけどマウスを乗せると下線ができるリンク-FC2ブログランキング
a { color: 色の値; text-decoration: none; }
A:hover { color: 色の値; text-decoration: underline; }
通常は線がないnoneにしておいて、マウスのカーソルを乗せた時(hover)を下線がでるunderline;にする。

●逆の、いつもは下線でマウスを乗せると下線が無くなるパターンは、
a { color: 色の値; text-decoration: underline; }
A:hover { color: 色の値; text-decoration: none; }
通常は下線がでるunderline;にしておいて、マウスのカーソルを乗せた時(hover)を線がないnoneという様に逆にするだけです。

あとは他の上線や打ち消し線を使いたい場合も同じ要領でoverlineline-throughを使えばよいだけです。

●上線と下線の両方の線を一緒に使ったリンク-人気ブログランキング
a {color: 色の値; text-decoration: underline overline;}
組み合わせて使いたい場合はこの様に続けて半角スペースを空けてタグを続けて記入すれば組合わせることもできます。

線の組み合わせと通常・カーソルを乗せた時を色々組み合わせると色々なリンクの種類が作れますよ。

でもこれよりもっと色々な線(点線や二重線など)なリンクをつくる事もできます。
<リンクの種類紹介.2へつづく>

関連ページ)
文字の色を変えたい!
リンクの色を変えたい!
・リンクの種類紹介.1
リンクの種類紹介.2
リンクの種類紹介.3


◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
参考にさせて頂きました
リンクと下線をずーーっと変えたかったのですが、全然わからずにいました。
他のサイト様を参考に何度かトライしていましたがアフォな私は失敗ばかり・・・汗
ココにたどり着いてやっと成功しました!
すごく参考になりました!ありがとうございます♡
ちょびこさんへ
参考になったようで良かったです!!
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/660-6c6086ed   

Template Designed by DW99