[ 通常表示 ]  [ 簡易表示 ]  [ シンプル表示 ]

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典イメージぴよ画像「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

カスタム404ページ

pointこの用語のポイント

pointホームページで「そんなページ無いよ」エラーのときに表示するページだよ

point自分で作ったエラーページだよ

スポンサーリンク

簡単に書くよ

カスタム404ページとは

自分で用意した、404エラーのときに表示するエラーページのこと
です。

image piyo

詳しく書くよ

404エラー」は「ホームページを見てるときに出てくるエラーで『そんなページ無いよ』なエラー」ね。
変なURLを指定した場合などに出てくるエラーです。

当たり前ですが、この404エラーが発生するとエラー画面が表示されます。
そしてそのエラー画面は、元々用意されています。

ところがですね。

ちょちょいのちょいとやると、404エラーが発生した際に、自分の用意したエラー画面を表示させることができるのです。
このときに表示される「自分で用意した404エラー画面」を「カスタム404ページ」と言います。
「カスタム404ページ」という表現自体は俗称ですけどね。「オリジナルの404エラーページ」や「独自の404エラーページ」などと言う場合もありますが、一番通りが良いのは「カスタム404ページ」だと思います。

例えば、わわわIT用語辞典(http://wa3.i-3-i.info/)で存在しないURLを指定すると、元々は以下のようなエラー画面が表示されていました(Google Chromeの場合)。

カスタム404ページ

現在はカスタム404ページを設定してあるので、以下のようなエラー画面が表示されます。

カスタム404ページ2

そっけなかった404エラー画面が少しだけピヨった感じになりましたよね?

このようにエラー画面をサイトの雰囲気に合わせたり、あるいはメニューや人気のあるコンテンツを表示することによって、(例えURLの指定を間違えるようなおっちょこちょいが相手だとしても)せっかく見に来てくれた人を「もう少しだけ見てやっか」な気分にさせる効果が期待できます。

実際のカスタム404ページの設定は「.htaccess」という名前のファイルを使います。
やり方はそんなに難しくありません。

まずは404エラーのときに表示させるページを作って、サーバ上に置きます。
例えば「err404.html」という名前のページを作ったことにしましょう。

カスタム404ページ3

次に以下の内容を記載した「.htaccess」ファイルを用意します。

ErrorDocument 404 【表示させるエラーページ】

「err404.html」をカスタム404ページにしたい場合は

ErrorDocument 404 /err404.html

もしくは

ErrorDocument 404 http://wa3.i-3-i.info/err404.html

のように指定します。

カスタム404ページ4

最後に「.haccess」ファイルをサーバ上に置きます。

カスタム404ページ5

これで完成です。
存在しないURLを指定して、自分の用意したエラーページが表示されるかを確認してください。

ちなみに「.haccess」の記述には一つ注意事項があります。
先程

ErrorDocument 404 /err404.html

もしくは

ErrorDocument 404 http://wa3.i-3-i.info/err404.html

と書きました。
サーバ上にあるファイル(/err404.html)を指定するか、URL(http://wa3.i-3-i.info/err404.html)を指定するかの違いですが、実はこの2つは違う動きをします。

前者の

ErrorDocument 404 /err404.html

で指定した場合、カスタム404ページが表示されるURLは入力したURLそのままです。
例えばURLを「http://wa3.i-3-i.info/not-found.html」と入力していた場合、表示されるカスタム404ページのURLは「http://wa3.i-3-i.info/not-found.html」になります。

一方

ErrorDocument 404 http://wa3.i-3-i.info/err404.html

の指定は、ページが転送されるイメージです。
「http://wa3.i-3-i.info/not-found.html」を指定していた場合でも、あるいは「http://wa3.i-3-i.info/not-found2.html」を指定していた場合でも、表示されるカスタム404ページのURLは一律「http://wa3.i-3-i.info/err404.html」になります。

前者は指定ファイルが読み込まれて表示されるイメージ、後者は指定URLにリダイレクト(転送)されるイメージですね。
個人的には前者の、入力したURLがそのまま表示されている方が親切な気はしますが、お好みに合わせて使い分けてください。

image piyo2

一言でまとめるよ

まぁ「カスタム404ページ」って単語が出てきたら「自分で用意した404エラーページなんだな~」と、お考えください。

一番上に戻るよ
スポンサーリンク