［み］Webサイトのメンテナンス中の画面を表示させる方法　.htaccess を使うのがおススメです

Webサイトのリニューアルだったり、WordPressのテーマを入れ替えたりするときに、このWebサイトはメンテナンス中です！っていうのを、閲覧者にも検索エンジンにもきちんと伝える方法を紹介します。

超ダメな例

メンテナンス中であることを表示するhtmlファイルをつくり、ドメイン直下に index.html としておく。

この方法は、

トップページをブックマークしていてそのブックマークからやってきた人
検索からトップページを開いた人

に対しては有効です。

ですが、

トップページ以外をブックマークしていてそのブックマークからやってきた人
検索からトップページ以外を開いた人

に対しては、表示の崩れたページ、あるいは 404 ページが表示される可能性が大です…

.htaccess を使ってメンテナンス中を表示させる

ダメな例を紹介しましたが、良い例は、.htaccess を使ってメンテナンス中を表示するページへリダイレクトさせることです。

では、具体的な手順です。

メンテナンス中であることを表示する htmlファイル（ここでは maintenance.html）をつくります。

.htaccess に次のコードを追加します。（.htaccess が無い場合は新規で作成してください）

.htaccess

ErrorDocument 503 /maintenance.html


  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteRule ^.*$ - [R=503,L]

この .htaccessをドメイン直下に置く

基本的にはこれでOKです。

管理者からはメンテナンス中表示がでないようにする .htaccess

Webサイトをメンテナンスするのに、管理者からもメンテナンス中の表示が見えてしまっては、作業もなかなか大変です。ですので、メンテナンスをする人のIPアドレスからのアクセス時には、メンテナンス中の表示がされないように .htaccess を修正します。

.htaccess

ErrorDocument 503 /maintenance.html


  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteRule ^.*$ - [R=503,L]

xxx.xxx.xxx.xxx のところに管理者のIPアドレスをいれます。自分のIPアドレス？という方は、こちらから調べることができます。
アクセス情報【使用中のIPアドレス確認】

管理者のIPアドレスを複数指定したいとき

IPアドレスを入れている行をコピーして増やすだけでOKです。

.htaccess

ErrorDocument 503 /maintenance.html


  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteRule ^.*$ - [R=503,L]

メンテナンス中を表示するページで画像・スタイルシート・Javascriptを使いたいとき

メンテナンス中を表示するページで画像ファイル（jpg・pngなど）を使おうとしても、メンテナンス中を表示するページにリダイレクトしてしまうので画像を表示できません。スタイルシート（css）Javascript（js）も同様です。jQueryなんかは、Googleが提供しているものなど外部サーバーのもので対応できますし、スタイルシートも htmlファイルの head内に書いてしまえばいいんですが、.htaccess を修正することでも対応できます。

.htaccess

ErrorDocument 503 /maintenance.html


  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/maintenance.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteCond %{REQUEST_FILENAME} !\.(css|jpe?g|gif|png|js)$
  RewriteRule ^.*$ - [R=503,L]

これで、.css .jpg .jpeg .gif .png .js ファイルへのアクセスはメンテナンス中を表示するページへのリダイレクトは行われず、正常に表示されます。

メンテナンス中を表示するページを準備するのが面倒な方へ

メンテナンス中のページを準備することすら面倒だとか、5分とか10分とか本当に短時間でメンテナンスが終わるとかの場合、htmlファイルを準備せずとも、どのページへアクセスしてもWebサイトがメンテナンス中であることを表示できます。

.htaccess に次のコードを追加してください。

.htaccess

ErrorDocument 503 "Sorry. We're under maintenance."
RedirectMatch 503 .*

このコードでいう Sorry. We’re under maintenance. の部分が表示されます。検索エンジンに対しては 503 が返るので、メンテナンス中であることを伝えられます。

でも、一般の人からしてみたら、やっぱりある程度デザインされたページが表示されないと、そのWebサイトに何かよからぬことが起こっている…　みたいに勘違いしてしまう可能性がありますよね。

メンテナンス中を表示する htmlファイルのサンプル

メンテナンス中を表示する htmlファイルを作るのが面倒な方へサンプルを置いておきます。

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>メンテナンス中です</title>
<style>
h1,p {text-align: center;}
</style>
</head>
<body>
<header>
<h1>メンテナンス中です</h1>
</header>
<article>
<p>申し訳ございません。ただいまメンテナンス中です。<br />Sorry. We're under maintenance.</p>
<p>メンテナンスの終了は午前2:00を予定しております。<br />Maintenance will be finished at 2:00AM.</p>
</article>
<footer>
<p>&copy; みはら.com</p>
</footer>
</body>
</html>

CSS は好きなように足したり引いたりしてください。それと、英語もいまいち自信がないので…