画像の引用が多いサイトで使える便利なコードを紹介します。

たった1行で、画像のリンク切れを回避できる jQuery のコードです。

画像が読み込まれないときに代替画像を表示

<head>〜</head> 内に以下を記述します。

$('img').error(function() {
	 $(this).attr('src',‘thumbnail.png’);
});

これでドキュメント内の <img> タグをすべて参照し、エラー(リンク切れ)があった場合には src に任意の画像を挿入してくれます。

画像が読み込まれないときにimg要素を削除

次は読み込まれない画像のimgタグそのものを非表示(削除)してしまう方法です。

$('img').error(function() {
	$(this).remove();
});

あくまでも応急処置的なテクニックです。例えばサイトをWordPressベースで構築しているのであれば、プラグインの[Broken Link Checker]などと組み合わせれば、『リンク切れ』に対して万全の体制を整えられます。

Broken Link Checker

Broken Link Checker

こちらが[Broken Link Checker]へのリンクです。

Plugin Directory : Broken Link Checker

[Broken Link Checker]のインストール

最も簡単に[Broken Link Checker]を導入するには、管理画面(ダッシュボード)の左側にあるメニュー「プラグイン」→「新規追加」からインストールする方法をオススメします。

右上に「プラグインの検索」という検索フォームがあるので、ここに「Broken Link Checker」と入力すると対象のプラグインが表示されます。