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


WordPress でリンクの色を変更する方法を学びたいですか?

リンクの色を変更すると、訪問者が Web サイト内の移動先を見つけやすくなります。独自の配色を作成することで、サイトを目立たせることもできます。

この記事では、WordPress でリンクの色を変更する方法をステップごとに説明します。

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

WordPress にリンクを追加すると、テーマによってそのリンクの色が自動的に決定されます。 WordPress テーマのデフォルトの色がまさに希望どおりである場合もありますが、リンクの外観をより詳細に制御したい場合もあります。

たとえば、ブランドやカスタム ロゴに合わせてリンクの色を変更することができます。または、色のコントラストを高めて、視覚に障害のある読者がサイトをアクセスしやすくすることもできます。

一部のテーマでは、テーマ オプション パネルまたは WordPress テーマ カスタマイザーからリンクの色を直接変更できるため、最初にこれらの場所を必ず確認してください。テーマのドキュメントを参照することも価値があります。

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

ビデオチュートリアル

書面による説明を希望する場合は、そのまま読み続けてください。

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

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

これを行うには、カスタマイズしたいリンクをクリックするだけです。次に、右側のメニューで「ブロック」タブを選択します。

「カラー」セクションで「リンク」を選択する必要があります。

表示されるポップアップから新しい色を選択できるようになりました。

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

リンクの表示に満足したら、[更新] または [公開] をクリックして変更を有効にします。

方法 2: WPCode を使用して WordPress のリンクの色を変更する (推奨)

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

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

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

そこで WPCode が登場します。

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

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

有効化したら、コード スニペット » スニペットの追加に移動します。

ここでは、「カスタム コードを追加」の上にマウスを置くだけです。

表示されたら、「スニペットを使用」をクリックします。

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

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

ここで、カスタム CSS スニペットをコード ボックスに追加できます。使用できるさまざまなスニペットをいくつか見てみましょう。

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

まず、リンク全体の色をカスタマイズすることができます。これは、訪問者がリンクをクリックする前に表示される色です。

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

a {
     color: #FFA500;
}

上の例では、# 16 進コードによりリンクの色がオレンジに変更されるため、#FFA500 を使用したい色に変更する必要があります。

どの 16 進コードを使用すればよいかわからない場合は、HTML カラー コード Web サイトでさまざまな色を調べてコードを入手できます。

コードの見た目に満足したら、「非アクティブ」トグルをクリックして代わりに「アクティブ」と表示します。最後に、「スニペットを保存」をクリックして CSS スニペットを有効にします。

これで、WordPress Web サイトにアクセスすると、新しいリンクの色が動作しているのがわかります。

WordPress でリンクのホバーカラーを変更する

もう 1 つのオプションは、リンクのホバー色を変更することです。これは、訪問者がリンク上にマウスを置いたときに表示される色なので、訪問者の注意を引くのに最適な方法です。

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

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

上記のコードは、訪問者がリンクの上にマウスを移動すると、リンクの色を赤に変更し、テキストに下線を付けます。前と同様に、#FF0000 16 進コードを使用したい色に変更できます。

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

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

次に、ユーザーがリンクをクリックした後にリンクの色を変更したい場合があります。これにより、訪問者がすでにクリックしたリンクが表示されるため、WordPress ブログ内の移動先を見つけることができます。

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

a:visited {
     color: #0000FF;
}

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

それが完了したら、「非アクティブ」トグルをクリックして「アクティブ」に変更します。次に、「スニペットを保存」をクリックするだけでコードがサイトに公開されます。

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

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

詳細については、WordPress ナビゲーション メニューのスタイルを設定する方法に関するガイドを参照してください。

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

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

CSS Hero プラグインの使用をお勧めします。非常に初心者向けで、ドラッグ アンド ドロップのページ ビルダーと同様に、Web サイトを視覚的にカスタマイズできます。

プラグインをインストールした後、「製品のアクティベーションに進む」ボタンをクリックしてプラグインをアクティベートし、アカウントを接続します。

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

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

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

これにより、CSS Hero が実行されている Web サイトが開きます。

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

まず、編集するリンクの例をクリックします。このガイドでは、ブログ投稿のリンクをカスタマイズします。

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

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

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

次に、CSS Hero を使用して、WordPress ナビゲーション メニューのリンクの色を変更できます。

ナビゲーション メニューの上にカーソルを置き、メニュー項目のいずれかをクリックするだけです。

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

代わりに使用する色を選択できるようになりました。

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

この記事が WordPress でリンクの色を変更する方法を学ぶのに役立つことを願っています。また、電子メール ニュースレターの作成方法に関するガイドや、中小企業に最適な電子メール マーケティング サービスに関する専門家によるおすすめも参照してください。

この記事が気に入っていただけましたら、WordPress ビデオ チュートリアルの YouTube チャンネルに登録してください。 Twitter や Facebook でもご覧いただけます。