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

2019年8月24日

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

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

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

スポンサーリンク