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

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

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

現在デモ > https://ws007sh-kustom.blogspot.com/

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

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

Code

更新 スペルが間違ってたので直しました
更に更新 Bootstrap重複、不要CSS削除
SNS表記修正

<!-- Start maintenance -->
<b:else/>
  <b:tag name='head'>
    <title>Coming Soon</title>
    <meta content='width=device-width, initial-scale=1' name='viewport'/>
    <b:include data='blog' name='all-head-content'/>
    <link crossorigin='anonymous' href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css' integrity='sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB' rel='stylesheet'/>
    <!-- meta tag -->
<style>
html{height:100%!important}
/*
 * Globals
 */


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  width: 100%;
  height: auto;
  background-image: url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7R-VnbHnjhXEVX0LlEFCotNCLXz8LLNUyx7r84Iq-IjNnHD442fpl-QrgmUEBzZZzsLLGPuP3tj3VbvVoW-U3q3P9yGbvdmZdmKcmMYHTRldBupQoBnq78dZSiBKGYSfnlnmLrDlNDVR_WJTtnNF0Eg6UYbDoJAJ2GyOH0iZdWbCcAlDOajpcZwbGZSP7/s1600/coming-soon-1375607_1280.webp&#39;);
  background-size: cover;
}

.cover-container {
  max-width: 42em;
}
</style>
  </b:tag>
  <b:tag class='d-flex h-100 text-center text-bg-dark' name='body'>
    <!-- Your design -->
<div class='cover-container d-flex w-100 h-100 p-3 mx-auto flex-column'>
<header class='mb-auto'>
<div>
<h3 class='float-md-start mb-0'>Logo</h3>
</div>
</header>
<main class='px-3'>
<h1>Coming Soon</h1>
<p class='lead'>Our website is currently undergoing scheduled maintenance. We Should be back shortly. Thank you for your patience.</p>
<p class='lead'> <a class='btn btn-lg btn-light fw-bold border-white bg-white' href='#'>NOTIFY US</a> </p>
</main>
<footer class='mt-auto text-white-50'>
<p><a class='text-white' href='#'>Facebook</a>, <a class='text-white' href='#'>X(Twitter)</a>, <a class='text-white' href='#'>Instagram</a></p>
</footer>
</div>
  </b:tag>
</b:if><!-- End -->
</b:with>
<!-- End of maintenance -->

必要に応じて bodyのCSSに background-position: center; などを追加してください

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

追記
背景画像を使用しているので、必要に応じて preload するといいかもしれません

• [HTML]preloadでブラウザレンダリングが始まる前に画像等のリソースを読み込む

関連エントリ

• 公開している中で現在メンテナンス継続中のBloggerテンプレート