外部リンクに自動でアイコンを付与2009-01-08

WordPress のテーマファイルをちょこちょこいじって、外部向けリンク (正確には、target="_blank" を付けたリンク) に、自動でアイコンが付くようにしてみました。
おそらく他のサイトなどでも紹介されているであろうテクニックですが、OTCHY.NET で採用した方法を簡単に説明してみます。

下記は、WordPress を前提として書いていますが、その他の CMS や通常のウェブサイトであっても、css や html、JavaScript が自由になるのであればどこでも設定可能です。

用意するもの

• jQuery
• WordPress のテーマを編集する知識
• ファイルをアップロードする知識

アイコン画像を用意する

任意のアイコン画像を用意して下さい。どんな背景であってもある程度見栄えをよくするためには、透過 GIF などが良いでしょう。
Otchy は、フリーで公開されているアイコンを少し修正して使いました。OTCHY.NET で使っているアイコンをそのまま持っていっても構いません。

JavaScript ファイルの準備

まず、jQuery の本体をダウンロードしてきて、jquery.js にリネームします。
リネームするかは任意ですが、将来のバージョンアップの際にファイルだけ差し替えれば済むように、リネームしておく事をお勧めします。

アイコン画像用のクラスを追加するスクリプトを common.js という名前で作成します。もちろんこのファイル名も任意です。

$(function() {
    $('a[target=_blank]').addClass('blank');
});

WordPress テーマの編集

アイコンを指定するためのスタイルを、CSS ファイルに追加します。
アイコン画像のファイル名やパスは任意ですが、画像ファイルのパスは css ファイルからの相対指定となる事に注意して下さい。
Otchy は同じテーマディレクトリの中に画像も一緒に置いています。

WordPress の場合、テーマごとのスタイルは、style.css となっているのでこのファイルに以下の記述を追加します。
padding-right の値は、使用するアイコン画像の横幅に合わせて適宜調整して下さい。

a.blank {
    background: url(images/blank.gif) no-repeat top right;
    padding-right: 14px;
}

次に、作成した JavaScript を読み込むための記述を追加します。
header.php を編集し、作成した 2 つの JavaScirpt ファイルにパスを通します。
js ファイルをアップロードした場所と整合性を取るように、script タグを追加して下さい。

Otchy の場合、js ファイルはドメイン直下の js ディレクトリに保存するため下記のような記述になります。

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/common.js"></script>

用意したファイルのアップロード

あとは、作成した各ファイルをアップロードすれば完了です。
追加した記述はわずか 9 行。これだけで、全てのページの外部リンクに自動でアイコンがつくようになります。

便宜上「外部リンク」という言葉を使っていますが、冒頭にも書いたように target="_blank" となっているリンクが対象なので、外部サイトへリンクする際は、target="_blank" とするのを忘れないようにして下さい。

うまく動いていないと思われる場合は、各種ファイルのパスの指定が間違っていないか再確認すると良いでしょう。

簡単な解説

大まかに言って、css でアイコンを指定する部分と、jQuery によって必要なクラスを追加する部分に分ける事が出来ます。

css による指定では、a タグの右側にアイコン画像分の幅を空け、アイコン画像は背景画像として右寄りに指定しているのがポイントです。

jQuery による指定では、html 内の a タグのうち、target="_blank" となっているものを対象として、css で設定したクラスを追加しています。

これだけの処理を簡単に書く事が出来るのは、jQuery の力によるところが大きいですね。