リンクを貼った際の文字色は、CSSを利用すれば自分で自由に指定できます。
記事を書いていると、リンクを使用する機会がありますよね。
他のサイトの参考にさせていただいた記事を紹介させていただくときはもちろん、サイト内で別の関連記事に飛ぶリンクを使うことも多くあります。
リンクのテキストの色は、使用しているテーマによって決められていることがあります。
しかし、リンクテキストを自分で決めた色に変更したいこともありますよね。
色によってリンクのクリック率が大きく変わるため、リンクテキストのデザインは非常に重要です。
CSSを利用することで、簡単にデザインの変更を行うことができます。
関連：CSSとは？CSSで出来ることとスタイルの追加・編集方法
今回は、リンクテキストのデザイン変更に使えるCSSのテンプレートを用意しました。
CSSの内容も解説していますので、自分好みに変更して活用してください。
リンクテキスト用テンプレートCSS
それでは、リンクテキストのデザインを設定するCSSを見ていきます。
テンプレートを用意しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | a{ color:#000000; border-bottom:solid 1px; } a:link { color: #000000; border-bottom:solid 1px #000000; } a:visited { color: #000000; border-bottom:solid 1px #000000; } a:hover { color:#000000; border-bottom:solid 1px #000000; } |
このうち必要な部分だけをコピーして使ってください。
ただし色は自分で変える必要があるため、内容を軽く説明していきます。
CSSはhtmlとセットで使われる
内容を確認する前に前提知識です。
CSSはwebデザインを設定する際に使用されるプログラム言語です。使い方が分からない場合は、以下のページで説明していますのでご覧ください。
関連：CSSとは？CSSで出来ることとスタイルの追加・編集方法
CSSを使えば「リンクテキストはこんな色」と設定できます。ところが、記事を書くのはCSSではないため、「この文字はリンクテキスト」と指示するのはまた別の言語となっています。
webサイトの記事を書くのに使われている言語が「html」です。
htmlは「タグ」というものを使用して、サイトを構成する要素を作っています。
タグを使って「箇条書きにする」「リンクにする」「表にする」などの指示を出しているということです。
CSSでは、htmlのタグごとにデザインを設定することができます。
「このタグが使われている箇所はこのデザインにする」という感じで指定するということですね。
それをふまえて、今回のテンプレートの内容を見ていきます。
「a{ }」の意味
先ほどのテンプレートを見ると、すべて以下の形をしていることが分かります。
1 2 3 | a{ } |
この「a」は、htmlで使用される「<a>タグ」を表しています。
<a>タグは記事内でリンクを貼る際に使用されるタグです。
a{ }の中にデザインを表す文を書くことで、リンクテキストのデザインを変えることができます。
<a>タグはリンクを表す
{ }の中にデザインを表す分を記していく
「:link」「:visited」「:hover 」の意味
タグを表す「a」の後ろに「:」が付いているものがあります。
これは、リンクの<a>タグに追加要素を付けています。
これにより、リンクテキストの状態によってもデザインを変えることが可能になります。
「:link」・・・未訪問のリンク
「:visited」・・・訪問済みのリンク
「:hover」・・・マウスカーソルをのせたリンクテキスト
必要に応じて使いましょう。
次は{ }の内容を見ていきます。
ちなみに、{ }の中に記載する項目のことを「プロパティ」といいます。
スポンサーリンク
「color: #000000;」の意味
「color:」は文字の色を表すプロパティです。
：の後ろに続いている「#000000」はカラーコードといわれるもので、色を指定しています。ちなみに「#000000」は黒色です。
カラーコードを確認するサイトをいくつか紹介しておきますので、好きな色に設定しましょう。
RGBと16進数カラーコードの相互変換ツール – PEKO STEP
「colorプロパティ」は文字の色を表すプロパティ
カラーコードで文字の色を指定することができる
「border-bottom:solid 1px #000000;」の意味
「border-bottom:」は下線を表すプロパティです。
半角スペースで区切って、3つの要素を指定することができます。左から「スタイル」「太さ」「色」です。
不要な要素は記入しなくても問題ありません。
スタイルの「solid」はシンプルな1本線です。「double」で2本線、「none」で無しなど、様々なスタイルがあります。以下のサイトで一覧で見ることができます。
border-style－スタイルシートリファレンス – HTMLクイックリファレンス
太さは数字を変えることで変更できます。
色は「color」と同じく、カラーコードで指定します。
自分の好みに合わせて、3つの要素を変更しましょう。
「border-bottomプロパティ」は下線を表すプロパティ
「スタイル」「太さ」「色」の3つの要素を半角スペースで区切って入力する
スタイル・・・線の種類を指定する
太さ・・・線の太さを指定する
色・・・線の色を指定する
以上が用意したテンプレートの説明です。
その他に追加したいプロパティがある場合は、プログラミング質問サイト「teratail（テラテイル）」で質問して補完しましょう。
初心者にも親切な質問サイトで、メールアドレスだけで登録できるので使いやすいです。
関連：プログラム系質問サイト「teratail（テラテイル）」が初心者に優しすぎてスゴイ
今回のまとめ
リンクテキストのデザインを変更するCSSのテンプレートを用意し、その内容を確認しました。
CSSで<a>タグのプロパティを編集することで、リンクテキストの色や下線などのデザインを変えることができます。
今回は基本の2つ、文字色を表す「colorプロパティ」と下線を表す「border-bottomプロパティ」を紹介しました。
もう少しリンクテキストのデザインを工夫したい場合は、他のプロパティを追加が必要です。
それぞれのプロパティごとに使い方が決まっているので、間違わないよう注意しましょう。
また、基本的にはコピペで使えるようになっていますが、テーマによってはもう一工夫しないと思った通りにならない場合もあります。
ちなみにこのサイトで使用しているテーマ「LION MEDIA」でも、もう少し変更しないと少しデザインが変になってしまうところがありました。
関連：テーマ「LION MEDIA」が無料とは思えないクオリティ！おすすめポイントと使い方
自分が使用しているテーマに合わせて編集して使ってください。
＜追記＞
「LION MEDIA」を使用している場合の、リンクテキストのデザインを変更するポイントをまとめました。今回紹介したCSSとは若干の違いがあります。
CSSでエラーを起こすと、サイトのデザインが崩れる恐れがあるので、分からない場合は「teratail（テラテイル）」などの質問サイトをうまく活用することをオススメします。
今後のために自分でCSSの勉強してみるのもオススメです。CSSが使えるようになると、できることの幅がグッと広がります。
関連：CSSとは？CSSで出来ることとスタイルの追加・編集方法
初めてCSSを勉強するのにオススメの本は「ああしたい、こう変えたいが手にとるようにわかる CSS基礎」です。かみ砕いて説明されていて、とても分かりやすかったです。
CSSを知らなくてもサイトは作れますが、知っている方が圧倒的にいい知識です。
基礎だけでも知っておくと、サイト作りがより楽しくなりますよ！
ここまでお読みいただき、ありがとうございました。
