エラーページのカスタマイズ

Nov 11, 2005 | Web制作

URLを間違えたりすると表示されるエラーページ。大抵は「ページが見つかりません」「404未検出」なんて言われ、冷たく追い返されてしまいます。ヒドイ!でもこれ、実は意外とカンタンにカスタマイズできたのです。こんな風に。

  • 400エラー … お詫びにマリアーヌをどつき回して下さい。
  • 401エラー … 見ちゃだめです。本の内容はナイショ♪
  • 403エラー … 立ち入り禁止です。通しません。
  • 404エラー … 燃やされてる!燃やされてるよ!
  • 500エラー … とりあえず頑張ってる姿だけでも…

はい、無駄に力を注いでおります。一体どうやって作るのか?今回はそれをご紹介。

エラーページのカスタマイズ方法

  1. まず「.htaccess」という名前のファイルを用意します。

    ※ここでいきなりコケる人もいるかと思います。説明すると長くなるので、あらかじめファイルを用意しておきます。
    いや、自分で作る!という方は、別に難しくはないので以下のサイトを参考にしてみてください。

  2. 次にその.htaccessをエディタなどで開いて、

    ErrorDocument 404 /hoge/404.html

    と書きます。ちなみにこれは404エラー用。ディレクトリ名&ファイル名は何でもOK。

    【注意】エラーページまでのパスはルートディレクトリからの絶対パス(スラッシュで始まる方)で書くこと。http://から始めないようにしましょう。絶対パスって何?という方はこちらの解説サイトをご覧ください。

  3. 【図】アップ後のディレクトリ構成後は作ったエラー用のHTMLファイルと.htaccessファイルをアップすれば完成!

    ただし.htaccessだけはトップページがあるルートディレクトリの直下にアップします。上の例だと右図のようになる訳ですね。

  4. 最後に動作確認してみましょう。トップページにアクセスしてURLの末尾に、自分が作ったことのないファイル名を、例えば「xxx」などと入力すれば404のエラー画面が表示されるはずです。


エラーの種類は他にもいっぱいあります。私は「400, 401, 403, 404, 500」の5つを作りました。有難いことに、エラーの意味を片っ端から調べ上げているサイトがありましたので、興味ある方は参考にどうぞ。

また、今回エラーページを作るにあたってわざわざイラストを描いてもらいました。おかげで楽しいエラーページができました♪快く描いてくれたヘブロクには大感謝!ってことでサイトも宣伝しちゃおう♪

同人用語の基礎知識|エラーメッセージ
たくさんあるエラーメッセージの内容を調べ上げてくれています。よくぞこれだけ…
epep -Everything Pleasure, Everywhere Play-
ヘブロクの描くイラストが一杯!奇妙でかわいいイラストをご賞味アレ。私も参加してるのでちょっと手前味噌…(・∀・;) あ、マフラーした四角くて青いヤツが私です。

このエラーページ、実は昔からずっと気になってたのです。せっかく見に来てくれた人に対して「エラーです」の一言。まるで「お前が悪い」と言わんばかりに。せめてもう少しやさしく説明できないか?と。

ココみたいに趣味のサイトならまだしも、ショッピングサイトを運営している場合なら、そこでお客様を逃してしまうかもしれません。それではあまりに失礼で、もったいない。私は全力で遊びましたが、うまく使えば非常に効果があると思います。お使いのサーバーによってはできないかもしれませんが、試す価値アリですよ。

フライヤー整理法 〜カンタン製本〜トップページスクリーンセーバー「poco poco snow」アップしました。

Comment

こんな素敵なシステム利用してもらってhtaccessさんも大満足だわ!
さっそく餅サイトでも紹介させてもらっちゃいました!ありがとう!(´ ∀`)

From : ヘブロク @ Nov 11, 2005

ヘブロクへ
こちらこそありがとう!このエラーページは完全にイラストで成り立ってるからね。
爆笑じゃなく、ププッという笑い。このさじ加減が大好きです。

From : つかぎたぁ @ Nov 14, 2005

Copyright(c)2005 Tsukaguitar. Some Rights Reserved. Powered by Movable Type.Movable Type