WordPressでリンクの色を変える方法

こんにちは(^^)
今回はwordpressでリンク（他サイト）の文字の色を変える方法をご紹介します。

WordPressを使ってると、
リンク色がテーマ独自のものに置き換えられることがあります。

• リンクの色が勝手にテーマ色に変わってしまう(><)
• リンクなのか分かりにくい色になってしまう(><)
• リンクの色がそもそも変わらず、何もわからない(><)

そこでWordPressでリンクの色をカスタマイズする手順を紹介します！

次の手順を試せば、数分もかからずリンクを一括変更できます。

手順１．テーマの style.css を開く

まずやるべきは使用中テーマの style.css を開きます

この style.css はテーマ全体で使われる重要なファイルのため、
編集をする前に必ずバックアップなどを取っておいてください。

ここにリンクの色などを一括変更するCSSを追加していきます。

もしWordPressで直に編集するなら、
メニューから「外観」ー＞「テーマエディター」を開けばOK

ここです↓

手順２．リンク用のカスタムCSSを追加する

テーマの style.css にカスタムCSS（簡単です！）を追加します。

そもそもstyle.cssってなに？って思う方もいると思いますが、
HTMLファイルのデザインを管理しているファイルと思ってもらえばよいです。

例えばリンクを青色に変更（Googleのイメージ）

そのために必要なのは下記のカスタムCSSとなります。
以下の「/* ノーマル状態　」から一番下の「}」までをコピーして、貼り付け、「更新」をすればOK(^^)

＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾＾

/* ノーマル状態 */
a{
color: #1a0dab; text-decoration: underline;
}
/ *ホバー状態 */
a:hover{
color: #1a3dff;
}
/* クリックされた状態 */
a:active{
color: #ee0000;
}
/ *訪問済みの状態 */
a:visited {
color: #609;
}

通常状態と訪問済みのリンク色は Google を参考にしています。

ホバー時の色は通常時より少し薄く、クリック時は赤色にしてます。

各状態の色については、自分の好みでいろいろ調整してみてください。
color: #ee0000;　の「#ee0000」の部分を「HTML色変える」などで検索すれば
色のコードがわかると思います。

「あ！これリンクだ！」と知らせるには、
青系統の色が紛らわしくなくて無難ではないかと。googleもそうですし。(^^)

ただし・・・カスタムCSSを追加しても上手くいかないこと があります(><)

• なぜかリンク色が変わってない
• テーマの独自デザインのまま
• カスタムCSSも間違えてないのに…

↑ こういう感じで反映されないことがある

もしそうなら、ブラウザのキャッシュを削除してみてください。

あるいは Clear Cache という拡張機能を使うのもオススメ

キャッシュを削除すれば、リンク色が変わっているはずです。

もし疑問・質問がある場合は、コメント欄からどうぞ(^^)

それでは、また(^^)