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

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

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

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

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

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

WordPressでリンクを追加すると、テーマが自動的にそのリンクの色を決定します。WordPressテーマのデフォルトの色がまさにあなたが望むものである場合もありますが、リンクの外観をより細かく制御する必要があるかもしれません。

たとえば、リンクの色をブランドやカスタムロゴに合わせたい場合があります。または、視覚に制限のある読者にとってサイトをよりアクセスしやすくするために、色のコントラストを高めたい場合もあります。

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

• WordPressのクラシックテーマでリンクの色を変更する方法
• WordPressブロックテーマでリンクの色を変更する方法
• ブロックエディターで個々のリンク色を変更する方法
• コードを使用してWordPressのリンクの色を変更する方法（すべてのテーマ）
• 動画チュートリアル

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

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

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

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

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

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

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

Neveのような一部のテーマには、直接的なリンク色の設定がないことに注意してください。代わりに、リンクの色はテーマのプライマリまたはセカンダリカラーにグローバルに関連付けられている場合があります。

テーマに直接リンク色のカスタマイズ機能がない場合でも、心配いりません！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;
}

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

16進数コードがわからない場合は、HTML Color Codesウェブサイトでさまざまな色を探索してコードを取得できます。

コードの外観に満足したら、「非アクティブ」トグルをクリックして「アクティブ」と表示されるようにします。最後に、「スニペットを保存」をクリックして、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デザイン要素に関する究極のガイドもご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。