フォントカラーのCSS｜リンクやコピペする時の選択文字と背景色をカスタマイズ

Webページで使用する 文字に色を付ける場合、「color」という CSSコードを使用します。

WordPressテーマによっても違いますが ルクセリタス）では 基本的な文字色の設定は
外観カスタマイズなどから ある程度 かんたんに行うことができます。

今回は 基本の文字色設定と 個別のプロパティ・リンクなど CSSでのカスタマイズが必要な
色に関するカスタマイズについてまとめていきます。

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

基本の文字色と見出し

サイトのメイン ( body ) に使用される基本の文字色はたいてい黒なのだと思われますが
背景色が白、または白っぽい色の場合、特に変更する必要はないのではないでしょうか？

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

見出しや ウィジェットのタイトルの文字色

色を指定するCSSコードは #0073a8; というように＃の後に色番号のコードを記述します。

色を選ぶ際に役立つのが コード一覧サイト。よろしければ参考にしてみてください。
WEB色見本 原色大辞典 – HTMLカラーコード

見出しの h2 or h3 サイドバーの h3 or h4 と指定を変えて使用します。

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

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

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

リンクは 記事内に記述した 外部リンク・内部リンク、サイドバー すべてに当てはまり
同じ設定であれば 外観カスタマイズの文字色で設定できますので それ以外の場所で色を変えてみます。

a:hover

リンクホバーには a:hover というCSSコードを使用し セレクタ ( 場所 )に応用していきます。

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

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

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

トップページやカテゴリページでは グリッドレイアウトで記事がリスト表示されており
リストのタイトル と 記事を読む の部分がリンクになっています。

両方とも色を変えるパターンと 記事を読む だけ変更するパターンです。

目次のリンク

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

デフォルトの状態ではリンクにアンダーラインが入りますので 不要であればラインを消すコードを一緒に記述します。

選択した文字の背景色

Web画面上の文字をコピペする時などにテキストを選択すると
背景色がブルーで白抜き文字というのが 一般的なよく見かける選択文字の色合いですが
この色をカスタマイズする場合は ::selection というコードを使用します。