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

WordPreesで自作503ページ簡単作成！ユーザーに状況を伝えるよう

503 Service Unavailableを簡単に自作し状況を伝える

503 Service Unavailableは、サーバーの503ページが表示されるけど、自分でエラーページを作成・編集して設置することも可能です。（HTMLはひな形として作成、ダウンロードできるページも追加しました。）

  • なぜ503が表示されるのか原因の説明
  • WordPress初心者がエラーページ画面を簡単に設置・作成する工程
  • contact-form-7お問い合わせ画面の簡単設置方法
  • おまけ。500 Internal Server Errorページの作成方法

これら4つを初心者向けにご紹介します。詳しいかたは読み飛ばして見てくださいね＾＾

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

503 Service Unavailableとは

503ページの自作をするにあたり、503 Service Unavailableの原因など知っておきたいトコロです。

  • 503とは何かと言えばhttpステータスコード。この意味を軽く説明。

ページを表示するサーバーにはネット上のデータが保存し、リクエスト（アクセス）されたページを表示しようとすると同時に、どのように表示したかもブラウザ画面に返します。

ページ表示しようと行った処理『こんな事をして今の画面を表示したよ！』という結果を3ケタの数字であらわしたのが、ステータスコード（3ケタの数字）です。

数字の意味は、ちゃんと表示した、リダイレクト転送して表示した、表示できなかった。などとそれぞれ違った意味を持ちます。

LINKヤバイ！初心者向けで凄い解るHTTPステータスコード301.403.404.500等の意味

ポイント

500番台はサーバー内部のエラー。

503番は、サーバー内で負荷がかかったとき、メンテナンスのときに表示される。

※ブラウザやサーバーの仕様などにより、http 500 Internal Server Errorとして扱われることも。

503 Service Unavailableエラー画面をレスポンシブ対応で作る

サーバーの503ページは一般的な内容なので、運営者の言葉として伝えることができませんよね。

503ページを自作することで、503画面を見ることになったユーザーさんにメッセージを送り、見たひと次第だけど距離を近づけられる可能もある！と思いませんかぁ？

スマホから見ても はみ出さないようレスポンシブ対応させて作りました。以降レスポンシブ対応のCSSコードの意味、記載内容は割愛します。

503 Service Unavailableページ・スマホビュー

なぜ503エラーが表示されたか、内容やメッセージを載せる

ページに訪れたユーザーは503エラーの意味が理解できない場合も多々いるはず…。そこでユーザーさんに伝えたい内容と説明次につながるメッセージ、503ページに記載する内容を考えます。

  • なぜこのページが表示されたか
  • 運営者の気持ちを伝える
  • コンタクトフォームまたは、コンタクトが取れる手段を乗せる

書いた内容は下記。

503 サービスを利用できません

アクセス急増のため規制がかかり
ぺージが表示できません。

503 Service Unavailable

時間を置いてお越しくださること
心よりお待ちしています＾＾

ビバ★りずむ　運営者：かうたっく

只今アクセスが急増のため規制がかかり、「サービスは利用できない」と意味の503 Service Unavailableを表示しています。

お手数かけて申し訳ございません。

サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。

お問い合わせ





©2015-2017 ビバ★りずむ

phpファイルに書き込むコード

普通に書いてもそっけないので、phpファイルにhtmlタグを書いて装飾し表示させれば、多少…見やすくなります。

phpファイルに書く内容は、下記コードのbody内のコードをWordPressの投稿より、テキストエディタにコピペして、ビジュアルエディタで好きなように編集すれば、段落・改行以外のタグは自動で挿入してくれるので、初心者でも簡単に編集できます。

最後にWordPressのテキストエディタのコードをコピーして、アップするエディタにペーストし、段落だけタグを追記すれば編集が完了です。例）<p>段落</p>

<!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;
}
input[type="submit"] {
	width: 50%;
	height: 4em;
	text-align: center;
}
.wpcf7-text {
	width: 90%;
	height: 2em;
}
.wpcf7-textarea {
	width: 90%;
}
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="https://twitter.com/kautakku" target="_blank">かうたっく</a></p>
</div>
<p class="error-4">只今アクセスが急増のため規制がかかり、「サービスは利用できない」と意味の503 Service Unavailableを表示しています。</p>
<p>お手数かけて申し訳ございません。</p>
<p>サーバーは、ブログやサイトにアクセスがあれば表示させる場所です。一般的な共有サーバーを使っているため、共有する他サイトに迷惑がならないよう、制限がかかってる状態です。</p>
<p>お問い合わせ</p>
<!-- コンタクトフォーム　コピペする場所 -->
</div>
<footer>
&copy;2015-<?php echo date('Y'); ?> ビバ★りずむ
</footer>
</body>
</html>

やたら長いのはCSSを見やすく成形してるから。WordPressテキストエディタで本文を編集したい場合、87行目～96行目をコピペして貼り付け編集してください。

スタイルを変更したい場合は、head内のstyleにまとめてるので、変更してください。9～20行目は横幅500pxまでのスタイル。23～82行目は全体のスタイルにしてます。

コンタクトフォームを使用しない場合は97・98行目を削除してください。この記載は後述。

ポイント
  • 下記内容をTeraPadなどテキストエディタなどで置換が必要！後述
    • ビバ★りずむ・かうたっく・kautakku・2015
  • 4行目<meta charset=”UTF-8″>
    • この記載は一部ブラウザで表示したとき文字化けｨ遉ｺ縺励※縺・∪縺吶€�こんな感じになるので、その対策みたいなもの。
  • 7行目<title>503 Service Unavailable</title>
    • タブに表示されるタイトル

お問い合わせプラグイン、コンタクトフォームを設置する

プラグイン、Contact Form 7のお問い合わせを付けたい場合、入力欄や送信ボタンの幅が狭いので、高さを足してレスポンシブにしました。使わない場合はこの記載を消してOKです。

input[type="submit"] {
	width: 50%;
	height: 4em;
	text-align: center;
}
.wpcf7-text {
	width: 90%;
	height: 2em;
}
.wpcf7-textarea {
	width: 90%;
}

コンテンツフォームのカスタマイズ前後

※実際の503エラーが出た場合は、お問い合わせを送信できるか不明です＞＜　強制的にエラーを出している場合は送信できる。コレが前提。

コピペして98行目<!– コンタクトフォーム　コピペする場所 –>を消してそこに、あなたの設置しているコンタクトフォームをいれてください。必要ない場合は削除＾＾

<p>お問い合わせ</p>
<!-- コンタクトフォーム　コピペする場所 -->

設置済みのコンタクトフォームをコピペする方法

この方法はContact Form 7｜WordPressプラグインを導入している人用です。

PCでアクセスして、コンタクトフォームのIDや設置ページのpost（ページ投稿したときの番号）などをコピーする方法で、あなたが設定した『問い合わせ画面』よりそのままコードをコピペするので、超簡単！

Chrome要素の検証画面：お問い合わせhtmlのコピー方法

  1. 矢印マークをクリックして青くして、範囲を選択可能にする
  2. お問い合わせフォーム画面いっぱい、画像のとおり囲ってクリックする
  3. 出てきた画面の下記、HTMLタグ部分を右クリック

<div role=”form” class=”wpcf7″ id=”wpcf7-…

または<form action=”/…

コピーより、コピーエレメントをクリック

CopyよりCopy elementをクリック。これでフォーム全体のHTMLがコピーできました。

コピーされたHTML

コレを98行目<!– コンタクトフォーム　コピペする場所 –>を消して、貼りつける！

ヤバい…Chrome最高！超簡単＾＾

テキストエディタでphpファイルを作成

文字コードのUTF-8bomなしを選択できるテキストエディタがを準備してください。Windowsで使えるTeraPadが便利なので、それを使って説明しますね。

  • index.phpをデスクトップなどにダウンロード。

パス：/domain.com/public_html/wp-content/themes/親テーマフォルダ内/適当なPHPファイル

  • ファイルを開いて全て消したら、上述コードを貼り付ける

置き換えたい文字があるので、それを置換します。

  1. 検索より、置換を選択
    TeraPadの置換方法
  2. 検索する文字列　ビバ★りずむ
    置換後の文字列　あなたのサイト名
  3. すべて置換をクリック
    TeraPadの置換方法：置換前後を入れて、すべて置換
  4. すべてをクリック
    置き換えは「すべて」をクリック

これを下記の4通りしてください。

  • ビバ★りずむ（サイト名）
  • かうたっく（ブログの名前など）
  • kautakku（ツイッターのアカウント）
  • 2015（あなたが始めた年）

または探して削除して書き換えてください＾＾

  • body内の上記4つを書き換え、保存。ここで注意！

文字コード・ファイル名の指定方法

大事なのは、ファイル名503と拡張子.phpにして保存することです。503.php

  • ファイルより名前を付けて保存を選択。
    503.phpで保存する
  • phpが選べない場合・文字コードはUFT-8しかないので触らない！

    Winメモ帳:503.txt・文字コードは触らない

    • FTPソフトでアップするとき、503.txtを右クリックして名前を503.phpに変更してアップすればOK！文字コードは自動で変換されてShift_JISになる。
      • Shift_JISのとき文字化けするので、サーバーのWeb上にあるFTPからUTF-8に文字コードを変更し保存すればOK！

FTPソフトの設定を一時的にutf-bomなし(n)に変更しても良いですね❦

LINKロリポップFTPの使い方

サーバー：Web上のFTPが分からない場合は、文字コードをUTF-8n（Bomなし）が選択できるテキストエディタを持ってると、便利です。WordPressを運営してると使えますよ！

503.phpを設置する場所

WordPressを入れているフォルダ内、wp-adminがある場所と同じディレクトリ（階層）です。

該当のブログ内にあるWordPressファイル

この階層に作ったファイルを入れてください。独自ドメインの場合は下記を参考にしてください。サブドメインなどは割愛します。

エックスサーバーの場合、public_htmlフォルダ内

  • domain.com/public_html/503.php

ロリポップの場合、domain.comフォルダ内

  • domain.com/503.php

次、同じ階層にある.htaccessファイルに追記します。

.htaccessに503が出たら自作画面を表示するコード

503番が出たら自作の503.phpを表示するよう、追記します。場所は上述通り、設置するブログの503.phpを入れた階層の.htaccessファイル。

変な数字が入らないよう、下記コードのみ貼り付けてください。

ErrorDocument 503 /503.php

さいご1行改行して、これで503 Service Unavailableが出たら503.phpファイルの内容が表示されます。

カスタマイズしたページを確認したいとき、あなたのURL/503.phpで確認できます。私の場合は、https://bibabosi-rizumu.com/503.phpとなります。

テスト環境でテストする場合

上記コードに加えて、下記ようにコードを追加すれば、503ページを強制的に出力できます。※上下に1行ずつ改行すればOK！

ErrorDocument 503 /503.php

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/503.php
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

503 Service Unavailableエラーページに画像を入れたい

503画面にどうしても画像を入れたい場合、サブドメインなど使って画像を入れると表示されます。なぜサブドメインに入れるのかは、下記。

  • 該当ドメインdomain.comのディレクトリ（階層）以下は503が表示するため。
  • 別のドメイン・サブドメインなど503が出ていないディレクトリの画像を使えば表示される
  • 表示される環境でなければ表示されない。
  • 画像を入れたい場合のhtmlは下記
<img src="http://sub.domain.com/画像のパス/503.png" alt="503" width="640" height="auto" style="width:640px; height: auto; max-width: 100%;">

http://sub.domain.com/画像のパス/503.pngの部分に別ディレクトリのサブドメインなどの画像のパスを入れてください。

HTTP 500 Internal Server Errorのエラーページも自作したい

503ページのテンプレートの使いまわしで、500エラーページも作成できます！

  • タイトル：HTTP 500 Internal Server Error
  • h1タグ：500 内部サーバーエラー
  • 内容：500エラーの原因・なぜ500エラーが出たかを書く
  • ファイル名を500.phpにする

ファイルをアップする場所は、上述の503.phpと同じです＾＾

ファイルをアップし終わったら、.htaccessファイルの一番下にでも追記してください。

  • .htaccessに記載するコード
ErrorDocument 500 /500.php
  • 上記の503の自作と同時に500エラーも作りたい場合。
ErrorDocument 500 /500.php
ErrorDocument 503 /503.php
  • テスト環境で、全ページ500エラーにして表示を確認したい場合。
ErrorDocument 500 /500.php

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/500.php
  RewriteRule ^.*$ - [R=500,L]
</IfModule>

※本番環境でRewriteCond %{REQUEST_URI} !=/500.php
RewriteRule ^.*$ – [R=500,L]この記載を書くと、すべて500エラー画面になるので、1行目のみ貼り付けてくださいね＾＾

500 Internal Server Errorページの内容

500 内部サーバーエラー

ただ今、運営者かうたっくの操作ミスにより
ページが表示されていません。

500 Internal Server Error

500はステータスコード500番のInternal Server Error（内部サーバーエラー）と言う意味で
サーバー内部で起こったエラーです。
運営者のファイル操作ミスが原因で、お手数かけます＞＜

  • 500？ステータスコード？この意味は

ステータスコードは、運営者が契約している情報を表示する場所：サーバーから、あなたの画面に『情報を表示するとき』同時に、『サーバーはこんな処理をして表示したよ。』と送っているコードです。

正常に表示している場合、コードが送られているのに気付きません。不具合があればエラー画面を表示して、今の状況を訪問してくれたあなたにお知らせします。

運営者がエラーに気付いていれば、もうエラーが解除されてるはず！

この画面に付き合わせてしまってスミマセン(*- -)(*_ _)ペコリ

これからもビバ★りずむをよろしくお願いします＾＾

©2015-2017 ビバ★りずむ

引用元：https://bibabosi-rizumu.com/500.php

<!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>500 Internal Server Error</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;
}
input[type="submit"] {
	width: 50%;
	height: 4em;
	text-align: center;
}
.wpcf7-text {
	width: 90%;
	height: 2em;
}
.wpcf7-textarea {
	width: 90%;
}
footer {
	padding: 20px 0;
	font-size: 80%;
	text-align: center;
}
</style>
</head>
<body>
<div>
<h1>500 内部サーバーエラー</h1>
<div class="error">
<div class="error-1">ただ今、運営者<a href="https://twitter.com/kautakku" target="_blank">かうたっく</a>の操作ミスにより</br>
ページが表示されていません。</div>

<div class="error-2">500 Internal Server Error</div>

<div class="error-3">500はステータスコード500番のInternal Server Error（内部サーバーエラー）と言う意味で</br>
サーバー内部で起こったエラーです。</div>
</div>
<p class="error-4">運営者のファイル操作ミスが原因で、お手数かけます＞＜</p>
<ul>
 	<li>500？ステータスコード？この意味は</li>
</ul>
<p>ステータスコードは、運営者が契約している情報を表示する場所：サーバーから、あなたの画面に『情報を表示するとき』同時に、『サーバーはこんな処理をして表示したよ。』と送っているコードです。</p>
<p>正常に表示している場合、コードが送られているのに気付きません。不具合があればエラー画面を表示して、今の状況を訪問してくれたあなたにお知らせします。</p>
<p>運営者がエラーに気付いていれば、もうエラーが解除されてるはず！</p>
<ul>
 	<li><a href="https://bibabosi-rizumu.com/http-status-code/" target="_blank">初心者向け・凄い解るHTTPステータスコードとは</a>を見てみる。</li>
 	<li><a href="https://bibabosi-rizumu.com/http500-internalservererror/" target="_blank">500 内部サーバーエラーの原因</a>を見てみる。</li>
 	<li>更新して情報をリロードする←オススメします＾＾；</li>
</ul>
<p>この画面に付き合わせてしまってスミマセン(*- -)(*_ _)ペコリ</p>
<p>これからも<a href="https://bibabosi-rizumu.com" target="_blank">ビバ★りずむ</a>をよろしくお願いします＾＾</p>
</div>
<footer>
&copy;2015-<?php echo date('Y'); ?> ビバ★りずむ
</footer>
</body>
</html>

phpファイルの本文編集・ポイント

500エラーと503ページの基本の装飾CSS、骨組みになるHTMLは同じです。

本文を入れ替えたいとき、どこに書けばどう表示するかをチェックしてください＾＾

ビバ★りずむの500 Internal Server Error画面

503.phpからの変更点と、内容文面を書くエリアを参考まで書いておきますね。

7行目タブに表示される<title>500 Internal Server Error</title>

87行目<h1>500 内部サーバーエラー</h1>

88行目以降

<div class=”error”>//この下から枠で囲まれる。

<div class=”error-1″>エラーが出た状態</div>

<div class=”error-2″>エラー名</div>

<div class=”error-3″>このエラーでの、あなたの心情など</div>

<p>ここに何か入れたら枠内に収まる</p>

</div>　//div class=”error”に囲まれた上記は枠で囲まれる仕様。

<p class=”error-4″>ちょっと大きな文字</p>

<p>テキストエディタで書いた内容に段落<p></p>で囲いコピペ</p>

ココに好きな事書く

  • <ul>
    • <li>リストタグol・ul・liは段落のタグ<p></p>で囲わなくてOK！</li>
  • </ul>

最後フッター前の下記divの閉じタグ</div>は消さない

</div>

後は上述どおり、503エラーページと同じ作りです＾＾

難しい！503.phpのひな形が欲しい

難しいけど、誰でも簡単に設置できるひな形が欲しい場合。一切503.php・500.phpを触りたくないバージョンをダウンロードできます。

自分専用ではないので、かなりシンプルに状況を伝えた文章です。

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

テキストエディタを持っていて、簡単な変更ができる人用に503.phpひな形が欲しい場合は、下記に内容を乗せています。下記リンクでダウンロードして編集してください。

この投稿を超簡単に説明したのは、上記リンクです。

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

さいごに

503が出るのは膨大なアクセスが押し寄せてキャパオーバー！コレが大きな原因の1つですよね。一定のファイルxmlrpc.phpだったような？への攻撃で負荷がかかる場合もあるとどこかで見ましたよ。

細かい部分に目をやると、ページの読み込みが異様に多いとかあるかも知れませんよね。リダイレクトするときも転送回数には気を付けたかったり。

色々あるでしょうけど、503で悩まれてるなら、サーバーの変更が一番良いのかなぁ…とか思います。膨大なアクセスは経験したことないので、具体的な内容は書けませんが❦

エラーページ作りなら404ページも、チェックしてみてはいかがでしょうか＾＾

LINKWordPressで404エラーページをカスタマイズ！超簡単に工夫して作る方法

 

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

スポンサーリンク
スポンサーリンク
この記事が気に入ったら
いいね！しよう
最新情報をお届けします。
ステータスコード関連
エラー カスタマイズ レンタルサーバー ローカル環境
シェアする
フォローする
スポンサーリンク
スポンサーリンク
かうたっく
ビバ★りずむ

Comments

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

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

「ビバ★りずむ」ポリシー
トップへ戻る
タイトルとURLをコピーしました