リンクのアンダーラインを消す、色（リンクカラー）CSS指定

出来るだけSEOやSEMの専門的な記事を中心にしたいと思っていますが、どうも全体的にこのブログは分かりづらいのではないかと思うようになり（難しすぎる、初心者に優しくないのでは？と思うようになり）補完的な記事も順次書いていこうと思っております。

という訳で、今回の記事はCSS（カスケード・スタイル・シート）でリンクの色やアンダーラインを変えようぜ！というもの。
CSSなにそれ？美味しいの？といった初級の方々には、コピペでいけるソースを紹介しますので使って下さい。

早速だが、アンダーライン消すぞ！

このブログもそうですが、リンクにはアンダーラインを付けています。
実は、SEOエンジニアに言わせるとアンダーラインはあったほうが良い。より多くのアクセスをGoogleやYahoo!から獲得していこうと思っているならば、アンダーラインを消すのは考えなおしたほうがいい。

通常のリンクは、通常リンク　こんな感じ。

でも、デザインにこだわりがあって、アンダーラインを消す場合には、リンクのタグ内に書き加えて消す方法もあるよ。

<a href="https://j-sem.net/" style="text-decoration: none;">このブログのTOPへリンク</a>

↓みたいになるよ
このブログのTOPへリンク

CSSで何種類か書いてみるよ

/*↓リンクの下線はなし、マウスオンで下線あり*/
a { text-decoration: none;}
a:hover { text-decoration: underline;}

/*↓リンクの下線はあり、マウスオンで下線なし*/
a { text-decoration: underline;}
a:hover { text-decoration: none;}

/*↓リンクの下線はなし、マウスオンで下線なし*/
a { text-decoration: none;}
a:hover { text-decoration: none;}

/*↓リンクの下線はあり、マウスオンで下線あり*/
a { text-decoration: underline;}
a:hover { text-decoration: underline;}

色も指定してみるよ

a:link { color: #0000ff; }　/*リンクの色*/
a:visited { color: #aa0055; }　/*訪問済みリンクの色*/
a:hover { color: #ff0000; }　/*マウスオン時のリンクの色*/
a:active { color: #00ff00; }　/*クリックしている時のリンクの色*/

コピペ用ソース

さて、ここまでの説明でcssの理解がある方は、ソースをコピーして用事は済んだ！といったところでしょう。

次は、あなたのサイトにコピペするだけでどうにかなるソース集です。

リンクのアンダーラインは消したい。マウスオンでも消したい

次を該当ページの＜body＞直下にはりましょう。

<style>
a { text-decoration: none;}
a:hover { text-decoration: none;}
</style>

もしくは上が出来なかった場合には、リンクタグ自体を書き換えよう

<a href="あなたが設置するリンク先ＵＲＬ" style="text-decoration: none; color: #ff0000;">アンカーテキスト</a>

このソースの『ff0000』は文字色です。これを書き換えることで色をかえることが出来ます。

今日はここまで。また忘れてしまった時の為に、ブクマもどうぞ。