エラーが出ても復活する。まずは落ち着いて
2次災害予防のため慎重に❦ 焦らず確実にやれば復元できる!頑張って

管理者リンク付き!503 Service Unavailableエラー自作PHPファイルのダウンロード

スポンサーリンク

アクセスが急増したとき用に普段から自作のエラーページ『503 Service Unavailable』を事前に作っておくと、運営者に直接連絡したいお客様に対して、リンクを置いていると対応ができますよね。

WordPrees用自作503ページで説明した内容をダウンロードして編集する箇所を説明したページです。

必要に応じて内容を編集してください。アクセス過多でエラーを出した人用の内容にしています。メンテナンスの場合は、内容をそれ用に変更してください。HTMLが分からない人用にそれぞれ変更する箇所だけ説明しますね。

編集必須・連絡先付き503phpのひな形ダウンロード

スポンサーリンク
スポンサーリンク

503 Service Unavailable。自作エラーページ作成済みHTML

503 Service UnavailableのHTMLを表示した画面

アクセス急増したときに連絡できるアドレス、名前など入れてオリジナルの503エラーページに変更してください。

変更箇所は、下記79・87行目。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>503 Service Unavailable</title>
<style media="screen and (max-width: 500px)">
h1 {
	font-size: 24px;
}
body .error-1 {
	font-size: 17px;
}
body .error-2 {
	font-size: 24px;
}
body .error-3 {
	font-size: 17px;
}
</style>
<style>
html {
	font-family: 'Hiragino Kaku Gothic ProN', Meiryo, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}
body {
	width: 100%;
	max-width: 640px;
	padding: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	margin: 0 auto;
}
.error {
	padding: 1em;
	background: #fafaff;
	border: 1px solid #ddd;
	border-radius: 6px;
	text-align: center;
	font-weight: bold;
	line-height: 1.7;
	word-wrap: break-word;
	margin-bottom: 3em;
}
.error-1 {
	font-size: 25px;
	color: #ff0000;
}
.error-2 {
	font-size: 35px;
	margin: 0.8em 0;
}
.error-3 {
	font-size: 22px;
	margin-bottom: 1em;
	color: #808080;
}
.error-4 {
	font-size: 20px;
}
footer {
	padding: 20px 0;
	font-size: 80%;
	text-align: center;
}
</style>
</head>
<body>
<div>
<h1>503 サービスを利用できません</h1>
<div class="error">
<div class="error-1"><p>アクセス急増のため規制がかかり</br>ぺージが表示できません。</p></div>
<div class="error-2">503 Service Unavailable</div>
<div class="error-3">時間を置いてお越しくださること</br>心よりお待ちしています^^</div>
<p>ブログ名 運営者:<a href="連絡先URL" target="_blank">表示名</a></p>
</div>
<p class="error-4">只今アクセスが急増のため規制がかかり、「サービスは利用できない」と意味の503 Service Unavailableを表示しています。</p>
<p>お手数かけて申し訳ございません。</p>
<p>サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。</p>

</div>
<footer>
&copy;ブログ始めた年-<?php echo date('Y'); ?> ブログ名
</footer>
</body>
</html>

79行目、運営者情報を編集する説明

変更前

<p>ブログ名 運営者:<a href=”連絡先URL” target=”_blank”>表示名</a></p>

変更後

<p>ビバ★りずむ 運営者:<a href=”https://twitter.com/kautakku” target=”_blank”>かうたっく</a></p>

あなたのサイト連絡のつくURL管理者名を入れてください。

段落タグpに囲まれた、リンクaタグ内のtarget="_blank"は表示された503エラーページとは別タブで連絡先の画面を表示する記載です。

89行目のコピーライトの変更説明

変更前

&copy;ブログ始めた年-<?php echo date(‘Y’); ?> ブログ名

変更後

&copy;2015-<?php echo date(‘Y’); ?> ビバ★りずむ

ビバ★りずむは2015年に運営を始めたので2015。著作権はビバ★りずむにある。との記載です。

著作権も大事ですが、この場合、訪問したユーザーさんに、ブログ名の存在をアピールしても良いとのことであえてつけてます。

自作のエラーページだからできることで、サーバーの名前になってるよりもサイト名がある方が良いからつけました。

<?php echo date('Y'); ?>この記載は現在の年数を表示します。

2017年なら、©2015-2017 ビバ★りずむ

2020年なら、©2015-2020 ビバ★りずむ と、なるわけです^^

76行目、アクセス過多ではなく、メンテナンスに変更したい場合

サイトのメンテナンスなどでアクセス制限したい場合は、メンテナンスのためアクセス制限をかけこのページを表示している旨に、ピンク部分を変更してください。

<div class=”error-1″><p>アクセス急増のため規制がかかり</br>ぺージが表示できません。</p></div>

メンテナンスの期間をユーザーに知らせたい

検索エンジンにメンテナンスの期間を知らせても、実際利用するユーザーにこそ理解してもらいたいので、メンテナンス期間を記しておきたいトコロです。

<div class=”error-3″>時間を置いてお越しくださること</br>心よりお待ちしています^^</div>

この部分を変更するなどして、何時からどのくらいの時間、メンテナンス作業を行うか書いておくとユーザーに優しいものに変わります。メンテナンスが伸びれば、PHPファイルを編集し変更時間の追記も可能です^^

メンテナンスの期間を検索エンジンに伝える書きかた

<IfModule mod_headers.c>
  Header set Retry-After "Sun, 14 Jun 2009 6:00:00 GMT"
</IfModule>

引用元:Webサイトのメンテナンス中画面を出す正しい作法と.htaccessの書き方

検索エンジンにメンテナンスの終了日時・一時的な503だとを伝える記載なので参考まで。

自分が見れるようip制限した RewriteCond %{REMOTE_ADDR} !=192.168.0.4 など必要でしたら上記でチェックしてください。

サーバーにphpファイルをアップロードする手順

アップロードすると表示確認が行えます。キチンとリンクになって、アクセスできるか確認してください。

その他、基本的な事は3分で完了!WordPreesの自作500・503エラー画面、PHPファイルのダウンロード・設置で書いてます。

上記の基本的なひな形を作るのが苦手な管理者さんへ説明したので、WordPreesで自作、503ページで書いた編集方法を参考にどうぞ。

503.phpファイルをダウンロードする

圧縮ファイルになるので、解凍してから編集してくださいね。

さいごに

このファイルはWordPressとは全く違うディレクトリ(階層)に存在するファイルなので、あなたのやる気・必要性を感じたらすぐに設置できます。

サーバーに設置してキチンと表示できてれば、下記で書いたコードを1行足すことで表示されるので、頑張ってくださいね^^

詳しくは下記。

LINKこんな簡単で良い?WordPreesで自作、503ページ!離脱阻止できるページを作ちゃおう!

流れだけ知りたいなら、下記をどうぞ。

LINK3分で完了!WordPreesの自作500・503エラー画面、PHPファイルのダウンロード・設置

それでは、かうたっくでした。

コメント

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております❦

トップへ戻る