<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/07/404error.jpg" alt="jQueryプラグイン" title="404error" width="514" height="204" class="aligncenter size-full wp-image-15449" /></p>
<p>「サイトで紹介していたリンク先のページが、いつのまにやら404エラーになってしまっていた。」</p>
<p>そういったことはよくあることですよね。このようなリンク切れは、管理が大変な上に、訪問者にとっても迷惑この上ないものです。（すみませんm(_"_)m）</p>
<p>今回ご紹介するのは、そういったリンク切れのページへ遷移する前に、サイト内で404エラーを通知してくれるjQueryプラグインです。</p>
<!--more-->
<h3 class='header-label'>404エラー（リンク切れ）を事前に教えてくれるjQueryプラグイン</h3>
<p>「<a class='web-site-link' href="http://addyosmani.com/blog/catch404/" onclick="window.open('http://addyosmani.com/blog/catch404/'); return false;">Catch404</a>」は、<strong>リンク切れしてしまったリンクをクリックすると、その場で吹出しをポップアップさせて教えてくれるjQuery プラグイン。</strong></p>
<p>サイト訪問者にとって迷惑な、リンク切れページへの遷移を自サイト内でとどめてくれる、ユーザビリティ向上ツールです。</p>
<h4 class='tips'>飛び先ページのリンク切れをポップアップで通知</h4>
<p><img src="http://web-marketing.zako.org/images/2010/07/Catch404-1.png" alt="404エラーをポップアップ通知" title="Catch404-1" width="400" height="172" class="aligncenter size-full wp-image-15552" /><br />↑リンク先のページが404エラーでも、エラー画面に遷移する前に教えてくれます。</p>
<p><a href="test/catch404/catch404.html" target="_blank">サンプルを試してみたい方はこちらへどうぞ。</a></p>
<p>ポップアップのメッセージは、下記のようなソース部分を編集することで、自由に変えることができます。</p>
<textarea name="code" class="xhtml" id="code">
<div id="404message" class="popup_block"> 
	
    <h2>404 エラー</h2> 
    <br>
    <p>ごめんなさい、リンク先のページがなくなってしまったようです。よろしければ、 <a class="alta" href="">こちらのフォーム</a>から教えてください。</p>
	<br />
    
</div>
</textarea>

<p>試してみたい方は、<a class='web-site-link' href="http://addyosmani.com/blog/catch404/" target="_blank">Catch404</a>のページからソースをダウンロードしてご利用ください。（※jQueryをすでにお使いの場合、バージョンによっては動作しませんのでご了承ください。）</p>
<p>WordPressのプラグインにも、リンク切れを通知してくれるものはあるのですが、なにせサーバー負荷がハンパないのです。</p>
<p>以前に使っていたときは、それがサーバーエラーの原因のひとつになってしまいました。</p>
<p>そういったことからも、jQueryで、サーバーに負荷をかけることなく、ユーザビリティを上げられるのは嬉しいですね。</p>


