jQuery で外部リンクにアイコン付けたり別ウィンドウで開いたり

Pocket

こんにちは、鈴木です。

TECHSCORE Advent Calendar 2014 の 2 日目の記事です。

外部サイトへのリンクの横に「別ウィンドウで開きますよ」的なアイコンが付いているサイトって結構多いですよね。リンクを押すと別ウィンドウで開くアレです。

external-link

こんなやつ

これを実現するために全力で頑張っても良いのですが、できることなら簡単な方法があると嬉しいですよね。

 

jQuery と CSS で実現する方法

jQuery と CSS を組み合わせて、ある程度楽に実現することができます。

以下の JavaScript を見てください。

href 属性を持つ a 要素について繰り返し、href の値が「# で始まる」 or 「/ で始まる」 or 「ドメインが location.hostname に一致する」かどうかを判定しています。一致しない場合は別ウィンドウで開くために target="_blank" を追加し、CSS のクラスとして「external」を付けています。

ここでは「$("a[href]")」として全ての <a> を対象としていますが、必要に応じて条件は変更してください。

次に CSS でクラスが「external」のものにアイコンを付けるようにします。

左パディング(padding-left)を行い、背景(background)に BASE64 でエンコードした画像を指定する、という具合です(アイコンはリンクの左に付けるか右に付けるかは好みが分かれるでしょう)。

 

これで「外部サイトへのリンクはアイコンを付けて別ウィンドウで開く」ということが簡単に実現できました。

 

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です