404 エラーページを作る

404 エラーページを作る

Posted at January 18,2006 11:55 PM
Tag:[404, ErrorDocument, htaccess]

404エラーのページスクリーンショットのように、指定したURLが存在しない場合等にしばしば表示されるエラーページですが、「ErrorDocument ディレクティブ」というものを利用することでオリジナルのエラーページを表示することができるようになります。

エラーページに関するご質問を頂きましたので、本エントリーにて設定方法をご紹介致します。とりあえず確認の意味も含めて当サイトもエラーページを作ってみました。

1.エラー表示用のHTMLファイルを作る

任意のエディタで、「404.html」のファイル名でHTMLファイルを作成し、index.html が置かれているディレクトリへアップロードします。

Movable Type の場合
プロフィールのページを作るを利用して作るとブログと同じようなデザインのファイルを簡単に作れます。ダイナミックパブリッシングをご利用であれば、システムテンプレートの「ダイナミックページ・エラー」が該当しますので、これを編集すれば以下の項目は全て不要です。
WordPress の場合
ご利用のテーマに「404 Not Found(404.php)」が含まれていれば、それをテーマエディタで編集するだけで、下記の設定は全て不要です。含まれていない場合は、index.php を 404.php というファイル名でコピーし、あとはテーマエディタでお好きな内容に変更しましょう。

設定後、ブラウザからこのファイルのURLを入力し、正常に表示されることを確認しましょう。

2..htaccess を作る

.htaccess は特殊なファイルで、指定したURLが存在しない場合にエラーページへジャンプさせるための設定を行います。

まず任意のエディタで下記の内容をコピーしてください。そしてこれを「.htaccess」という名前で保存します。Windows の場合、エクスプローラ上でこの特殊な名前に変更することはできませんので、ご注意ください。
また自宅サーバの方は .htaccess ではなく httpd.conf を開いて下記の設定を追加します(追加後、Apache の再起動をお忘れなく)。

ErrorDocument 404 /404.html

ErrorDocument ディレクティブの説明は下記にあります。

Apache HTTP サーバErrorDocument ディレクティブ

行末の /404.html は相対パス(この書き方)または http 指定が可能です。/404.html としているのは .htaccess と同じディレクトリに配置するのでこのような設定にしています。エラー用ファイルを他のディレクトリに配置する場合は、ディレクトリ名をファイルの前に追加します。
なお初めて .htaccess を作る場合はこの1行しかありませんので、行末で必ず改行を入力してください。

3..htaccess をアップロードする

作成した .htaccess を index.html が置かれているディレクトリへアップロードします。
パーミッションによって正常に動作しない場合があるようです。現在利用しているさくらインターネットでは「644」でOKでした。ロリポップは「604」のようです。

アップロードと同時にこの機能が動作しますので、存在しないURLをブラウザで指定して1項で作成したファイルが表示されることを確認してください。また index.html 等の存在するファイルも正常に表示されることを確認してください。
正常に動作しない場合は一旦ファイルを削除しましょう。

4.注意事項

サイト検索でみつけた内容を引用しておきます。
ロリポップ!レンタルサーバー - エラーページの変更では「エラーページで画像を使用する場合には、「 http://から始まるURL 」 で表示を行ってください」と書かれていました。これは「ErrorDocumentは、エラー発生時のページを基点にエラーページ表示を行なう」ためのようです。JavaScript や CSS を参照する場合も同様です。
また「404エラーページに限り?(中略)?ページの容量が1Kバイトを超えるように、ファイルを作ってください」ということです。 このことは先のErrorDocument ディレクティブにも「一般的にはエラーの文書を 512 バイトよりも多きくすると、MSIE は サーバが生成したエラーを隠さずに表示します」とあります。

5.その他のエラーも追加する

上記は404(指定したURLが存在しない)の場合のみの説明でしたが、401(認証エラー)/403(パーミッション異常)/500(CGIエラー等)のエラーも下記のような設定を追加することで表示することができます(当サイトでは404のみ)。

ErrorDocument 401 /401.html
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

この場合も行末では必ず改行を入力してください。

2007.02.25 追記
Movable Type ダイナミックパブリッシング・WordPress についての記述を追加しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

404Not Found作成 from GET CR@ZY
 一昨日から@niftyでホスティングサービスを始めたのにどこにも取り上げられて... [続きを読む]

Tracked on January 19, 2006 7:01 PM

エラーページを作りました from SWEET WATER Web Server
新しいOSでサーバーを立てた際、味気ないエラーページを表示するのは止めようと思っていました。しかし、ブログのカスタマイズにはまってしまい、後回しにし続けて... [続きを読む]

Tracked on January 23, 2006 9:19 PM

エラーページを自分の好きなデザインに設定する方法 from CSS Lecture
上記画像のようなページを一度は見た事はあると思うんですが、.htaccess を使うことでオリジナルのエラーページへリダイレクト出来るので、このページも... [続きを読む]

Tracked on September 11, 2008 12:45 PM
コメント

こんにちは。お久しぶりです・・・
と言うか、明けましておめでとうございます!
今年もお世話になると思いますので、よろしくお願いします

このエラーページなんですが、うちも以前から作ろうと思っていながら、毎回後回しにしてすっかり忘れていました^^;
現在はこちらのスクリーンショットのように表示するよう設定していますが、真っ白で味気ないしApacheのバージョンを出したまま・・・なので、今回は忘れないうちに作ってみようと思います^^

[1] Posted by WIND : January 20, 2006 2:08 PM

>WINDさん
こんばんは。
こちらこそお世話になります。
今年もどうぞよろしくお願い致します。
コメントありがとうございます。

私もようやく着手した次第です(笑)。

[2] Posted by yujiro : January 21, 2006 2:38 AM

いつもお世話になっております。何度調整しても画像だけが表示しません。401エラーを表示させたいのですがロリポップで確認すると相対パスでないとだめのようです。現在、ErrorDocument 401 /error/401.htmlのように.htaccessファイルに書き込みしています。パーミションも確認しました。画像の相対パスはどの部分に追記すればいいのでしょうか?HTMLファイルの絶対パスで直接確認すると画像は表示しております。お手数おかけしますがサポートの程宜しくお願いします。

[3] Posted by panser : January 25, 2006 3:33 AM

>panserさん
こんにちは。
自宅サーバで認証の設定がうまくできず確認が遅れています。すいません。
それとは別に、401.html の中で画像を表示するタグの内容(src="xxx")を教えてください。

以上です。
それではよろしくお願い致します。

[4] Posted by yujiro : January 27, 2006 11:25 AM

お世話になります。
WEBサイトに.htaccessをいて、カスタマイズしたNOT FOUNDページにリダイレクトさせています。
これからやりたいこととして、上記リダイレクトに加えて、NOT FOUNDページを表示した訪問者がいた場合、その訪問者がどのURLでエラーとなったか、を管理者にメールで通知する仕組みを作りたいのですが、可能でしょうか?
出来れば、個別のブログの範囲内にとどまらず、MTを使って作成していない通常のWEBページまで含めてチェックできる仕組みにしたいと考えています。

よいアイデアがあれば、ご紹介ください。

どうぞよろしくお願い致します。

[5] Posted by 中村ミノル : March 29, 2009 10:08 AM

>中村ミノルさん
こんにちは。
ご質問の件について、申し訳ありませんがこちらでは適切なアイデアが思いつきません。
ただ、NOT FOUNDページを表示したときに、そのページにscript要素を埋め込み、src属性に(ご質問の仕組みを実装した)CGIのパスを記述しておけば、CGIでHTTP環境変数を取得したり、メールを送信することで、ご要望の動作ができるのではないでしょうか。
それではよろしくお願い致します。

[6] Posted by yujiro logo : April 5, 2009 3:37 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)