WordPressでリンクの色を変更する方法（初心者ガイド）

WordPressでリンクの色を変更する方法を知りたいですか？

リンクの色を変えることで、訪問者がサイト内を見つけやすくなります。ユニークな配色をすることで、サイトを目立たせることもできます。

この投稿では、WordPressでリンクの色を変更する方法を順を追って説明します。

WordPressでリンクの色を変える理由

WordPressでリンクを追加すると、テーマが自動的にリンクの色を決定します。WordPressテーマの初期設定で希望通りの色になることもありますが、リンクの見え方をもっとコントロールしたい場合もあるでしょう。

例えば、リンクの色をブランドやカスタマイザーのロゴに一致するように変更したいかもしれません。あるいは、視力の弱い読者がサイトを利用しやすくするために、色のコントラストを上げたいと思うかもしれません。

テーマによっては、テーマオプションパネルやWordPressテーマカスタマイザーでリンクカラーを変更することができますので、まずはこれらの場所を確認してみてください。また、テーマのドキュメンテーションを見ることも価値がある。

それでは、WordPressサイトのリンクの色を変更する方法を、どんなテーマを使っているかに関係なく見ていきましょう。以下のクイックリンクから、お好きな方法にジャンプしてください：

動画チュートリアル

文章での説明がお好きな方は、そのまま読み進めてください。

方法1：個々のリンクの色を変更する

個々のリンクの色を変えたい場合もあるでしょう。例えば、ランディングページの コールトゥアクションに訪問者の注意を引きたい場合などです。

これを行うには、カスタマイズしたいリンクをハイライトするだけです。次に、ミニツールバーの矢印アイコンをクリックし、「ハイライト」を選択します。

変更したい内容に応じて、「背景」または「テキスト」を選択します。

それが終わったら、先に進み、使いたい色を選択する。

さらにリンクをカスタマイズするには、以下の手順を繰り返すだけです。

リンクの見た目に満足したら、「更新」または「公開」のいずれかをクリックして、変更を有効にします。

方法2：WPCodeを使ってWordPressのリンクカラーを変更する（推奨）

リンクの色を変更する最も簡単な方法は、WordPressサイトにカスタムCSSを追加することです。

WordPressのチュートリアルには、テーマのfunctions.phpファイルに追加するコード・スニペットがよく掲載されています。

最大の問題は、カスタムコードスニペットに小さなミスがあっただけでも、WordPressサイトが壊れてアクセスできなくなることです。また、次にWordPressテーマを更新する際には、すべてのカスタマイザーが失われてしまいます。

そこでWPCodeの出番だ。

この無料プラグインを使えば、サイトを危険にさらすことなくカスタムCSSを簡単に追加できる。

最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Code Snippets ” Add Snippetにアクセスしてください。

ここで、「カスタムコードを追加」にマウスオーバーするだけです。

表示されたら、『スニペットを使用する』をクリックする。

はじめに、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

その後、「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択する。

カスタムCSSスニペットをコードボックスに追加することができます。使えるスニペットをいくつか見てみよう。

WordPressサイト全体のリンクカラーを変更する

手始めに、全体的なリンクカラーをカスタマイズするとよいでしょう。これは、訪問者がリンクをクリックする前に目にする色です。

これを行うには、次のスニペットをWPCodeコードボックスに追加するだけです：

a {
     color: #FFA500;
}

上の例では、#の16進コードはリンクの色をオレンジに変えるので、#FFA500を使いたい色に変える必要がある。

どの16進コードを使えばいいかわからない場合は、HTML Color Codesサイトでさまざまな色とそのコードを調べることができる。

一方、リンクの色選びでお困りの方は、完璧な配色の選び方ガイドをご覧ください。

コードの見た目に満足したら、’Inactive’トグルをクリックして、代わりに’Active’を表示させます。最後に「Save Snippet」をクリックして、CSSスニペットを有効にします。

WordPressのサイトにアクセスすると、新しいリンクカラーが表示されます。

WordPressでリンクのマウスオーバー色を変更する

もう一つのオプションは、リンクのマウスオーバーの色を変更することです。これは、訪問者がリンクの上にマウスオーバーしたときに外観される色なので、訪問者の注意を引き、クリックスルー率を向上させる素晴らしい方法です。

この変更を行うには、以下のスニペットをWPCodeのエディターに貼り付けるだけです：

a:hover {
     color: #FF0000;
     text-decoration: underline;
}

上のコードは、リンクの色を赤に変更し、マウスオーバーしたときにテキストに下線を引きます。先ほどと同じように、#FF0000の16進コードを好きな色に変更することができます。

本番の準備ができたら、上記と同じ手順でコード・スニペットを公開することができる。

WordPressで訪問後にリンクの色を変更する

次に、ユーザーがリンクをクリックした後にリンクの色を変更したい場合があります。これは、訪問者がすでにクリックしたリンクを表示することで、訪問者がWordPressブログの中を探すのに役立ちます。

以下のCSSコードを使用して、訪問済みリンクの色を変更できます：

a:visited {
     color: #0000FF;
}

本当に〜してもよいですか？青い#0000FFhexコードをリンクに使いたい色に変更してください。

それが完了したら、「Inactive」トグルをクリックして「Active」に変更します。その後、「スニペットを保存」をクリックするだけで、サイト、ブログ、オンラインストアにコードが反映されます。

WordPressでナビゲーションリンクの色を変更する

最後に、ナビゲーションメニューのリンクをカスタマイズすることもできます。

詳しくは、WordPressナビゲーションメニューのスタイリング方法をご覧ください。

方法3：CSSを編集せずにリンクの色を変更する

CSSコードをサイトに直接追加する代わりに、CSSスタイリングプラグインを使用してサイトを視覚的に編集することができます。

CSS Heroプラグインの使用をお勧めします。とても初心者に優しく、ドラッグ＆ドロップのページビルダーのように視覚的にサイトをカスタマイズすることができます。

プラグインをインストールした後、「Proceed to Product Activation」ボタンをクリックして有効化し、アカウントを接続してください。

ユーザー名とパスワードを入力する画面が表示されます。

その後、画面の指示に従ってアカウントを確認してください。その後、CSS Heroは自動的にWordPressダッシュボードに戻ります。

次に、WordPress管理ツールバーの上部にある「CSS Heroでカスタマイズ」ボタンをクリックします。

CSS Heroが動作しているサイトが開きます。

CSS HeroはWYSIWYG（What You See is What You Get）エディターを使用しています。つまり、コンテンツをクリックすると、そのコンテンツをカスタマイズできるツールバーが開きます。

始めるには、編集したいリンクの例をクリックしてください。このガイドでは、ブログ投稿リンクをカスタマイズします。

リンクを選択した後、「タイポグラフィ」メニュー項目をクリックし、リンクの新しい色を選択します。

リストから色を選択するか、16進コードを追加することができます。

WordPressナビゲーションメニューの色を変更する

次に、CSS Heroを使って、リンクの色を変えてカスタムナビゲーションメニューを作ることができます。

ナビゲーションメニューにマウスオーバーし、メニュー項目をクリックするだけです。

次に、「タイポグラフィ」オプションを選択する。

これで、代わりに使いたい色を選ぶことができる。

リンクカラーの変更が完了したら、「保存して公開する」ボタンをクリックするだけで、変更が反映されます。

WordPressでリンクの色を変更する方法について、この投稿がお役に立てば幸いです。また、WordPressの文字色を変更する方法や、専門家が選んだWordPressのデザイン例をご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.