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

2019年9月15日2020年1月17日HTML・CSS

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

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

テキストリンク

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

⬅︎ ※これは画像です。

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

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

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

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

下線を消す

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

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

リンクで使う擬似要素

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

リンク色を変える

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;
}

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

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;
}

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

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

これはサンプルです

.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タグに適用されます。それぞれ使い分けるならクラス名を指定してください。

最後に

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

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