お問い合わせはコチラから

サイトをメンテナンスモードにする手順

サイト運営

先日、htmlサイトをメンテナンスモードにする機会がありました。いつもWordpressのプラグインでやっていたので、実はわかっていなかったことが結構あったのでメモしておきたいと思います。

シンプルなサイトメンテナンスのHTMLテンプレート

検索すると海外の綺麗にデザインされたテンプレートが沢山出てきますが、それらはカウントダウンやらメールボタンなどが付いていて、逆にいじりにくいです。

実は欲しいのは、メンテナンスモードの機能があるとてもシンプルなテンプレートのことが多いと思います。

メンテナンスモードは単純にページを用意するだけでなく、.htaccessの対応も必要になります。

今回は使いませんでしたが、以下のメンテナンスページのテンプレートは必要十分です。

GitHub - hilaryquinn/maintenance-page: HTML5/CSS3 Maintenance Page Template - Responsive
HTML5/CSS3 Maintenance Page Template - Responsive. Contribute to hilaryquinn/maintenance-page development by creating an account on GitHub.

レスポンシブ対応にはviewportの指定が必要

シンプルなメンテナンスページのhtmlテンプレだとレスポンシブ対応していないことがあります。

headタグに以下の記述がないとメディアクエリが効かないです。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

.htaccessの503対応が必要

メンテナンスモード時は全てのアクセスに対して、メンテナンスページを表示しなければなりません。

とはいえ、画像やjsなども対象にしてしまうと、メンテナンスページで参照できなくなりますので、そこは除外します。

また、302を返すのではなく、503を返す必要があります。

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

<IfModule mod_rewrite.c>
  # -- メンテHTML指定(index.htmlがメンテナンスページの場合)
  ErrorDocument 503 /index.html
  RewriteEngine on
  RewriteCond %{REQUEST_URI} !^/index.html$

  # -- 画像等のリソースファイルは除外(メンテページから参照されている場合がある為)
  RewriteCond %{REQUEST_FILENAME} !\.(css|jpe?g|gif|png|js)$

  # -- HTTPレスポンスコード503で返す(ブラウザ上でのURL書き換えは発生しない)
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

まとめ

メンテナンスページを急に用意しなければならなくなった時に、なんで動かないんだろ?と焦らないためにも知っておいた方が良いと思います。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました