[ブログカスタマイズ]リンクの下線を消す

リンクの下線を消すには？
text-decoration属性の、HTMLタグを、使おう！＾＾

text-decoration: none

こうすると、アンダーラインを、見えなくすることが、できるよ。＾＾


サクッと結論を、知りたい方は、

→●どうすればいいの？をクリックしてね＾＾

●逆に、ラインを出したいんだけど？は、←をクリック。


text-decoration属性は、5つあるよ＾＾

1. underline：アンダーライン


2. overline：上にライン


3. line-through：打ち消しライン


4. blink:点滅させる


5. underline overline：ラインで文字を囲む

ちょっと、このタグを見てみて。


a{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:link{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration: underline;
}
a:visited{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:hover{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration:none;
}

linkは、そのままの意味。

visitedは、訪問済み。

hoverは、マウスの矢印を、乗せた時の、反応だよ。＾＾


●どうすればいいの？


a:linkとa:hove:のtext-decoration:をnone;にすればOK!＾＾

具体的には、こういう↓感じだよ＾＾


a{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:link{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration:none;
}
a:visited{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:hover{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration:none;
}


FC2ブログの場合、「環境設定」項目の「テンプレートの設定」→お使いのテンプレートの「編集」→2画面表示されているよね？＾＾　

その2番目にある「スタイルシート編集」に、上のタグを記載すれば、OK!＾＾

うまくいかない場合は、「スタイルシート編集」の中にa:linkやa:hoverと記載された項目があるから、そこのtext-decoration:をnone:に、してみてね。＾＾

※間違っても、やり直せるように「テンプレートの複製」を、取っておいてね。＾＾


●逆に、ラインを出したいんだけど？


a:linkとa:hoverのtext-decoration:をunderline;にすればOK!＾＾


こんな感じだよ＾＾


a{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:link{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration:underline;
}
a:visited{ color: #ここにジャンプさせたいURLやテキストの色;
}
a:hover{ color: #ここにジャンプさせたいURLやテキストの色; text-decoration:none;
}


こうすると、ジャンプさせたいURLやテキストに、アンダーラインが表示できる。

訪問済みの場合は、ラインが見えなくなるよ。＾＾


個人的には、この方法が、おすすめかな？

ジャンプさせたいURLやテキストに、アンダーラインが表示されていると、訪問者さんが「これはリンクに、なっているんだな」と、認識しやすくなる。

つまり「迷わなくってすむ」んだね。＾＾


こういった方法もあるから、もしよかったら、試してみてね。＾＾