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

公開日: : 最終更新日:2015/06/08 マークアップ

   
 
   

リンクのアンダーラインを消す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="あなたが設置するリンク先URL" style="text-decoration: none; color: #ff0000;">アンカーテキスト</a>

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

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

 

関連記事

スマホページ作ったらcanonicalタグを忘れずに

SEOの基礎!canonical(カノニカルタグ)を正しく使おう

4/21に向けてスマホ対応に忙しいサイトオーナーの皆さん。 もしもレスポンシブデザインでの再構

記事を読む

ワードプレスのファビコン設定方法を知りたい

WordPressのファビコン設定は3分で出来ます!

このブログもそうですが、WordPressで作成されたサイトのファビコン設定。 なんか難し

記事を読む

bとstrongの違い

bタグとstrongタグの違いをSEO観点とhtml(html5)観点で分かりやすく

今回はbタグとstrongタグ、その関連タグについて扱います。今回登場するタグは <

記事を読む

 
 
2020年トレンド
2020年のSEOトレンド

明けましておめでとうございます。(いまさら!)毎年書いていた年始め

2019年のSEO
2019年のSEO。私が頑張りたい4要素。

昨年(2018年)は書くのを忘れました。今年は書いておこうと

Googleの個人名「ナレッジパネルの認証を受ける」の申請方法・編集

Googleで個人名検索をした際に表示される「ナレッジパネル

検索意図ドリル
コンテンツマーケティング関連本「検索意図ドリル」書きました。

ドリルを書きました。 「は?ドリル?あの漢字とかの?」 こ

2017年のSEOトレンド
2017年のSEOトレンド予測と重点対策ポイント

2017年に注力すべきSEO領域、新たにキャッチアップすべきSEO

→もっと見る

PAGE TOP ↑