【WordPress対応】CSSで外部リンクアイコンを一括追加する方法｜SVG活用で簡単に設定

外部リンクアイコンをCSSで一括表示するメリット
1. 手作業で挿入するより効率的
  1. リンクの信頼性・ユーザビリティが向上
  2. WordPressやCMSでも使い回せる
CSSで外部リンクアイコンを一括追加する基本コード
内部リンクを除外して外部リンクだけにアイコンを付けるコード例
1. ポイント解説
WordPressで使うときの例
さらに限定する場合（外部リンク＋新規タブのみ）
【まとめ】CSSで外部リンクアイコンを一括管理して効率化しよう

外部リンクアイコンをCSSで一括表示するメリット

外部リンクにアイコンを付けると、「このリンクは別サイトへ移動するものだ」とユーザーに直感的に伝えられます。
特にブログ記事や企業サイトでは、内部リンクと外部リンクを区別することで ユーザビリティの向上 に繋がります。

手作業で挿入するより効率的

記事ごとに <img> タグやアイコンフォントやclassを手動で追加すると、作業の手間がかかる上に管理も大変です。
CSSで一括指定すれば、a[href^="http"] のように外部リンクだけをターゲットにできるため、コーディングの効率化 が実現できます。

リンクの信頼性・ユーザビリティが向上

外部サイトに移動することが事前に分かれば、ユーザーは安心してクリックできます。
また、業界的にも「外部リンクにはアイコンを付ける」ことは一般的になりつつあり、サイト全体の信頼性や使いやすさに直結します。

WordPressやCMSでも使い回せる

一度CSSを設定しておけば、WordPressやMovableTypeなどのCMSでも自動的に全ページに適用できます。
記事作成時に余計な操作をしなくても、常に同じデザインの外部リンクアイコン を維持でき、デザインの統一感を保てます。

CSSで外部リンクアイコンを一括追加する基本コード

ここでは CSS の疑似要素 + 無料アイコン（SVGやPNG） を使った方法を紹介します。

1.無料アイコンの準備

外部リンク用アイコンは Font Awesome や Heroicons などで 商用利用可能なSVG をダウンロードして使うのがおすすめです。
例：external-link.svg を /images/ フォルダに保存したとします。

2.CSSで一括追加する方法

/* 外部リンク（新しいタブで開くリンク）にアイコンを付与 */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 14px;   /* アイコンのサイズ */
  height: 14px;
  margin-left: 4px; /* テキストとの余白 */
  background: url("/images/external-link.svg") no-repeat center center;
  background-size: contain;
}

3.ポイント

a[target="_blank"] に限定しているので、外部リンクで新規タブが開くリンクだけにアイコンが付与されます。
content: "" で疑似要素を作り、background に画像を設定しています。
サイズは width height で自由に調整できます。

4.応用（内部リンクと区別する場合）

内部リンク（同一ドメイン）は除外したい場合、rel="noopener" を付けたリンクだけにする方法もアリです。

a[target="_blank"][rel~="noopener"]::after {
  /* 同じくアイコンを付与 */
}

内部リンクを除外して外部リンクだけにアイコンを付けるコード例

/* 自分のドメイン以外のリンクにアイコンを付ける */
a[href^="http"]:not([href*="yourdomain.com"])::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: url("/images/external-link.svg") no-repeat center center;
  background-size: contain;
}

ポイント解説

a[href^="http"] → 「http」から始まるリンク（外部URLも内部URLも含む）を対象。
:not([href*="yourdomain.com"]) → 自分のドメインを含むリンクを除外。
::after で擬似要素を作り、アイコンを付与。

WordPressで使うときの例

WordPressなら yourdomain.com を自分のサイトURLに置き換えます。
例えば、サイトURLが example.com なら：

a[href^="http"]:not([href*="example.com"])::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: url("/images/external-link.svg") no-repeat center center;
  background-size: contain;
}

さらに限定する場合（外部リンク＋新規タブのみ）

外部リンクかつ target=”_blank”」に限定したい場合は：

a[target="_blank"][href^="http"]:not([href*="example.com"])::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 4px;
  background: url("/images/external-link.svg") no-repeat center center;
  background-size: contain;
}

こうして「外部リンクだけに限定」できれば、内部リンクには余計なアイコンが付かず、デザインの統一感を保てます。