外部リンクに矢印アイコンを付けてユーザーに分かりやすくしよう

あなたのサイトでは外部リンクに、それが外部リンクであることがユーザーにすぐ理解できるようになっていますか？「内部リンクだと思ったら外部リンクだった。」という経験はあなたにもあると思います。ユーザーに外部リンクであることが容易に分かるようにする方法として挙げられるのが矢印アイコンを付けるということです。

大手のサイトでは結構採用されていますが、当サイトでも採用しており、例としては下記のようなものです。
Amazon のページへ

テキストリンクの右側にアイコンが表示されていますよね！外部リンクの時のみ自動でアイコンが付くように設定をしてあります。ユーザーにとってより分かりやすく親切なサイトにしたいとお考えであれば、このようにアイコンを付けてみてはいかがでしょうか？

プラグインで簡単設置

WordPress であれば簡単にアイコンを付けることができるプラグインもあります。有名なもので私も使ったことがあるのが『WP External Links』です。

プラグインをインストールして有効化したらメニュー項目に追加されたExternal Linksから設定を行います。と言っても［Choose icon type］の部分を好きなアイコンに変更する程度の設定です。

用意されているアイコンの種類もたくさんありますし、記号から選択することも可能です。

プラグインを使わないで設置

もし手軽に設置したいのであればプラグインをお使いになれば良いのですが、プラグインは様々なものを使うとページの表示速度が遅くなる原因にもなります。可能な限りプラグインを使用したくないのであれば、プラグインを使わないで WordPress の function.php と css をカスタマイズして設置することも可能です。

functions.php のカスタマイズ

まずは WordPress テーマ内にある functions.php に下記コードを追加してください。

// 外部リンクにアイコンを付ける
add_filter( 'the_content', 'add_external_content', 12 );
function add_external_content( $content ) {
$add_img = 0; // img（画像での外部リンク）にもアイコン付ける場合は 1 付けない場合は 0
preg_match_all( "/<a[^>]+?href[^>]+?>/i", $content, $link_array );

$my_url = preg_quote( rtrim( get_bloginfo("url"), "/" ) . "/", "/" );

foreach( array_unique( $link_array[0] ) as $link ) {
$replaced = $link;

if( !preg_match( "/href=['|\"]?\s*?${my_url}[^>]+?['|\"]/i", $link ) ) {
$replaced = str_replace( ">", " class=\"external ext_icon\">", $replaced );
$content = str_replace( $link, $replaced, $content );
if( !$add_img ) {
// img の時はアイコン消す（class="external" は残す）
$content = preg_replace(
"/(<a[^>]+?href[^>]+?external) ext_icon([^>]+?>\s*?<\s*?img[^>]+?src[^>]+?>\s*?<\/a>)/is",
"$1$2",
$content
);
}
}
}
return $content;
}

CSS のカスタマイズ

CSS に下記のコードを追加します。アイコンのまでのパス（URL）は環境に合わせて変更してください。

a.ext_icon {
background: url(http://www.example.com/images/link-out.png) center right no-repeat;
padding-right: 13px;
}

（functions.php 及び CSS のコードは thk.kanzae.net さんを参考にさせて頂きました。）

アイコンはご自身でご用意して頂いたものをお使いになってもOKですし、もし用意できないのであれば下図をお使いください。

（アイコンは 右クリック＞名前を付けて保存 でPCにダウンロードしてご使用ください。）

カスタマイズといってもかなり簡単に設置ができますね！ぜひお試しください。