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

「WordPressでリンクの色を変更するにはどうすればよいですか？」これは、WPBeginnerの読者から定期的に寄せられる質問です。

小さな詳細のように思えるかもしれませんが、リンクの色はウェブサイトの使いやすさとコンバージョン率において重要な役割を果たします。そのため、WPBeginnerではリンクにオレンジ色を使用しています。

良いニュースは、WordPressでリンクの色を変更することが以前よりもはるかに簡単になったことです。CSSの専門家である必要も、開発者を雇う必要もありません。技術的なスキルに関係なく、誰でも使用できる簡単なソリューションがあります。

このガイドでは、WordPressでリンク色を変更するための正確な手順を説明します。

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

WordPressでリンクの色を変更する主な理由は、ブランドのアイデンティティに合わせ、コンテンツの可読性を向上させることです。これらの色をカスタマイズすることで、訪問者の注意をページで最も重要な部分に誘導します。

リンクの色をカスタマイズすることの具体的な利点をいくつかご紹介します。

• アクセシビリティの向上：十分な色のコントラストを使用すると、特に視覚に障害のある訪問者にとって、リンクが読みやすく、識別しやすくなります。一般的なルールとして、WCAGガイドラインでは、通常のサイズのテキストに対して少なくとも4.5：1のコントラスト比を推奨しています。新しいリンクの色を選択する前に、WebAIM Contrast Checkerでテストして、読みやすいままであることを確認できます。
• ブランドの一貫性: リンクをロゴや全体的なカラースキームに合わせ、プロフェッショナルな外観にすることができます。
• クリック率の向上: 目立つ色のリンク（ボタンや行動喚起など）を使用すると、訪問者のクリックを促し、コンバージョンを向上させます。

それでは、WordPressウェブサイトでリンクの色を変更する方法を見ていきましょう。以下のクイックリンクを使用して、希望する方法に直接ジャンプしてください。

WordPressのクラシックテーマでリンクの色を変更する方法

一部のクラシックなWordPressテーマには、リンクの色を変更するための組み込み設定が含まれています。確認するには、外観 » カスタマイズに移動し、[色]、[タイポグラフィ]などのセクションを探してください。

Astra、GeneratePress、OceanWPなどの人気のあるテーマには、これらの設定にリンクの色制御が含まれていることがよくあります。

専用の「リンクの色」オプションが表示されない場合は、「アクセントの色」または「プライマリの色」を探してください。これらの設定は、ウェブサイト全体でリンクの色を制御することがよくあります。

たとえば、Sydneyテーマでは、これらのオプションは「色」セクションの下にあります。

次に、リンクの色を変更できる設定を見つけます。

Sydneyでは、「リンクの色」オプションでデフォルトとホバー状態の両方を簡単に設定できます。

リンクのホバーカラーは、訪問者がリンクの上にマウスを置いたときに表示される色であり、注意を引き付け、クリック率を向上させるのに役立ちます。

その後、「公開」をクリックして変更を保存できます。

一部のテーマには直接的なリンク色の設定がない場合があることに注意してください。代わりに、リンクの色はテーマの全体的なプライマリカラーまたはセカンダリカラーに紐づいている可能性があります。

テーマで直接リンクの色をカスタマイズするオプションが提供されていない場合でも、心配しないでください！4番目の方法に進むことができます。ここでは、コードを使用してリンクの色を変更する方法を説明します。

WordPressブロックテーマでリンクの色を変更する方法

ブロックテーマを使用している場合は、フルサイトエディターを使用してリンクの色をカスタマイズする必要があります。

WordPressダッシュボードで外観 » エディターに移動します。

サイトの外観をカスタマイズするためのすべてのメニューが表示されます。

ここで、「スタイル」をクリックします。

テーマのデフォルトスタイルが表示されます。

カスタマイズを開始するには、鉛筆の「編集」ボタンを探してクリックしてください。

フルサイトエディターが開き、テーマのスタイルを編集するためのサイドバーが表示されます。

このサイドバーの「色」をクリックして、色カスタマイズオプションにアクセスします。

リンクオプションを見つけてクリックすると、デフォルトとホバー状態の両方の色設定が表示されます。ウェブサイトのデザインに合った色を選択してください。

ただし、背景とリンクの色との間に高いコントラストがあることを確認することも重要です。WCAG 2.1ガイドラインによると、テキストリンクは背景に対して少なくとも4.5：1のコントラスト比が必要です。

視覚に障害のある訪問者にとってリンクが読みやすいことを確認するために、WebAIMのコントラストチェッカーのような無料ツールを使用して色の選択をテストできます。 

変更に満足したら、「保存」をクリックするだけで、サイトでライブになります。

ブロックエディターで個々のリンク色を変更する方法

個々のリンクの色を変更したい場合もあります。たとえば、ランディングページの行動喚起に訪問者の注意を引きたい場合があります。

これを行うには、カスタマイズしたい特定のリンクをハイライトするだけです。

次に、ツールバーの矢印アイコンをクリックし、ドロップダウンメニューから「ハイライト」を選択します。

次に、「テキスト」タブをクリックします。これで、その特定のリンクの色を選択できます。

これが完了したら、使用したい色を選択してください。

より多くのリンクをカスタマイズするには、これらの手順を繰り返すだけです。

リンクの外観に満足したら、「保存」をクリックして変更を公開します。

コードを使用してWordPressのリンクの色を変更する方法（すべてのテーマ）

テーマにリンクの色を変更するオプションがない場合は、最も簡単な方法はWordPressサイトにカスタムCSSを追加することです。

WordPressのチュートリアルでは、コードスニペットをテーマの functions.php ファイルに追加するように指示されることがよくあります。

最大の問題は、カスタムコードスニペットのわずかな間違いでもWordPressサイトが破損し、アクセスできなくなる可能性があることです。また、WordPressテーマを次に更新したときに、すべてのカスタマイズが失われます。

そこでWPCodeの出番です。300万以上のインストール数を誇るこのツールは、テーマファイルを編集せずにカスタムコードを追加する必要があるWordPress初心者向けに特別に設計されています。

これにより、1回のタイポでサイトが壊れたり、テーマの更新中にカスタマイズが失われたりするリスクがなくなります。

徹底的なテストの結果、カスタムコードをウェブサイトに追加する最も安全で簡単な方法であると結論付けました。詳細については、WPCodeレビューをご覧ください。

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

有効化したら、Code Snippets » Add Snippet に移動します。

ここで、マウスカーソルを「カスタムコードを追加（新規スニペット）」に合わせます。

次に、表示される「+カスタムスニペットを追加」ボタンをクリックします。

次に、画面に表示されるオプションのリストから、コードタイプとして「CSSスニペット」を選択する必要があります。

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

カスタムCSSスニペットをコードボックスに追加できるようになりました。使用できるさまざまなスニペットを見てみましょう。

WordPressサイト全体のリンクの色を変更する

まず、全体のリンクの色をカスタマイズしたい場合があります。これは、訪問者がリンクをクリックする前に表示される色です。

ウェブサイト全体でリンクの色を変更するには、このCSSスニペットを使用します：

a {
     color: #FFA500;
}

注意: このCSSコードは、ウェブサイト全体のリンクの色を変更します。これには、ナビゲーションメニュー、ボタン、フッターリンクが含まれます。

上記の例では、#の16進数コードがリンクの色をオレンジに変更しますので、#FFA500を希望の色に変更する必要があります。

16進コードの使用方法がわからない場合は、HTMLカラーコードのウェブサイトでさまざまな色を探索してコードを取得できます。または、Googleのカラーピッカーのような無料のオンラインツールを使用して、完璧な色合いを見つけることもできます。

コードの外観に満足したら、「非アクティブ」トグルをクリックして「アクティブ」と表示されるようにします。最後に、「スニペットを保存」をクリックして、CSSスニペットをライブにします。

さて、WordPressウェブサイトにアクセスすると、新しいリンクの色が反映されているのがわかります。

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

リンクのホバー色を変更するには、次のスニペットをWPCodeのエディターに貼り付けるだけです:

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

上記のコードは、訪問者がリンクにカーソルを合わせたときに、リンクの色を赤に変更し、テキストに下線を引きます。以前と同様に、#FF0000 の16進コードを好きな色に変更できます。

公開する準備ができたら、上記で説明したのと同じプロセスに従ってコードスニペットを公開できます。

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

次に、ユーザーがリンクをクリックした後のリンクの色を変更したい場合があります。これにより、すでにクリックしたリンクを示すことで、訪問者がWordPressブログ内を移動しやすくなります。

訪問済みリンクの色を変更するには、以下のCSSコードを使用できます。

a:visited {
     color: #0000FF;
}

いつものように、青色の#0000FFの16進数コードをリンクに使用したい色に変更してください。

これが完了したら、「非アクティブ」トグルをクリックして「アクティブ」に変更します。次に、「スニペットを保存」をクリックして、コードをサイト、ブログ、またはオンラインストアで有効にします。

WordPressで特定のページのリンクの色を変更する

特定のページ（たとえば、ランディングページや連絡先ページ）でのみリンクの色を変更したい場合は、ページ固有のCSSセレクターを使用できます。

各WordPressページには、.page-id-123のような一意のボディクラスがあります。このCSSを使用して、その特定のページのリンクをターゲットにすることができます：

.page-id-123 .entry-content a {
     color: #FF6600;
}

実際のページID（ページエディタのURLで確認できます）に 123 を置き換えてください。

または、WPCode Proを使用している場合は、条件付きロジック機能を使用して、カスタムセレクタを必要とせずに特定のページにのみCSSスニペットを適用できます。

ウェブサイトのリンクに最適な色は何ですか？

最適なリンクの色は、ブランドとウェブサイトのデザインによって異なりますが、従うべき実績のあるベストプラクティスがあります。

• 青は標準です： ほとんどのユーザーは、リンクがデフォルトのWeb規約であるため、青色（#0000FFまたは類似の色合い）であることを期待しています。青いリンクはすぐに認識できます。
• 高いコントラストが不可欠です： アクセシビリティ（WCAG AA準拠）のために、リンクの色は背景に対して少なくとも4.5：1のコントラスト比を持つ必要があります。
• 赤と緑は避けてください： これらの色は、色覚異常のユーザー（男性の約8％、女性の約0.5％に影響）にとって区別が難しい場合があります。
• 下線を使用してください： リンクに下線を引く（特にホバー時）ことは、視覚障害のあるユーザーを助け、全体的なユーザビリティを向上させます。
• ブランドに合わせる： ブランドが特定の色合いを使用している場合は、十分なコントラストを維持しながら、適合するリンクの色を選択してください。

WPBeginnerでは、ブランドに一致し、白い背景に対して明確に際立つため、リンクにオレンジ色（#FFA500）を使用しています。

動画チュートリアル

文章での指示に従うのが好きでない場合は、代わりにビデオチュートリアルをご覧ください。

WordPressでリンクの色を変更することに関するよくある質問

ウェブサイトのリンクの色を変更することについて、読者からよく寄せられる質問を以下に示します。

ハイパーリンクの色を変更できますか？

はい、ほとんどのWordPressテーマでは、「外観」設定またはサイトエディターからハイパーリンクの色をグローバルに変更できます。投稿エディター内でリンクをハイライトし、ツールバーから色を選択することで、個々のリンクの色を変更することも可能です。

WordPressでリンクをカスタマイズするにはどうすればよいですか？

ブロックエディターでリンクを選択し、ツールバーのオプションを使用することで、リンクをカスタマイズできます。これにより、リンク先のURLを変更したり、新しいタブで開くように設定したり、右側のサイドバーで色やスタイルの設定を調整したりできます。

URLリンクをカスタマイズするにはどうすればよいですか？

URL自体のテキスト（スラッグ）を変更するには、右側のサイドバーにある「投稿」設定に移動し、「URL」セクションを探します。リンクの外観（フォントや色など）を変更したい場合は、ブロックエディターの「スタイル」設定を使用してください。

詳細については、WordPressサイトのURLを変更する方法に関するチュートリアルをご覧ください。

WordPressでリンクを変更するにはどうすればよいですか？

コンテンツエディター内の既存のリンクテキストをクリックし、フローティングツールバーの「編集」（鉛筆アイコン）ボタンを選択するだけです。そこから、新しいURLを貼り付けたり、訪問者に表示したいテキストを変更したりできます。

ページリンクを変更するにはどうすればよいですか？

ページ設定サイドバーの「URL」セクションでパーマリンクのスラッグを編集することで、ページのリンクを変更できます。ページが既に公開されている場合は、古いリンクを使用している訪問者が正しい新しいページに送信されるように、301リダイレクトを設定することをお勧めします。

ウェブサイトのリンクに最適な色は？

青は最も認識しやすいリンクの色ですが、最適な選択はブランドとデザインによって異なります。アクセシビリティのために4.5：1のコントラスト比を確保し、色覚異常のユーザーのために赤/緑を避け、明確にするためにホバー時に下線を使用してください。可読性を維持しながらブランドカラーに合わせます。

WordPressでリンクアイコンを変更するにはどうすればよいですか？

WordPressにはリンクアイコンを追加または変更するデフォルト設定がないため、通常はプラグインを使用する必要があります。External Linksのようなプラグインは、アウトバウンドリンクに自動的にアイコンを追加できます。または、FontAwesomeとカスタムCSSを使用して手動でアイコンを追加することもできます。

この記事がWordPressでリンクの色を変更する方法を学ぶのに役立ったことを願っています。また、WordPressでテキストの色を変更する方法に関するガイドや、最も効果的なWordPressデザイン要素の究極のガイドも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。