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

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

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

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

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

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

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

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

• アクセシビリティの向上: テキストと背景の色のコントラストを高めることで、視覚障害のある人にとってサイトが読みやすくなります。
• ブランドの一貫性: リンクをロゴや全体的なカラースキームに合わせ、プロフェッショナルな外観にすることができます。
• クリック率の向上: 目立つ色のリンク（ボタンや行動喚起など）を使用すると、訪問者のクリックを促し、コンバージョンを向上させます。

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

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

一部のクラシックテーマには、リンクの色を変更するための組み込みオプションがありますが、まずはお使いのテーマの設定を確認する必要があります。

テーマにこのオプションがあるかどうかを確認するには、外観 » カスタマイザーに移動します。次に、「色」またはそれに類する設定を探します。Sydneyテーマでは、「色」というラベルが付いています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ただし、背景とリンクの色との間に高いコントラストがあることを確認することも重要です。これにより、サイトがすべての人にとってアクセスしやすく、読みやすくなります。

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

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

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

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

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

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

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

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

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

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

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

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

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

そこでWPCodeが登場します。

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

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

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

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

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

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

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

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

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

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

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

a {
     color: #FFA500;
}

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

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

どの16進コードを使用すればよいかわからない場合は、HTMLカラーコードのウェブサイトでさまざまな色を探索し、そのコードを取得できます。

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

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

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

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

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

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

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

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

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

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

a:visited {
     color: #0000FF;
}

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

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

動画チュートリアル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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