【Cocoon】本文のテキストリンク色をカスタマイズする方法

WordPressテーマ、Cocoonで本文のテキストリンク色をカスタマイズしたいという方に、Cocoon設定でのリンク色の変更方法、CSS追加によるマウスカーソルを合わせたときの色の変更についてお伝えします。

Cocoon設定でテキストリンクの色を変更

上の1の文章の「リンク」の文字をご覧ください。デフォルトではこのようにテキストリンクの色は、水色っぽい色になっています。

2の「リンク」の文字は、マウスを合わせたときの色です。デフォルトではこのように赤っぽい色になっています。

これらを自分好みの色に変更していきます。

WordPressダッシュボードを開き、Cocoon設定の画面へ行きます。そして、「全体」を選びます。

すると、サイトリンク色の項目があるので、ここでテキストリンクの色を選ぶことができます。

「変更をまとめて保存」を押すとリンクの色の設定が反映されます。

Cocoon設定ではテキストリンクにマウスを合わせたときの色までは変更できません。ですので、CSSを追記することで変更をします。

今回のCSSはWordPressダッシュボードの外観 > テーマファイルエディターで、Cocoon Childのstyle.cssに追記します。「子テーマ用のスタイルを書く、/*必要ならばここにコードを書く*/」のすぐ下です。

マウスを合わせたときの色は以下のCSS追加で変更可能です。
#と6文字で表される色の部分を適宜変更して使ってください。

.entry-content a:hover { color: #1111cc; }

このままだと、目次までマウスを合わせたときの色が変わってしまうので、目次にマウスを合わせたときの色を指定するには以下のCSSを追記します。
#と6文字で表される色の部分を適宜変更してください。

.toc-content a:hover { color: #222222; }

最後にCocoon Childのstyle.cssページ下部の「ファイルを更新」を押すと完了です。

Cocoonのフォーラムでは、ユーザーの疑問に対して、詳しい人から回答が寄せられています。そちらも参考にしてみてください。

以上、【Cocoon】本文のテキストリンク色をカスタマイズする方法でした。
参考になりましたら幸いです。