【.htaccess】で簡単！
オリジナル404ページを表示する方法

サイト上で存在しないURLにアクセスがあった場合に出る「404エラーページ」。

通常は、レンタルサーバーの用意した404エラーページや、「Not Found」などと書かれた無機質なエラーページが表示されます。

「404エラーページ」が表示されるのは、ユーザーがURLを打ち間違えている場合や、サイト運営者がページファイルの場所を変更してURLが変わっていたり、ページを削除した場合などが考えられます。

どちらにせよ「404エラーページ」が表示される時は迷子状態なので、情報を探す手がかりもない場合は「戻る」ボタンで引き返す他ありません。

もし「404エラーページ」に検索ツールやHOMEへのリンク、カテゴリー一覧などの手がかりになりそうな情報があれば、目に止めてくれる可能性もありますよね。

ここでは、「.htaccessファイル」を使って、オリジナルの「404エラーページ」を表示する方法をまとめています。

オリジナル404ページを表示するには

オリジナルの404ページの内容を作ったら、404エラーが発生した時にオリジナルの404ページが表示されるように、「.htaccessファイル」で設定していきます。

テキストエディタを開き、以下を記述して「.htaccess」と名前をつけて保存します。

ErrorDocument 404 /404.html

「404リダイレクト」と呼ばれるもので、404エラーが発生したときに指定されたページを表示できます。 ここでは「404.html」を指定しています。

「ErrorDocument□404□/404.html」と、□の位置に半角スペースがある点に注意しましょう。

ファイルを保存したら、「.htaccessファイル」をサーバーの「ルートディレクトリ（ドメイン直下）」にアップロードします。

すでに「.htaccessファイル」を使っている場合は、追記して保存したものをアップロードしましょう。

用意しておいたオリジナルの404ページも、同じ階層にアップロードします。

これで、404エラーが発生した時に、オリジナルの404ページを表示することが出来ます。

簡単ですね！

作業は以上で完了ですが、ちょっと変則的な例として、「.htaccessファイル」と404ページを「違う階層に」置くこともできます。

その場合は、表示したい404ページを、「.htaccessファイル」から見た相対パスで指定します。

たとえば「.htaccessファイル」と 同階層にある「test」フォルダに404ページを格納している場合は、以下のように指定します。

ErrorDocument 404 /test/404.html

ローカル環境でのテストについて

また、xammpなどを使ってローカル環境でページテストを行う場合は、本番のオンライン環境とは違った挙動になる事があります。

xammp上で404エラーを発生させて自作の404ページへ移動させようとしても、簡素なエラーページしか表示されない、といった場合です。

ただし、404リダイレクトを設定してる場合には、微妙に表示に変化があるので、有効になっているかどうかの目安になります。

404リダイレクトを指定しない場合の表示
エラーページ：Object not found!

404リダイレクトを指定した.htaccessを設置した場合の表示
エラーページ：Not Found

ローカル環境でオリジナルの404ページに移動しない場合でも、404リダイレクトの指定が正確であれば、本番のサーバー環境ではオリジナルの404ページが表示されます。

404リダイレクトを設定した場合は、必ずサイト内の「存在しないURL」にアクセスにして、オリジナルの404ページが表示されるか確認してみましょう。

「.htaccessファイル」で正しく404ページを指定できていれば、「404.html」にリダイレクトされます。

.htaccessでオリジナル
404ページを表示するのは簡単！

ここまで、オリジナルの404ページを表示するために、「.htaccessファイル」での404リダイレクトの書き方を見てきました。

わずか1行の設定なので、カンタンですね！

オリジナルの「404エラーページ」には、HOMEへのリンクや検索ツールなどを配置して、ユーザビリティを高めてみましょう！