スポンサーリンク

CSSを使ってテキストリンクを装飾してみよう!

2019年9月15日

以前から「もう少しテキストリンクを解りやすくしたいな~」と思っていました。
そこで今回は『テキストリンク』をちょっとカスタマイズしてみたいと思います。

テキストリンクはちょっとわかりづらいと思いませんか?
リンクがどこにあるかわからないことがあります。

スポンサーリンク

テキストリンク

テキストリンクとはAタグを使用して文字にリンクをつけたものです。

⬅︎ ※これは画像です。

デフォルトでのテキストリンクでは上のように表示されます。

リンクの文字色などはお使いのサービスやテーマによっては設定で変更できるようになっていたりしますが、中には変更用の設定がないものもあります。

サービスで設定が用意されていても変更できるのは文字色くらいです。

そこで今回はテキストリンクのちょっとした装飾(カスタマイズ)をやってみようと思います。

きらり
きらり

文字の色を帰る以外にもリンクって装飾できるの?

結耶
結耶

できるよ~。今日はちょこっとリンクの装飾をやってみるね。

下線を消す

テキストリンクのデフォルトでは文字の下に線が入ります。この下線を消したい場合は以下のように記述します。

a { text-decoration: none ; }   /*リンクの下線を消す*/

リンクで使う擬似要素

擬似要素を使えば「マウスが乗ったとき(マウスオーバー)」「アクション」「訪問済み」それぞれにスタイルを指定できます。

  • :hover・・・マウスが乗ったとき(マウスオーバー)
  • :active・・・クリックしたとき
  • :visited・・・訪問済みのリンク
結耶
結耶

擬似要素を使えば「マウスが乗ったとき」や「訪問済み」の文字の色を変えたりすることができます。

リンク色を変える

a {
    color:red;
}
これはサンプルです

マウスが乗ったときに色を変える

a:hover {
    color:blue;
}
マウスを乗せると青になる

訪問済みの色を変える

a:visited {
    color:orange;
}
きらり
きらり

擬似要素を使えば変えられるんだね。

結耶
結耶

そうそう。文字色以外にも背景色を付けたりすることもできるよ!

文字色を変える以外のこともできるのでいくつかやってみます。

マウスが乗ったときに下線を表示させる

a:hover {
    color:blue;
    text-decoration:underline;
}
これはサンプルです
マウスが乗ると下に線がでます

text-decorationは値を複数指定でき、上下に線を付けることもできます。

a:hover {
    color:blue;
    text-decoration:underline overline;
}
これはサンプルです
マウスを乗せると上下に線がでます

borderを使っても線を付けることができます。

a {
    padding:2px 7px;
}

a:hover {
    color:blue;
    border-top:1px solid blue;
    border-bottom:1px solid blue;
}
これはサンプルです
「border」を使った線が上下にでます

マウスが乗ったときに背景色を付ける

a:hover {
    color:blue;
    background:skyblue;
}
これはサンプルです
マウスを乗せると背景色が変わります

ボタン風

a {
    padding:2px 7px;
    border:1px solid #aaa;
    border-radius:5px;
}

a:hover {
    color:blue;
    background:skyblue;
}
これはサンプルです
ボタン風 マウスが乗ると背景色が変わります

マウスが乗ったときに凹ませる

a:hover {
    position:relative;
    top:2px;
    left:2px;
    color:blue;
}
これはサンプルです
マウスが乗ると下に凹みます

ボタン風

a {
    padding:2px 7px;
    border:1px solid #aaa;
    border-radius:5px;
}

a:hover {
    position:relative;
    top:2px;
    left:2px;
    color:blue;
    background:skyblue;
}
これはサンプルです
ボタン風 マウスが乗ると下に凹みます
きらり
きらり

あっ!凹んだー!こんなこともできるんだね。

結耶
結耶

ついポチッとしたくなるでしょ!?www

「関連記事」やアイコンを付ける

上で紹介した擬似要素とは別の擬似要素を使ってリンクの前に「関連記事」やリンクアイコンをつけてみました。

これはサンプルです

.kanren:before {
    content:"関連記事";
    padding:0 7px;
    margin-right:1em;
    background:deeppink;
    color:#fff;
    font-size:14px;
}

これはサンプルです

.sankou:before {
    content:"参考記事";
    padding:0 7px;
    margin-right:1em;
    width:100px;
    background:royalblue;
    color:#fff;
    font-size:14px;
}

これはサンプルです

.link-icon:before {
    font-family:"Font Awesome 5 Free";
    content:"\f0c1";    /*アイコンのコード*/
    font-weight:900;
    margin-right:10px;    /*アイコン右側の余白*/
}

セレクタをクラスにしています。セレクタをa:beforeにするとAタグに適用されます。それぞれ使い分けるならクラス名を指定してください。

HTML<a class="クラス名" href="リンク先のURL" target="">リンク先のタイトルなど</a>

最後に

今回はCSSを使ってテキストリンクの装飾をしてみました。

テキストリンクは味気ないものです。CSSを使ってポチッとするのが楽しくなるような,わかりやすいリンクを作ってみてください。

結耶
結耶

よし!もっとテキストリンクがオシャレになるように勉強しよう!

きらり
きらり
お待ちしてます♪
スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ
   Blog People
お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。