Webサイトを運営していると、外部リンクをクリックした際に新しいタブで開くように設定することがあります。
しかし、ユーザーにとってはリンクが外部サイトかどうかが分かりづらいことも。
そこで、target="_blank" を指定したリンクにだけスタイルを適用し、外部リンクであることを視覚的に示す方法をご紹介します。
もくじ
なぜ外部リンクを区別するのか？
- ユーザー体験の向上：外部リンクであることが明確になると、ユーザーはクリック前に遷移先を予測しやすくなります。
- セキュリティ意識の向上：外部サイトへの遷移を明示することで、ユーザーのセキュリティ意識を高めることができます。
- デザインの一貫性：内部リンクと外部リンクを視覚的に区別することで、サイト全体のデザインが整理されます。
実際のHTML例
<a href="https://example.com" target="_blank">外部リンク</a>この例では、「外部リンク」は指定したスタイルが適用され、「内部リンク」には適用されません。
target="_blank" のリンクに外部リンクアイコンを背景画像で追加
以下のCSSを使用することで、target="_blank" を指定したリンクにのみスタイルを適用できます。
より明確に外部リンクを示すために、アイコン表示がおすすめです。
まず、アイコン画像（SVGやPNGなど）を用意します。
例：アイコンURL → https://example.com/img/external-link-icon.svg
a[target="_blank"] {
position: relative;
padding-right: 16px; /* アイコン分の余白を確保 */
}
a[target="_blank"]::after {
content: "";
display: inline-block;
background-image: url('img/external-link-icon.svg');
background-repeat: no-repeat;
background-size: contain;
width: 12px;
height: 12px;
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}ポイント
padding-rightでテキストとアイコンが被らないよう調整:afterのposition: absoluteを使ってアイコンをテキストの右端にピタッと表示- 画像サイズや位置は必要に応じて微調整OK！
注意点
- 画像URLは自分のサーバーにアップしたアイコン画像に変更
- PNG・SVGどちらも使えるけど、SVGだと拡大縮小してもキレイだからおすすめです◎
まとめ
target="_blank" を指定したリンクにのみスタイルを適用することで、外部リンクを視覚的に区別し、ユーザー体験を向上させることができます。
シンプルなCSSの追加で実現可能なので、ぜひご自身のサイトにも取り入れてみてください。