メンテナンス中ページの作り方

web

画像mente.pngを作って使う例

mente.html

 <!DOCTYPE html>
  <html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>メンテナンス中です | Blog</title>
<!-- 全てのブラウザで同じに見えるようreset.cssを読み込みます-->
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" type="text/css" href="/mente.css">
  </head>
  <body>
    <header>
      <div class="logo-container">
        <div class="logo">
          <p>Blog</p>
        </div>
      </div>
    </header>
    <div class="top-container">
      <div class="container">
        <div class="maintanance-now">
          <p>ただいまメンテナンス中です。</p>
<!--画像もご自身のサーバーから好きなものを使ってください-->
          <img src="mente.jpg" width=30% height=30%>
          <p>一時的にご利用いただけない状態となっております。</p>
          <p>ご不便をおかけいたしまして申し訳ございません。</p>
        </div>
        <div class="maintanance-supplement" >
          <p>2020年5月6日24時 終了予定です。</p>
          <p>※終了時間は作業により若干送れる場合がございますことをご了承ください。</\p>
        </div>
      </div>
    </div>
    <footer>
      <div class="logo-container">
        <div class="logo">
          <p>Blog All Rights Reserved.</p>
        </div>
      </div>
    </footer>
  </body>
  </html>

mente.css

body{
      margin:0;
      top:0;
      height:100vh;
    }
    header{
      height:60px;
      width:100%;
      background-color:black;
      color:white;
      top:0;
      left:0;
    }
    .logo-container{
      height:100%;
    }
    .logo{
      font-family:Hiragino Kaku Gothic ProN;
      text-align:center;
      position:relative;
      top:50%;
      transform: translateY(-50%);
      color:white;
      letter-spacing:1px;
      margin:0 0 0 5px;
    }
    .logo-container.logo p{
      margin:0;
      height:100%;
    }
    .container{
      font-family:Hiragino Kaku Gothic ProN;
      letter-spacing:0.3px;
      text-align: center;
    }
    .maintanance-now{
      padding: 30px;
    }
    .maintanance-now p{
      font-size: 20px;
      padding:3px;
    }
    .maintanance-now img{
      padding: 10px;
    }

    .maintanance-supplement{
      display: block;
      margin-left: auto;
      margin-right: auto;
      padding: 15px;
      background-color:#9f9f9f;
      color:#ffffff;
      font-size: 15px;
      width:75%;
    }

    footer{
      height:60px;
      width:100%;
      background-color:black;
      color:white;
      bottom: 0;
    }

.htaccess

ErrorDocument 503 /mente.html
  <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} !=/mente.html
    RewriteCond %{REQUEST_URI} !=/mente.css
    RewriteCond %{REQUEST_URI} !=/mente.png
    RewriteRule ^.*$ - [R=503,L]
  </IfModule>
  <IfModule mod_headers.c>
    Header set Retry-After "Wed, 6 May 2020 9:00:00 GMT"
  </IfModule>

ネタ元