Bloggerメンテナンスモード向けテンプレート その2

Bloggerのメンテナンスモード向けのシンプルなテンプレート?その2です

現在デモ > https://garupan-app.blogspot.com/

導入に関してはこちらも参照してください

• Bloggerにメンテナンスモードを導入する

Code

更新 Google Fonts 関連のコードコードを追加しました
追記 何でかスペル間違ってました

<!-- Start maintenance -->
<b:else/>
  <b:tag name='head'>
    <title>只今メンテナンス中です</title>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <b:include data='blog' name='all-head-content'/>
    <link href='https://fonts.googleapis.com' rel='preconnect'/>
    <link crossorigin='' href='https://fonts.gstatic.com' rel='preconnect'/>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800|Playfair+Display:,300, 400, 700' rel='stylesheet'/>
    <link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css' integrity='sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr' rel='stylesheet'/>
    <!-- meta tag -->
<style>
body {
  font-family: &quot;Open Sans&quot;, Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.8;
  color: #b3b3b3;
  background: #fff;
}

a {
  -webkit-transition: .3s all ease;
  -o-transition: .3s all ease;
  transition: .3s all ease;
  text-decoration: none;
  color: #F73859;
}

a:hover {
  text-decoration: none;
  color: #da092d;
}

h1, h2, h3 {
  color: #000;
  font-family: &quot;Playfair Display&quot;, times, serif;
}

main, aside {
  width: 100%;
}

@media (min-width: 576px) {
  main, aside {
    width: 50%;
  }
}

aside {
  background-position: center center;
  background-size: cover;
  height: 400px;
  position: relative;
}

@media (min-width: 576px) {
  aside {
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
  }
}

main {
  float: left;
  padding: 7%;
  position: relative;
}
</style>
  </b:tag>
  <b:tag name='body'>
    <!-- Your design -->
<aside style='background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgRGYVVKfX-cDl3sflh8CX-Os_Qyu_xwCMreFZ24Bsmy9d0u-RrM4Wyl8UFvSIem9wDFoXBAQIwOJNJVpkMZFmAMToxztNkywRGvkvSmTCdyBlNm4YbNpI-BgkpK-maoyzwy4uTBVwfFPn45y3Q_ox-HTaUOWSjQ1bB318Rhgk5jJPfYEtIuk_1Ombloy/s1920/GxBBC0ObUAcJsTh.jpg);'/>
      <main>
        <h1 class='mb-5'>Coming Soon</h1>
        <div class='mb-5'>
        <p class='lead mb-3'>Our website is currently undergoing scheduled maintenance. We Should be back shortly. Thank you for your patience.</p>
        </div>
        <p>
          <a class='me-2 mb-2' href='#'>X(Twitter)</a>
          <a class='me-2 mb-2' href='#'>Facebook</a>
          <a class='me-2 mb-2' href='#'>Instagram</a> 
       </p>
      </main>
  </b:tag>
</b:if><!-- End -->
</b:with>
<!-- End of maintenance -->

Bootstrap v5 を使用しています
(メンテナンスモードでのみ読み込むので、他で影響はありません)

FPSのメンテナンス画面はこれにしようかと思うんですが

通常モバイルデバイスでは画像が上に配置されますが、メディア クエリ が完全ではないので、iPad Mini などでは画面が2分割されます。
そこは個別に対応するしかないと思います。
縦長の画像だと割とフィットするかもしれない(私が使いたいのは正方形の画像だけど)
あとは background-position で対処してください

関連エントリ

• Bloggerメンテナンスモード向けテンプレート