【WordPress】カスタマイズ、リンクの色を好きな色に変更する

今回は、ブログに表示されるリンクのテキストカラーを変更してみます。
使用するテーマは、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を指定します。

サイトのテーマカラーみたいなものをひとつ決めて、それに合わせてリンクの色を変えるカスタマイズをしてみました。

サイトに統一感を出すためにも効果的なので、是非試してみてください。