WordPressサイトに外部リンクアイコンを追加する方法

明確なナビゲーションは、優れたウェブサイト体験の基盤です。訪問者は各リンクがどこに誘導されるかを簡単に理解できると、コンテンツの探索に自信を持つことができます。

外部リンクアイコンは、外部リンクに関する即時の視覚的フィードバックを提供することで、これを可能にします。

これらの小さなインジケーターは、訪問者がブラウジングジャーニーについて情報に基づいた意思決定を行うのに役立ち、よりスムーズでプロフェッショナルな体験を生み出します。

数え切れないほどの WordPress サイトオーナーがこの機能を追加するのを見てきましたが、これらの小さなディテールがユーザー満足度に大きな違いをもたらすことを実感しています。

サイトのナビゲーションを改善する準備はできましたか？WordPressサイトに外部リンクアイコンを追加するための実績のある方法を説明します。

WordPressの外部リンクアイコンを追加する理由

外部リンクアイコンとは、ユーザーを別のウェブサイトに誘導するリンクの隣に表示される小さな画像のことです。

たとえば、Wikipedia の投稿の下部までスクロールすると、参考文献セクションのほとんどのリンクに外部リンクアイコンが付いていることがわかります。

アイコン付きのリンクをWordPressブログに追加すると、訪問者は外部リンクと内部リンクの違いを簡単に区別できるようになります。多くのサイトでは、外部リンクアイコンを使用して、リンクが新しいウィンドウまたはタブで開かれることを明確に示しています。

これらのアイコンは、訪問者をサイトに長く留めることができ、外部リンクをクリックして誤ってウェブサイトを離れるリスクが少なくなるため、ページビューを増やすことができます。

それでは、WordPressサイトで外部リンクをカスタマイズし、アイコンを追加する方法を見ていきましょう。

WordPressで外部リンクアイコンを追加する方法

ウェブサイトにリンクアイコンを追加する最も簡単な方法は、WP External Linksを使用することです。

このプラグインを使用して、外部リンクにさまざまな画像、Dashicons、およびFont Awesomeアイコンを自動的に追加できます。

まず、WP External Links プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドをご覧ください。

その後、左側のメニューにある新しいWP External Links設定をクリックするだけです。

アップグレードを求めるポップアップが表示された場合は、ポップアップの外側をクリックするだけで閉じることができます。

ご覧のとおり、このプラグインはサイトに外部リンクアイコンを追加する以上のことができます。たとえば、すべての外部リンクをWordPressで自動的にnofollowリンクに変換できます。

WP External Links は、すべての外部リンクを新しいウィンドウまたはタブで開くことによっても、ユーザーをサイトに留めることができます。

多くのユーザーは、外部リンクアイコンが付いたリンクはとにかく新しいウィンドウまたはタブで開かれると想定しているため、この機能を有効にすることをお勧めします。

すべての外部リンクを新しいウィンドウまたはタブで開くには、「外部リンクを開く」ドロップダウンを開き、「各リンクを個別の新しいウィンドウまたはタブで開く」をクリックします。

デフォルトでは、WP External Links は、作成するすべての新しい外部リンク にこのルールを適用します。

ただし、サイトをスキャンして、以前にウェブサイトに追加した外部リンクを変更することもできます。

これにより、ユーザーにより一貫したエクスペリエンスが提供されるため、「既存の値を上書きする」ボックスをクリックすることをお勧めします。

それが終わったら、外部リンク用のアイコンを作成する準備ができました。「アイコンタイプの選択」セクションまでスクロールして開始します。

次に、「アイコンなし」と表示されている場所をクリックしてドロップダウンを開きます。

オプションは、画像、Font Awesome、またはDashiconです。

Font AwesomeとDashiconの両方には、外部リンクアイコンとして使用できる矢印付きボックスのアイコンが1つ含まれています。

このアイコンは、次の画像で見られるように、サイト上で常に青色で表示されます。

このアイコンは多くのウェブサイトで外部リンクを示すために使用されており、ほとんどの訪問者はこの箱と矢印のアイコンの意味を理解するでしょう。

ただし、「画像」では、スタイルや色がわずかに異なるものを含む、いくつかのボックス付き矢印アイコンから選択できます。

次の画像では、カラフルな矢印付きボックスのアイコンが WordPress サイトにどのように表示されるかの例を確認できます。

サイトにカラフルなリンクボタンを追加したい場合は、「アイコンタイプの選択」ドロップダウンから「画像」を選択する必要があります。

次に、外部リンクに使用したいものをクリックできます。アイコンがWordPressテーマと合っていることを確認してください。

それが完了したら、「アイコンの位置」ドロップダウンを開きます。

ここで、アイコンを「リンクの右側」または「リンクの左側」のどちらに表示するかを選択します。ほとんどのウェブサイトでは、外部リンクアイコンはリンクの右側に表示されます。

標準の青い矢印付きボックスアイコンを使用しますか？

次に、「アイコンタイプの選択」ドロップダウンを開き、「Font Awesome」または「Dashicon」のいずれかをクリックします。

次に、「Dashiconを選択」または「FAを選択」の横にあるドロップダウンメニューを開き、矢印付きのボックスアイコンをクリックします。

注意: Font Awesome と Dashicons の両方で、数十の他のアイコンにアクセスできます。ただし、外部リンクアイコンとして認識される可能性が高いため、矢印付きのボックスアイコンの使用をお勧めします。

使用したい Font Awesome または Dashicon をクリックした後、上記と同じプロセスでリンクの右側または左側に表示するかどうかを指定できます。

選択した外部リンクアイコンに満足したら、「変更を保存」をクリックするだけです。

プラグインは、サイト上のすべての外部リンクにリンクアイコンを自動的に追加します。

WordPressサイトをカスタマイズするためのヒントとコツをもっと学ぶ

外部リンクアイコンのカスタマイズに関するこの記事が気に入った場合は、次のヒントも役立つかもしれません。

例えば、脚注は、テキストの流れを妨げることなく、追加情報や引用を提供するのに最適な方法です。WordPressで簡単でエレガントな脚注を追加する方法については、役立つガイドがあります。

それ以外に、リンクの外観をカスタマイズすることを検討しましたか？リンクの色を変更すると、周囲のテキストから目立たせ、より視覚的に魅力的にすることができます。

また、テキストをハイライト表示することは、読者の注意を重要な情報に引きつけるのに役立ちます。WordPressでテキストをハイライト表示する方法に関する役立つガイドでは、使用できるさまざまな方法を紹介しています。

ブログ投稿にエレガントなタッチを加えたいですか？ドロップキャップは、段落の先頭に使用される大きくて装飾的な文字です。コンテンツにユニークでスタイリッシュな外観を追加できます。

最後に、ウェブサイトのナビゲーションを改善することで、ユーザーエクスペリエンスを大幅に向上させることができます。パンくずリストナビゲーションは、ウェブサイトの階層内でのユーザーの場所を表示し、サイト内を移動しやすくします。

よくある質問：WordPress で外部リンクアイコンを追加する

WordPressサイトに外部リンクアイコンを追加することについて、読者からよく寄せられる質問をいくつかご紹介します。

外部リンク アイコンは SEO に影響しますか？

いいえ、外部リンクアイコン自体はSEOに直接影響しません。これらは単にユーザーエクスペリエンスを向上させる視覚的な強化です。

ただし、外部リンクをどのように処理するかは、SEO に大きく影響する可能性があります。たとえば、

• リンクを新しいタブで開く（target="_blank"）と、ユーザーがサイトから離れるのを防ぎます。
• rel="nofollow" または rel="sponsored" 属性を追加すると、特にアフィリエイトリンクの場合、リンクエクイティを管理するのに役立ちます。
• アイコンを使用すると、ユーザーがサードパーティのリンクを特定しやすくなり、サイトがより信頼できると感じられれば、直帰率を減らすことができます。

そのため、アイコンはランキング要因ではありませんが、アイコンがサポートするユーザー行動は、エンゲージメントの向上に貢献する可能性があります。

外部リンクにアイコンを追加すると、ウェブサイトの速度が低下しますか？

必ずしもそうではありません。WP External Linksのような軽量プラグインを使用している場合や、CSSでアイコンを追加している場合は、パフォーマンスへの影響は最小限です。いくつか注意すべき点があります。

• 大きすぎる、または最適化されていない画像のアイコンの使用は避けてください。代わりにSVGやFont Awesomeのようなアイコンフォントを使用してください。
• 単一の外部リンクアイコンのためだけに、アイコンライブラリ全体を読み込まないでください。それはやりすぎです。
• 複数の機能を持つプラグイン（リンク監視、リダイレクトなど）は重くなる可能性があるため、速度が懸念される場合は、リンクアイコンに特化したものを選んでください。

これらのヒントはすべて、外部リンクアイコンがサイトの速度に影響を与えないようにするのに役立ちます。

すべての外部リンクに外部リンクアイコンを表示すべきですか？

必ずしもそうではありません。次のような場合、アイコンをスキップしたい場合があります。

• メニューやフッターなど、スペースが限られている場所
• ソーシャルメディアアイコンなど、すでに明白な場所
• アイコンがサイトのデザインと一致しない場合

多くのプラグインでは、クラスやドメイン名を使用して特定のリンクを除外できます。たとえば、YouTubeや自社のブランドパートナーへのリンクを除外し、残りのリンクにはアイコンを表示することができます。すべては文脈次第です。ユーザーエクスペリエンスを明確にするのに役立つ場所にアイコンを使用してください。

この記事が、WordPressサイトに外部リンクアイコンを追加する方法を学ぶのに役立ったことを願っています。また、効果的なWordPressウェブサイトの主要なデザイン要素に関する完全なガイドや、WordPress向けのベストドラッグアンドドロップページビルダーの専門家による選択肢も参照できます。

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