The current article

外部リンクにtarget=”_blank”とclassを付与するjQueryで別窓アイコンを付ける

サイト内の外部リンクは別窓で表示して、横に別窓で表示的なアイコンを付けるjQueryとCSSです。
すでに書いている記事の中から、外部リンクを探してtarget=_blankやアイコンを追加するのは大変だと思った時などにも使ってみてはいかがでしょうか。

capture

まず、jQuery本体を読み込ませます。
次に、外部リンクにtarget=_blankとアイコンを表示するためのCSSのクラス名を付与して、自サイトには付けない処理を記述します。

記述例。

<html>
  <head>
 ・
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  
  jQuery(document).ready(function(){
    jQuery('a[href^=http]')
    .not('[href*="'+location.hostname+'"]')
    .attr({target:"_blank"})
    .addClass("ex_link")
  ;})  
</script>
 ・
 ・
  </head>
  <body>
  ・
  ・
  ・
簡単な説明ですが
9行目で、自サイトのURLなら除外
10行目で、target=_blankを付与
11行目で、クラス名を付与(ex_linkは変更可)
となります。
(アイコンを付けない場合は11行目を削除してOKです)

上記を適応すると、外部リンクが

<a href="http://sample.net/">http://sample.net/</a>
   ↓  ↓  ↓
<a href="http://sample.net/" class="ex_link" target="_blank">http://sample.net/</a>
のように書き換わります。
※すでにtarget=_blankの指定がある場合は、クラス名のみ付与されます。

次に、外部リンクの横に別窓で表示的なアイコンを付けるための記述をしてあげます。
classにex_linkと記述されていますので、CSS側に

a.ex_link {
    background: url("images/blank_icon.png") no-repeat right 0;
    padding-right: 20px;
}
のように、リンクを示す画像を表示する記述をして、画像をサーバーにアップしてください。

以上でサイト内の外部リンクは別窓で開き、リンクの横にアイコンが表示されるようになりました。
必要に応じて使ってみて下さい。


Category

Service

Guidance

Salutation

WPCは大阪を中心に、ホームページ制作、リニューアル、コーディング、更新業務、各種印刷物制作、スキルアップ出張講習・セミナー等取り扱っております。
どこの会社に作成を依頼しようかとお悩みの方、リニューアルしたいんだけど良いプランはないかなとお探しの方、本格派のデザイナーにデザインを依頼したい、 コーディングだけ頼みたい、更新だけ頼みたい、パソコンやソフトの使い方を教えて欲しいなど、どんな事でもWPCまでお気軽にご相談ください。