ユーザビリティ(閲覧者の使いやすさ)を考えると
 リンクというものは
 文字色は青、文字にはアンダーライン
 というのが一番よろしいとのことです。
 要するに初期設定そのまんまが一番いいと。
 
 いや、それは確かにそうなんですが
 デザインを考えるとやっぱりそれはちょっと辛いなんてことも
 あるかもしれません。
 
 今日はスタイルシートを使って
 リンク文字のスタイルを変えてみたいと思います。
 体系的にスタイルシートをご存じない方でも
 コピペで乗り切ってください(笑)
 というか、スタイルシートを基礎から理解している人なんて
 ほとんどいないと思う・・・
 
 色についてですが
 スタイルシート内で
a{
color:#******;
}
 と記述されている箇所を突き止め、その文字コードを変える
 もしくはリンク色を変更したいところに上記のように入力する
 という方法は、前回までにご説明してあります。
 
 今日の本題はリンク文字の形態です。
 
 http://mimawakana.blog60.fc2.com/
 
 文字色はいじってあるのですが、
 リンクには初期設定だと↑このようにアンダーラインが入ります。
 
 記事中などではできるだけアンダーラインは残したままの方がいいです。
 でないと閲覧者さんがリンクだと気付いてくれないことがあるから。
 特にアフィリエイトなんてなさっている方は致命傷ですよねぇ。
 
 ですがブログタイトルですとかメニューなんかに
 いちいち下線が出ていると格好悪かったりもします。
 カッコ悪い〜!なんてリンクを外しちゃダメですよ〜。
 閲覧者さん、迷子になっちゃいますから。
 
 では、まずスタイルシートを開きます。
 そこから変更したい部分を探します。
 探し方についてはこちらの記事でご説明してあります。
 
 余計な文字がついていることの方が多いのですが
 基本的には
 
a{
〜〜〜〜
}
 の形になっています。
 
 ここに text-decoration: という文字があれば
 それをいじります。
 もしa{}の中に入っていなければ、これを書き加えます。
 
 *下線を消したい場合
 
 a{}内の 
  text-decoration: none;
 
 この文字列を付け足します。
 
 *下線を付け加えたい場合
 
 a{}内の 
 text-decoration: none;
 
 を削除します。
 スタイルシートで全体指定してあると削除できません。
 その場合は
 text-decoration: underline;
 を書き加えます。
 
 *下線を装飾したい場合
 
 まず、 a{}内に
 text-decoration: none;
 を書き込みます。
 その下に
 border-bottom: (太さ 色 線の形態) ;
 を書き込みます。
 
 border-bottom:の値ですが
 太さ・・・pxなど線の太さの指定
 色・・・#******などカラーコード
 線の形態・・・
 
 直線:solid
 二重線:double
 点線:dotted
 大き目の点線:dashed
 
 などがあります。
 
 これらを半角スペースで区切って入力します。
 
 実際の記述↓
 
a{
text-decoration: none;
border-bottom: (red 2px dashed) ;
}
 
 
こんな感じに表示されます。  
 もちろんborder-bottom(下線)だけでなく
 border-top(上線)border-right(右線)border-left(左線)も
 それぞれに指定できます。
 
a{
text-decoration: none;
border-top:(1px #0000ff solid);
border-bottom: (1px #0000ff solid) ;
}
 
 
こんな感じに表示されます。
 
 「border」だけで指定すると四方囲まれます。
 左右線だけ、などはリンクとはわかりづらいですので
 なるべく下線は削除しないようにした方がいいと思います。 
 
 
 また、ポインタがリンク上に来た時に形態を変えることもできます。
 
 a{
text-decoration: none;
}
の下に
a:hover{
text-decoration: underline;
}
 を書き加えると、
 マウスが乗ったときだけアンダーラインが出るリンクが作れます。
 
 逆に、aとa:hoverの中身を入れ替えると
 オンマウスで下線が消えるリンクになります。
 
 中身を入れ替える際、a→a:hoverの並び順は変えてはいけません。 
 
 もちろん先ほどのように
 text-decoration: none;とborder-●●:(太さ 色 線の形態) ;
 を使ってスタイルを変えられます。
 
 
 また、リンクの背景色を変えることもできます。
 
a{
background-color:#94C569;
}
 
こんな感じに表示されます。
 
 オンマウス時だけ背景色を出す場合は、先ほどと同様に
 
a:hover{
background-color:#94C569;
}
 
 とa{}の下に書き加えます。
 
 ちなみに記述の順番は
 
  1. a(:link) ・・・通常時
  2. a:visited ・・・訪問後
  3. a:hovor ・・・オンマウス
  4. a:active ・・・ページが切り替わっている最中

 いらない指定は省略できますが、順番は必ずこの通りにします。
 
 
 リンク文字、色々遊んでみてください・・・と言いたい所ですが
 やはりリンクの基本は青文字下線
 このことを意識した上で、「あ、これはリンクだ」と
 すぐにわかる形のリンク作りを目指してください。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。