問題 × 解決策

外部サイトにリンクしているaタグにアイコンを付けたい

問題

外部にリンクしているaタグにアイコンを付けたい。

解決策

外部サイトへのリンクに対してjQueryで「target=“_blank”」を設定し、cssでa[target=“_blank”]に対してアイコンを設定する。

 

外部サイトへのリンクを判定し、自動的にアイコンを設定する。

外部サイトにリンクした際に、自動的にアイコンを付けさせる方法を紹介します。今回はjQueryを連携させたパターンになります。

 

jQueryの構築

まず、aタグの外部サイトへのリンクを判定し、「target=“_blank”」を付与させるjQueryを構築します。

$(function(){
	var url = location.hostname;
	$('a[href^="http"]').not('[href*="'+url+'"]').attr('target','_blank’);
});

CSSの構築

次に、「target=“_blank”」が設定されているaタグに対して、cssを設定します。

a[target="_blank"]:after{
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background-image: url(../images/common/anchor-blank.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 20px auto;
}

DEMOはこちら

例:Googleはこちら

コメント

コメントを残す

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

7 + eleven =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧