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 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でリンクをカスタマイズするにはどうすればよいですか？

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

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

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

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

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

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

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

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

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

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

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

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