今回は、ブログに表示されるリンクのテキストカラーを変更してみます。
使用するテーマは、yStandardになります。
yStandard
追加cssでカスタマイズ
リンクの色変更は、カスタマイズの追加CSSで行います。
リンクの色を変えるコード
/* リンクの色を変える */ a { color: #45bde5; }
まず、cssでは /* リンクの色を変える */ のようにコードの説明をコメントで書いておくと、何を変えるコードなのか、どこからどこまでがそのコードなのか、わかりやすくなります。
aの中でcolorを指定します。
色の指定は16進数のカラーコードで#45bde5のように指定します。
カラーコードに変換してくれるツールもあります。
RGBの色をカラーコードに変換したり、16進数のカラーコードからRGB値を求めたりもできます。
カラーコード変換ツール
リンクに表示される線を消す
a { color: #45bde5; text-decoration: none; }
先ほどの色を変えるコードに text-decoration を none にするコードを加えます。
これで、リンク全体の色変更とリンクの下線を消すカスタマイズができました。
カーソルを合わせたときの色を変える
a:hover { color: #add8e6; }
カーソルを合わせたときの装飾には:hoverを指定します。
リンクの時と同じように色を指定すると、マウスのカーソルをリンクの上に置いたときだけ指定した色に変わるようになります。
訪問済みのリンクの色を変える
a:visited { color: #ac92ec; }
一度訪れたことのあるリンクの色を変えるには:visitedを指定します。
個別に色を変える
.lc01 { color: #ff69b4; }
今までの<a>を使ったリンクの変更は、サイト内すべてに影響を及ぼします。しかし、ときにはここだけリンクの色を変えたい！なんてこともあるかもしれません。そんなときは、追加cssに独自のクラスを追加します。
lc01の部分は任意の文字列にできます。.linkcolorでもいいですし、他のクラスと被らない文字にします。
<p><a class="lc01" href="https://seguimiii.com">FLAPPER</a></p>
<a>に先ほどのclassを追加すれば、そのリンクだけ色を変えることができます。
.lc01 { color: #ff69b4; } .lc01:hover { color: #3cb371; }
カーソルを合わせたときの色も変えたいときは、hoverも一緒に設定します。
これでlc01のクラスを付与したリンクだけ色を変えることができます。
クラス名をlc02などに変えて色を指定していけば、複数のリンクの色を使い分けることもできますね。
いかがだったでしょうか。
サイトのテーマカラーみたいなものをひとつ決めて、それに合わせてリンクの色を変えるカスタマイズをしてみました。
リンク色の変更はサイトに統一感を出すためにも効果的なので、是非試してみてください。