ウェブサイトのリニューアル作業の時にいつも忘れてググっている、「メンテナンス中です…」のページを表示させる方法。
毎日やっていることじゃないので、いざ使いたいときに忘れてしまいます。
ということで、主に自分用にメンテナンスページ（maintenance.htmlとか）を表示させる方法をメモ。
ついでにmaintenance.htmlのサンプルコードも乗せとくので必要な方は自己責任で使ってください。
やること
主にやることは2つ。
- メンテナンス表示用のhtml(phpとかでも良い)を用意する
.htaccessの編集
ではやってみよう。
メンテナンスページを用意する
メンテナンスしていることをお知らせするページを用意します。
ここでは、maintenance.htmlを作成してドメイン直下に配置します。
このサイトだと、https://bge.jp/maintenance.htmlになります。
サンプルコード
長いね…
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<meta name="robots" content="nofollow">
<title>ただいまメンテナンス中です | [サイト名]</title>
<style>
body {
margin: 0;
padding: 1em;
background: #eee;
height: calc(100vh - 2em);
display: flex;
align-content: center;
flex-direction: column;
justify-content: center;
align-items: center;
line-height: 2.1;
}
#container {
margin: 1em auto;
padding: 50px 40px;
max-width: 680px;
background: #fff;
border-radius: 0.8em;
box-shadow: 0 0 30px hsl(0deg 0% 80% / 60%);
@media only screen and (max-width: 767px) {
padding: 1.2em;
}
}
.logo {
text-align: center;
margin: 2em auto;
width: 400px;
max-width: 80%;
}
h1 {
font-size: 1.8em;
@media only screen and (max-width: 767px) {
font-size: 1.2em;
}
}
h2 {
margin-top: 2.5em;
@media only screen and (max-width: 767px) {
font-size: 1em;
}
}
.warn {
padding: 1em;
background: #ff7;
font-weight: bold;
}
.contact {
padding: 1em;
margin-bottom: 2em;
background: rgb(246, 246, 246);
font-weight: bold;
}
.note {
font-size: 0.8em;
}
#footer {
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div class="logo">
<img alt="[サイト名]" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iYiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjA2LjIxIDc5LjI0Ij4KICA8ZyBpZD0iYyIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMSI+CiAgICA8Zz4KICAgICAgPHBhdGggZD0iTTMuNDksNTkuNHYtNC42MWMxLjA3LS4wNSwxLjk3LS4xOSwyLjY5LS40Mi43Mi0uMjMsMS4yOC0uNzcsMS42OC0xLjYxLjQtLjg0LjU5LTIuMTkuNTktNC4wNXYtMjYuNzZjMC0xLjI2LjA0LTIuNDcuMS0zLjYzLjA3LTEuMTYuMTMtMi4wNS4xNy0yLjY2LS43NS4wNS0xLjY4LjA4LTIuOC4xLTEuMTIuMDItMS45My4wNi0yLjQ1LjF2LTUuMzhoMjAuMDZ2NC42MWMtMS4wMy4wNS0xLjkxLjE5LTIuNjYuNDItLjc1LjIzLTEuMzIuNzYtMS43MSwxLjU3LS40LjgyLS41OSwyLjE4LS41OSw0LjA5djI2Ljc2YzAsMS4yNi0uMDIsMi40NS0uMDcsMy41Ni0uMDUsMS4xMi0uMTIsMS45OC0uMjEsMi41OWg5LjM2YzIuNzUsMCw0LjktLjk1LDYuNDYtMi44NywxLjU2LTEuOTEsMi4zNC00Ljc3LDIuMzQtOC41OWg0LjY4bC0uNDIsMTYuNzdIMy40OVoiLz4KICAgICAgPHBhdGggZD0iTTY5LjE4LDYwLjUxYy0zLjM1LDAtNi4zOC0uNzItOS4wOC0yLjE3LTIuNy0xLjQ0LTQuODMtMy41LTYuMzktNi4xOC0xLjU2LTIuNjgtMi4zNC01LjgzLTIuMzQtOS40NywwLTMuODcuOC03LjI2LDIuNDEtMTAuMTcsMS42MS0yLjkxLDMuNzUtNS4xNyw2LjQzLTYuNzgsMi42OC0xLjYxLDUuNi0yLjQxLDguNzctMi40MSwzLjM1LDAsNi4zNi43Miw5LjAxLDIuMTcsMi42NiwxLjQ0LDQuNzUsMy41MSw2LjI5LDYuMTgsMS41NCwyLjY4LDIuMzEsNS44OCwyLjMxLDkuNjEsMCwzLjkxLS43NSw3LjMxLTIuMjQsMTAuMi0xLjQ5LDIuODktMy41NCw1LjExLTYuMTUsNi42Ny0yLjYxLDEuNTYtNS42MSwyLjM0LTkuMDEsMi4zNFpNNjkuNDYsNTUuNTVjMS44Ni0uMDUsMy4yNy0uNyw0LjIzLTEuOTYuOTUtMS4yNiwxLjYyLTIuODQsMS45OS00Ljc1LjM3LTEuOTEuNTYtMy44NC41Ni01LjgsMC0xLjcyLS4xMy0zLjQ3LS4zOC01LjI0LS4yNi0xLjc3LS42Ni0zLjM4LTEuMjItNC44Mi0uNTYtMS40NC0xLjMyLTIuNjEtMi4yNy0zLjQ5LS45Ni0uODgtMi4xMy0xLjMtMy41My0xLjI2LTEuODIuMDUtMy4yNS43LTQuMywxLjk2LTEuMDUsMS4yNi0xLjc5LDIuODMtMi4yNCw0LjcyLS40NCwxLjg5LS42NiwzLjg2LS42Niw1LjksMCwyLjM4LjI2LDQuNzEuNzcsNi45OS41MSwyLjI4LDEuMzQsNC4xNiwyLjQ4LDUuNjIsMS4xNCwxLjQ3LDIuNjcsMi4xOCw0LjU4LDIuMTNaIi8+CiAgICAgIDxwYXRoIGQ9Ik0xMTMuNjIsNzguMzNjLTQuMDEsMC03LjE3LS40My05LjUtMS4yOS0yLjMzLS44Ni0zLjk4LTEuOTktNC45Ni0zLjM5LS45OC0xLjQtMS40Ny0yLjg5LTEuNDctNC40NywwLS45OC4yMS0xLjk2LjYzLTIuOTMuNDItLjk4LDEuMTEtMS45MiwyLjA2LTIuODMuOTUtLjkxLDIuMjctMS42NywzLjk1LTIuMjctMS45MS0uNTEtMy4yNS0xLjM0LTQuMDItMi40OC0uNzctMS4xNC0xLjE1LTIuMzYtMS4xNS0zLjY3LDAtMS4yMS40OS0yLjU3LDEuNDctNC4wOS45OC0xLjUxLDIuNzUtMi42Nyw1LjMxLTMuNDYtMS45Ni0uNzktMy41Ni0yLjAzLTQuODItMy43LTEuMjYtMS42OC0xLjkzLTMuNy0yLjAzLTYuMDgtLjA5LTIuNzkuNi01LjI4LDIuMS03LjQ0LDEuNDktMi4xNywzLjQ1LTMuODUsNS44Ny01LjA3LDIuNDItMS4yMSw0Ljk2LTEuODIsNy42Mi0xLjgyLDEuMjEsMCwyLjYxLjE2LDQuMTkuNDksMS41OC4zMywyLjk2Ljg5LDQuMTIsMS42OC41MS0xLjQ0LDEuMTgtMi44MSwxLjk5LTQuMDkuODEtMS4yOCwxLjgxLTIuMzMsMi45Ny0zLjE0LDEuMTYtLjgxLDIuNDctMS4yMiwzLjkxLTEuMjIsMS41OCwwLDIuNzguNDEsMy42LDEuMjIuODEuODIsMS4yMiwxLjksMS4yMiwzLjI1LDAsLjU2LS4xMywxLjE4LS4zOCwxLjg1LS4yNi42OC0uNywxLjI1LTEuMzMsMS43MS0uNjMuNDctMS41LjctMi42Mi43LS43LDAtMS40LS4yNy0yLjEtLjgtLjctLjU0LTEuMTItMS4xOC0xLjI2LTEuOTItLjYxLjE5LTEuMjEuNzktMS44MiwxLjgyLS42MSwxLjAzLS45NiwxLjkzLTEuMDUsMi43MywxLjM1LDEuMTcsMi4zOCwyLjUyLDMuMDcsNC4wNS43LDEuNTQsMS4wNSwzLjE5LDEuMDUsNC45NiwwLDIuNy0uNzYsNS4wOS0yLjI3LDcuMTYtMS41MSwyLjA3LTMuNDcsMy43LTUuODcsNC44OS0yLjQsMS4xOS00Ljk3LDEuNzgtNy43MiwxLjc4LS42MSwwLTEuMjgtLjA0LTIuMDMtLjEtLjc1LS4wNy0xLjQ3LS4xLTIuMTctLjEtMS4wMywwLTEuODkuMTktMi41OS41Ni0uNy4zNy0xLjA1Ljg5LTEuMDUsMS41NCwwLC44OS42NywxLjQ5LDIuMDMsMS44MiwxLjM1LjMzLDMuNjYuNTgsNi45Mi43NywzLjU5LjE5LDYuNzIuNjQsOS40LDEuMzYsMi42OC43Miw0Ljc2LDEuODUsNi4yNSwzLjM5LDEuNDksMS41NCwyLjI0LDMuNjYsMi4yNCw2LjM2LDAsMi0uNTgsMy43Ni0xLjc1LDUuMjgtMS4xNywxLjUxLTIuNzEsMi44LTQuNjUsMy44NC0xLjkzLDEuMDUtNC4wNiwxLjg0LTYuMzksMi4zOC0yLjMzLjU0LTQuNjYuOC02Ljk5LjhaTTExNS42NSw3My41MWMzLjMxLDAsNS44MS0uNjEsNy41MS0xLjgyLDEuNy0xLjIxLDIuNTUtMi40NywyLjU1LTMuNzcsMC0uOTgtLjM3LTEuNzgtMS4xMi0yLjQxLS43NS0uNjMtMS44NS0xLjEzLTMuMzItMS41LTEuNDctLjM3LTMuMzQtLjYxLTUuNjMtLjctMS4wMi0uMDktMi4yMS0uMTYtMy41Ni0uMjEtMS4zNS0uMDUtMi41NC0uMTYtMy41Ni0uMzUtLjcuNTYtMS4yMywxLjI2LTEuNjEsMi4xLS4zNy44NC0uNTgsMS42NS0uNjMsMi40NS0uMDksMS44Ni43MSwzLjM3LDIuNDEsNC41MSwxLjcsMS4xNCw0LjAyLDEuNzEsNi45NSwxLjcxWk0xMTQuNjcsNDUuNzdjMS4yNiwwLDIuMzItLjQsMy4xOC0xLjE5Ljg2LS43OSwxLjUxLTEuNzksMS45Ni0zLC40NC0xLjIxLjY2LTIuNDUuNjYtMy43LDAtMS42My0uMjEtMy4yLS42My00LjcyLS40Mi0xLjUxLTEuMDYtMi43NS0xLjkyLTMuNy0uODYtLjk1LTEuOTctMS40My0zLjMyLTEuNDMtMS44NiwwLTMuMzEuODQtNC4zMywyLjUyLTEuMDMsMS42OC0xLjU0LDMuNTktMS41NCw1LjczLDAsMS42My4yMywzLjE4LjcsNC42NS40NywxLjQ3LDEuMTQsMi42NCwyLjAzLDMuNTMuODguODksMS45NiwxLjMzLDMuMjEsMS4zM1oiLz4KICAgICAgPHBhdGggZD0iTTE2MS42Myw2MC41MWMtMy4zNSwwLTYuMzgtLjcyLTkuMDgtMi4xNy0yLjctMS40NC00LjgzLTMuNS02LjM5LTYuMTgtMS41Ni0yLjY4LTIuMzQtNS44My0yLjM0LTkuNDcsMC0zLjg3LjgtNy4yNiwyLjQxLTEwLjE3LDEuNjEtMi45MSwzLjc1LTUuMTcsNi40My02Ljc4LDIuNjgtMS42MSw1LjYtMi40MSw4Ljc3LTIuNDEsMy4zNSwwLDYuMzYuNzIsOS4wMSwyLjE3LDIuNjYsMS40NCw0Ljc1LDMuNTEsNi4yOSw2LjE4LDEuNTQsMi42OCwyLjMxLDUuODgsMi4zMSw5LjYxLDAsMy45MS0uNzUsNy4zMS0yLjI0LDEwLjItMS40OSwyLjg5LTMuNTQsNS4xMS02LjE1LDYuNjctMi42MSwxLjU2LTUuNjEsMi4zNC05LjAxLDIuMzRaTTE2MS45MSw1NS41NWMxLjg2LS4wNSwzLjI3LS43LDQuMjMtMS45Ni45NS0xLjI2LDEuNjItMi44NCwxLjk5LTQuNzUuMzctMS45MS41Ni0zLjg0LjU2LTUuOCwwLTEuNzItLjEzLTMuNDctLjM4LTUuMjQtLjI2LTEuNzctLjY2LTMuMzgtMS4yMi00LjgyLS41Ni0xLjQ0LTEuMzItMi42MS0yLjI3LTMuNDktLjk2LS44OC0yLjEzLTEuMy0zLjUzLTEuMjYtMS44Mi4wNS0zLjI1LjctNC4zLDEuOTYtMS4wNSwxLjI2LTEuNzksMi44My0yLjI0LDQuNzItLjQ0LDEuODktLjY2LDMuODYtLjY2LDUuOSwwLDIuMzguMjYsNC43MS43Nyw2Ljk5LjUxLDIuMjgsMS4zNCw0LjE2LDIuNDgsNS42MiwxLjE0LDEuNDcsMi42NywyLjE4LDQuNTgsMi4xM1oiLz4KICAgICAgPHBhdGggZD0iTTE5Ny4xMiw2MC41MWMtMS4zNSwwLTIuNTMtLjU0LTMuNTMtMS42MS0xLTEuMDctMS41LTIuMzUtMS41LTMuODRzLjUxLTIuNzcsMS41NC0zLjg0YzEuMDItMS4wNywyLjIxLTEuNjEsMy41Ni0xLjYxLDEuNDQsMCwyLjY0LjU0LDMuNiwxLjYxLjk1LDEuMDcsMS40MywyLjM1LDEuNDMsMy44NHMtLjUxLDIuNzctMS41NCwzLjg0Yy0xLjAzLDEuMDctMi4yMSwxLjYxLTMuNTYsMS42MVpNMTk0LjgyLDQ0LjUxbC0yLjY2LTI4Ljc5Yy0uMTQtMS40OS4yMi0yLjkyLDEuMDgtNC4zLjg2LTEuMzcsMi4xOC0yLjA2LDMuOTUtMi4wNiwxLjkxLDAsMy4yNS42OSw0LjAyLDIuMDYuNzcsMS4zOCwxLjA4LDIuODEuOTQsNC4zbC0yLjU5LDI4Ljc5aC00Ljc1WiIvPgogICAgPC9nPgogIDwvZz4KPC9zdmc+" />
</div>
<h1>ただいまメンテナンス中です</h1>
<p>
[サイト名]はシステムアップデートのためサービスを停止しています。<br>
ユーザーの皆様にはご不便をおかけしますが、メンテナンス終了まで今しばらくお待ちください。
</p>
<h2>メンテナンス期間</h2>
<p class="warn">
202*/**/** am9:00までに完了予定
</p>
<p>※メンテナンス期間は状況により前後する場合がございます。お急ぎの方は以下までお問い合わせください。</p>
<h2>
お問い合わせ
</h2>
<p>
メンテナンス期間中のお問い合わせは以下までお願いします。
</p>
<div class="contact">
<ul>
<li>info@example.com</li>
<li>0000-00-0000</li>
</ul>
</div>
<hr>
<div id="footer">
© [サイト名]
</div>
</div>
</body>
</html>長いけどとりあえず掲載しておきます。
実際に表示するとこんな感じになってるはず。
使うときは、
- ロゴ画像の置き換え（消しても良い）
- [サイト名]を自身のものに変換
- 問い合わせ先を記載（必要に応じて編集）
この3つをいじれば良いと思います。
.htaccessを編集
メンテナンスページができたら次は.htaccessを編集します。
もちろん、サーバー上にない場合は作る。
ErrorDocument 503 /maintenance.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !/maintenance.html
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(jpg|png|svg|css)$
RewriteCond %{REMOTE_ADDR} !xxx.xxx.xxx.xxx
RewriteRule ^.*$ - [R=503,L].htaccessの冒頭に記載。
xxx.xxx.xxx.xxxの部分は自分のIPアドレスを記載します。
自分のIPアドレスを記載することで、そのIPからアクセスした場合には通常のサイトを表示してくれる。そうしないと自分も確認できなくなる。
設定としては以上。
おつかれさま。
ふう。これで何度も検索しなくてすむぞ。
SPONSORLINK
