小粋空間  -  a cheap joke and a play on words site

404 エラーページを作る

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

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

１．エラー表示用のHTMLファイルを作る

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

Movable Type の場合

プロフィールのページを作るを利用して作るとブログと同じようなデザインのファイルを簡単に作れます。ダイナミックパブリッシングをご利用であれば、システムテンプレートの「ダイナミックページ・エラー」が該当しますので、これを編集すれば以下の項目は全て不要です。

WordPress の場合

ご利用のテーマに「404 Not Found（404.php）」が含まれていれば、それをテーマエディタで編集するだけで、下記の設定は全て不要です。含まれていない場合は、index.php を 404.php というファイル名でコピーし、あとはテーマエディタでお好きな内容に変更しましょう。

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

２．.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行しかありませんので、行末で必ず改行を入力してください。

３．.htaccess をアップロードする

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

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

４．注意事項

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

５．その他のエラーも追加する

上記は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 についての記述を追加しました。