CSSとたった１行のjQueryで自動的に外部リンクを判断してアイコン画像をつけられたら
とても便利だと思いませんか？

今回はその方法をご紹介します！

１、CSSで外部リンクを判断する

1−1、HTMLを記述する

まずはHTMLを記述します。
外部リンクになっている画像にアイコンをつけない設定もしますので、
画像のリンクも表示させます。

【HTML】

Default

<div class="sample"> <p>これはサンプルテキストです。CHANGEUP!の運営会社は<a href="http://www.unitedwill.jp/" target="_blank">株式会社ユナイテッドウィル</a>です</p> <a href="http://www.unitedwill.jp/" target="_blank"><img src="https://changeup.tech/wp-content/themes/changeup/img/unitedwill.jpg"></a> </div>

1 2 3 4

これはサンプルテキストです。CHANGEUP!の運営会社は株式会社ユナイテッドウィルです

外部リンク表示したいリンクのaタグにtarget=”_blank”をつけて記述します。

1-2、アイコン画像を選定する

外部リンクを示すアイコン画像を用意します。
Photoshopなどで自作しても良いですが、
商用フリーで配布されている素材もたくさんありますので、そちらを使用しても良いでしょう。

CHANGEUP！では以下のサイトからアイコンを使用させていただきました。
デザインもカラーも豊富なので、サイトに合ったものが見つけやすいです。

100 External Link Icons (PNG, PSD)

CSSを記述する

次にCSSを記述します。

【CSS】

セレクタに属性と値を指定することで、
“sampleというクラスの中にあるaタグの、taeget=”_blank”がついているセレクタ”を指定することができます。

paddingはリンクの文字からアイコンをどのくらい離して表示するかなので、
数値はご自由に設定していただいて大丈夫です。

1-4、画像の外部リンクにアイコンを表示させないようにする

テキストの外部リンクとは別に、
サイトのサムネ画像に外部リンクをつけたりする場合もありますよね。

この場合、画像の横に外部リンクのアイコンがついてしまいます。

これを解決するには、jQueryでimgタグのついたセレクタに新しくCSSを付与して、
付与したCSSにアイコンをつけない設定をすれば解決します。

【jQuery】

一つずつ説明すると…

【 $(‘.sample’) 】sampleというクラスの中の
【 find(‘img’) 】imgタグを探してください。
【 parent(‘a’) 】親要素はaです。
【 addClass(‘no_icon’) 】対象のセレクタが見つかったら、aタグにno_iconというcssを付与してください。

ということになります。

あとは”no_icon”にアイコンを表示しないスタイルを記述すれば完了です。

【CSS】

【結果】

簡単なCSSとjQueryで、リンクが外部リンクか内部リンクかを判断して
アイコンをつけられるようになりました。

もしこの方法で記事以外のメニュー部分などにアイコンがついてしまった場合は、
記事部分のセレクタを詳細に指定してあげたりして、対処してください。