スポンサーリンク

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

2019年9月15日

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

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

テキストリンク

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

⬅︎ ※これは画像です。

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

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

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

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

きらり
きらり

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

結耶
結耶

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

下線を消す

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

リンクで使う擬似要素

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

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

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

リンク色を変える

これはサンプルです

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

マウスを乗せると青になる

訪問済みの色を変える

きらり
きらり

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

結耶
結耶

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

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

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

これはサンプルです
マウスが乗ると下に線がでます

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

これはサンプルです
マウスを乗せると上下に線がでます

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

これはサンプルです
「border」を使った線が上下にでます

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

これはサンプルです
マウスを乗せると背景色が変わります

ボタン風

これはサンプルです
ボタン風 マウスが乗ると背景色が変わります

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

これはサンプルです
マウスが乗ると下に凹みます

ボタン風

これはサンプルです
ボタン風 マウスが乗ると下に凹みます
きらり
きらり

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

結耶
結耶

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

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

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

これはサンプルです

これはサンプルです

これはサンプルです

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

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

最後に

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

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

結耶
結耶

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

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

結耶(ゆうや)

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