リンクの文字色と選択したテキストの色に関するカスタマイズ

文字に色を付ける場合、「color」という CSSコードで文字色を指定していきます。

WordPress（ルクセリタス）では 外観カスタマイズからある程度 かんたんに設定できます。

外観カスタマイズでの使用方法と 個別に設定する場合の CSSの記述についてまとめていきます。

基本の文字色と見出し

色を指定するCSSコードはこんな感じ。

color: #5c9ea5; 　: と ; の間に 色のコードを記述します。

色のコード一覧サイトもいろいろありますが 私はこちらのサイトを参考に利用させて頂いています。

body サイトのメインに使用される基本の文字色はたいてい黒でしょう。

背景色が白、または白っぽい色の場合、特に変更する必要はないのではないでしょうか？

ただ、見出しに関してもこのままだと黒色のままになってしまいます。

見出しは文字色だけでなく 背景や文字の太さなど トータルでカスタマイズする方法をこちらでまとめています。

WordPress【ルクセリタス】見出しラインを無くす方法と 簡単なコードで作る見出しラインのCSS

リンクにマウスを合わせた時の色（ホバー）

記事の文字が黒に対して リンクに使用される文字色は たいていブルーで設定されていますよね。

青文字のリンク部分にマウスを合わせると リンクだと分かるように文字色が変わります。

これを リンクホバーといいます。

リンクは 記事内に記述した 外部リンク・内部リンク、サイドバー すべてに当てはまります。

すべて同じ設定であれば 外観カスタマイズの文字色で設定できますので それ以外の場所で色を変えてみます。

a:hover

リンクホバーには a:hover というCSSコードを使用します。

これを いろいろなセレクタ（ 場所 ）に応用していきます。

サイドバー ウィジェットのリンクホバー

新着記事など、ウィジェットで設定している記事のリンクに対してのカスタマイズです。

グリッドレイアウト – リストのリンク

トップページやカテゴリページでは グリッドレイアウトで記事がリスト表示されています。

リストのタイトル と 記事を読む の部分がリンクになっています。

両方とも色を変える場合はこちら

記事を読む だけ変更したい場合はこちら

目次のリンク

目次も外観カスタマイズからある程度設定できますが リンクのホバーは指定がありませんので設定してみます。

デフォルトの状態では色の変化がない代わり？なのか リンクにアンダーラインが入ります。

不要であればラインを消すコードを一緒に記述します。

そのほか、目次に関するカスタマイズは こちらでまとめています。

選択した文字の背景色

Web画面上で文字の意味などを調べる場合にテキストを選択する場合があります。

この時の色も デフォルトではブルーのよく見かける色合いですね。

これも サイトのイメージに合うようにカスタマイズしてみます。

まとめ

リンクに使用する文字の色、マウスを重ねた時の色の指定など色に関するCSSコードの記述のしかたについてまとめてみました。

今回使用した色も参考になればと思います。

スペアミント  – #79c06e

スカーレット – #ea5532

ピンクアーモンド – #e3acae

エジプシャンブルー – #0073a8

シャルトルーズイエロー – #e3e548

また、CSSコードは 使用するテーマ・バージョンなどによって 記述方法が変わる場合がありますのでご了承くださいませ。