Parts & Tips

サイトに独自のエラーページを設定する

更新情報

  • 25/4/4　「エラーページを作成する」項目内の「補足②」の文言を修正しました

サイトに独自のエラーページを追加する方法について解説しています。
以下のエラーページを実装します。

  • 404 Not Found（アクセスしたページが存在しない）
  • 403 Forbidden（アクセスが許可されていない）
  • 500 Internal Server Error（プログラムエラーなどで何らかのサーバーエラーが発生している）

補足

本記事では、HTML/CSSでエラーページを作成・実装する方法を解説しています。WordPressなどCMSでの実装方法には対応していません。

また、レンタルサーバー（とくに無料のもの）によっては、後述する.htaccessファイルが許可されていない場合があります。事前にレンタルサーバーのFAQなどで.htaccessファイルの使用可否をご確認ください。

エラーページを作成する ​

エラーページを作成します。一般的なサイトであれば、上記の404 403 500の3つのエラーページを用意しておけばじゅうぶんです。ファイル名は任意の名前でOKです。

エラーページを作成するためのHTMLやCSSはとくに特殊なこともなく、他のページと同じように記述します。ただし、画像やファイル・リンクのパス（URL）は/（スラッシュ）から記述します。

html
<!-- サイトのURLが「https://parts-tips.com/」の場合 -->

<!-- 画像のパス（URL）が「https://parts-tips.com/error/404.png」であれば -->
<img src="/error/404.png" alt="お探しのページはみつかりません" width="800" height="600">

<!-- サイトホームへ戻るリンク -->
<a href="/">サイトトップへ戻る</a>

エラーページは、そのサイト内では基本的にアクセスしたURLはそのままで表示されます。たとえば以下のようなディレクトリ構成の場合（例としてサイトのURLはhttps://parts-tips.com/とします）

txt
.（サイトディレクトリ）
├─ index.html
├─ /gallery
└─ /error（今回作成するエラーページのディレクトリ）
　　　├─ 404.html
　　　├─ 403.html
　　　├─ 500.html
　　　├─ 404.png
　　　├─ 403.png
　　　├─ 500.png
　　　└─ /images（エラーページの画像）

https://parts-tips.com/gallery/a.htmlというURLにアクセスすると、ページが存在しないため404ページが表示される場合、以下のようになります。

txt
ブラウザのアドレスバーに表示されるURL
https://parts-tips.com/gallery/a.html

エラーページの画像のパス指定を404.htmlから見て<img src="404.png">（または<img src="./404.png">）とした場合、https://parts-tips.com/gallery/a.htmlにアクセスすると、ブラウザは画像のURLを以下のように解釈して表示しようとします。

txt
https://parts-tips.com/gallery/404.png

エラーページの画像は実際は/errorディレクトリの中にあるため、画像が表示されません。
/（スラッシュ）からはじまるパスで記述すると、どの階層（ディレクトリ）であってもサイトのトップページがある階層から辿ることができるので、画像が表示されないといったことを防げます。

補足①

もしサイトのトップページがhttps://parts-tips.com/home/のように「ドメイン/ディレクトリ」となっている場合、パスはディレクトリ（例では/home/）から記述します。

補足②

パスの指定は/（スラッシュ）からはじめるほか、http(s)://からはじまるURLで指定することも可能です。どちらでも構いませんが、http(s)://からはじめる場合は画像の読み込みやリンク先の表示に都度http(s)通信が発生するため、/からはじめる書き方をおすすめします。

.htaccessファイルを編集する ​

注意事項

サーバーの.htaccessファイルを編集する際は、.htaccessファイルがすでに存在している場合は必ずバックアップを取ってください。

作成したエラーページのディレクトリとファイル一式をサーバーにアップロードします。

サーバーのトップページのindex.htmlと同じ階層にある.htaccessファイルを編集します（.htaccessファイルがない場合は、新しく作成します）
以下を記述します。ファイルのパスは適宜修正してください。#error pageはコメントです。

apache
#error page
ErrorDocument 403 /error/403.html
ErrorDocument 404 /error/404.html
ErrorDocument 500 /error/500.html

注意事項

サーバーで.htaccessファイルが許可されていない場合は、.htaccessファイルを設置してサイトにアクセスすると「500 Internal Server Error」が表示されます。
この場合、そのサーバーでの独自エラーページの実装はできません。

サイトで間違ったURLを入力して、404エラーページが表示されているか確認し、表示されていればOKです。

403エラーページは新規にディレクトリを作成し、中身が空っぽの状態で作成したディレクトリのURLにアクセスすると表示されます。500エラーページはCGIファイルのパーミッションで実行権限をなくすと表示されますが、とてもおすすめしません。404エラーページが表示されていれば、他のエラーページも表示されるとみて大丈夫かと思います。

補足

.htaccessファイルにエラーページのファイルパスを記述する際は、http(s)://からの記述も可能です（サブドメインのコンテンツからエラーページに飛ばすなど）
この場合、アクセスしたページが存在しないときは、記述したエラーページのURLに転送されます。

以上です。

< Back to Home