メンテナンス用HTML&.htaccessジェネレータ―WordPress&その他のCMSでも動作

メンテナンス用HTML&.htaccessジェネレータ―WordPress&その他のCMSでも動作
メンテナンス用HTML&.htaccessジェネレータ―WordPress&その他のCMSでも動作

 

 

Are you want to translate this page to English? Please click this link to translate via ‘©Google Translate'!

ganohr.net favicon

みなさんこんにちは、ガノー(Twitter:Ganohr)です。

ウェブサイトは定期的にメンテナンスを行わなければなりません。

 

当方はLancersというクラウドソーシングにおいて、WordPressやサイトのメンテナンスにおいて、認定ランサーという技術力の高さを認定された上で活動しています。

特にWordPressはプラグインによってメンテナンス表示ができますが、「無用な機能が多い・細かい調整ができない・そもそもその環境で正しく動くか導入前に調査が必要で面倒くさい」という理由でお勧めしていません。

 

そうしたプラグインを利用しない場合、.htaccessにメンテナンス用の設定を自力で行う必要があります。

そこでこの記事では「メンテナンス表示に使用できるHTMLの生成」と、「.htaccessにコピペで導入できる設定ジェネレータ」を実装し、提供します。

更新履歴
2023/05/16 微修正
2022/12/26 Retry-After他、説明を更新
2022/12/25 出力される.htaccessに誤りがあったのを修正
2022/12/07 公開

メンテナンス表示用HTML&.htaccess生成とコピー


メンテナンスする日と期間を設定し、HTMLコードをコピーしてください。

また、アクセス許可するIPアドレスやホスト名を設定後、.htaccess用の定義をコピーしてください。

メンテナンス日の設定

※ yyyy/mm/ddの形式で入力してください。

メンテナンス時間の設定

※ HH:MMの形式で入力してください

メンテナンス表示用HTML

上記のテキストボックスに値を入れたあと、「COPY CODE」ボタンを押せば設定した内容が反映されたHTMLをコピーできます!
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex,nofollow,noarchive" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>現在メンテナンス中です</title>
<style>
body {
    margin: 0;
}
.outer {
    width: 100%;
    height: 100%;
    position: fixed;
    padding: 0;
    margin: 0;
}
.inner {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    flex-direction: column;
    justify-content: center;
    display: flex;
    position: absolute;
    vertical-align: middle;
    width: 80%;
    max-width: 600px;
    height: 40%;
    border: 1px solid;
    padding: 1em;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow-y: auto
}
h1 {
    font-size: 120%;
    text-align: center;
    background: crimson;
    color: white;
    line-height: 2;
}
dt {
    font-weight: bold;
    color: white;
    background: black;
    width: auto;
    display: inline-block;
}
dd {
    color: crimson;
    font-weight: bold;
    text-align: center;
    margin: 0;
}
p {
    margin: 0em 2em;
}
</style>
</head>
<body>
    <div class="outer">
        <div class="inner">
            <h1>ただいまメンテナンス中です</h1>
            <dl>
                <dt>【Maintenance】</dt>
                <dd>2022年12月07日 2:454:00 JST</dd>
            </dl>
            <p>ご利用の皆様にはご迷惑をおかけし、申し訳ございません。</p>
            <p>メンテナンス終了までお待ちください。</p>
            </p>
        </div>
    </div>
</body>
</html><!-- created by https://ganohr.net/blog/generator-of-site-maintenance-html-and-htaccess/ -->

メンテナンス中でも接続を許可するip又はドメインの指定

このツールは「メンテナンス中でもアクセスを許可する端末」を「IPアドレスや、ホスト名で指定」できます。

この機能を用いることで、

メンテナンス中でも、選択的にサイトを操作できる人を指定できる

ので大変便利です。

 

例えばスマホを利用していれば、自宅からのWiFiでの接続は通常通りに表示し、4G/5G回線ならメンテナンス中として表示できるようになります。



 

 

留意点

  • IPアドレスは先頭に「^」記号を付ける必要があります。
  • 「^」で始まらない場合、ホスト名を指定したものとして解釈します。
  • IPアドレスはCIDR表記を利用できません。複数のIPアドレスにマッチさせたい場合、「^8.8.」のように、共通する部分まで指定してください。
  • IPアドレス及びホスト名に含まれる「.」記号は自動的にエスケープされますので、「¥.」のように表記する必要はありません。
  • IPアドレスの終端は「$」か「.」で終わらせることを推奨します

メンテナンス表示用の.htaccess

上にある「接続を許可するip又はドメインの指定」でIPアドレスやホスト名の一覧を構築後、「.htaccessを生成しクリップボードへコピー」ボタンを押すと、以下に.htaccessの内容が表示&更新されます。

 

HTMLと.htaccessを用いたメンテナンス表示の仕方

このメンテナンス表示ツールを利用して表示した、ウェブサイトのメンテナンス中画面
このメンテナンス表示ツールを利用して表示した、ウェブサイトのメンテナンス中画面。SEOにも配慮されており、必要なコードが簡単な操作で生成できるため大変便利。

 

まず、メンテナンス表示に用いるHTMLを「メンテナンス表示用HTML&.htaccess生成とコピー」を用いて「メンテナンス日の設定」を行い、続けて「メンテナンス時間の設定」を行い、「メンテナンス表示用HTML」からHTMLをコピーします。

このときコピーしたHTMLを「maintenance.html」として保存してください。

 

次に、「接続を許可するip又はドメインの指定」を用いて、メンテナンス中にアクセスを許可するIPアドレスまたはホスト名を追加してください。

ここで指定するIPアドレスは、基本的にはあなたのIPアドレスです。

 

なお、広告ブロッカーを利用している場合、一覧は空欄になってしまいますが、広告ブロッカーを利用していなければあなたのIPアドレスが自動的に設定されるため便利です。

この機会に当サイト(ganohr.net)を「お使いの広告ブロッカーのホワイトリストへ登録」してください。

サムネイル【サイト情報】広告ブロッカー利用中の方々へ当サイト『ぺるせぽ.』はみだりに広告ブロッカーを利用している方々へ警告を表示することとしました.この警告を無視して閲覧したい場合は「☓」ボタンを押すか警告文の領域外をクリックすることで非表示に出来ます.当サイトは個人が有料のレンタルサーバーを用いて高品質な情報を高速・軽量・高レスポンスにて提供するものでありサービス提供のクオリティを維持するためにも広告収入は必要不可欠です.より詳しい情報が知りたい方は以下のリンクからご確認下さい.また広告ブロッカーやトラッキング防止機能の調整 ... 続きを読むganohr.net2022-11-21

 

アクセスを許可するIPアドレスやホスト名を設定したら「.htaccessを生成しクリップボードへコピー」ボタンを押せば、自動的に.htaccessが生成され、クリップボードへコピーされます。

あとはコピーしたコードを、public_html直下にある.htaccessファイルを開き、定義の最後にコピペしてください。

 

たったこれだけで簡単にメンテナンス表示ができます。

このツールの特徴

スーツ姿の女性(要点を伝えようと、人差し指を上に出している)
このツールはWordPressのプラグイン等を使うよりも圧倒的に楽に、そしてSEO的にもユーザビリティ的にも正しくメンテナンス表示ができます!操作も設置も簡単ですよ!

 

このページで提供するツールを使えば、HTML&.htaccessを簡単に生成し、メンテナンス表示を行えます。

しかも、ここで生成するHTMLや.htaccessはSEOに配慮しており、「メンテナンス中であるにも関わらず、検索エンジンにサイトが落ちていると誤判定されて、SEO順位に悪影響が出ることを緩和できる」ようになります。

また、メンテナンス用のHTMLは完全レスポンシブ対応のため、PCでもスマホでもレイアウト崩れが起こりません。

※ 検索して引っかかるメンテナンス用HTMLは殆どがレスポンシブ対応が甘く、画面が崩れたり悲惨です。

 

加えて

.htaccessRetry-After――アクセスしてきたボット(たとえばGooglebotやBingbot等)に対して、次回以降にアクセスすべき時間(要はメンテナンス開けとなる日時)を指定する定義――は、‘GMT’(Greenwich Mean Time)表記が必須です。しかし日本では‘JST’(Japan Standard Time、日本標準時)が基準となっており、その変換と記述は案外面倒です。

その点このツールなら、面倒なJST→GMTの変換も行ってくれるため、大変便利です。

サムネイルUTCとGMTとJSTの違いは?原子時計~クオーツ時計まで体系的に解説!うるう秒の謎が分かった!UTC(協定世界時)とGMT(世界標準時)の違いはご存知でしょうか。そして日本で使われているJSTとの関係はなんでしょうか。これらの違いを解説し、UTCの特徴である「うるう秒」の謎、クオーツ時計や原子時計まで体系的に解説します! ... 続きを読むganohr.net2017-03-01

 

更には、このツールは完全にJavascriptのみで実装されています。

したがって当サイトにコードが保管されることもありませんので、安心してご利用ください。

 

ただし、アクセスしたあなたのIPアドレスを特定するため、「ipinfo.io」を用いています。

これはJavascript上で利用者のIPアドレスを特定するためのウェブサービスです。

サムネイルThe trusted source for IP address data, leading IP data providerGet accurate and reliable IP address information with IPinfo. Trusted by over 400,000 users, developers and businesses, we handle more than 40 billion ... 外部サイトへアクセスipinfo.io

 

こうした外部ツールでIPアドレスを特定しているのは、

実際のメンテナンス時にそのメンテナンスを行う方――通常はあなた――が、サイトにアクセスできなくなることを防止するため、予めツール上であなたのIPアドレスを許可しているという理由です。

 

このように、様々な機能を持つ本ツールは、

結構面倒くさい「サイトのメンテナンス表示」をボタン操作と簡単なテキスト入力で可能にするツール

といえるのです。

メンテナンス表示の解除

メンテナンス表示を終了するのは簡単です。

.htaccessへ追加したコードを削除するだけです。

ツールへの要望やバグの報告

このツールへの要望やバグの報告は、この記事のコメント欄にお願いします!

Twitterとかで呟かれても修正できません!

最後に

サイトの改修を請け負っていると、メンテナンス表示はしょっちゅう設定します。

しかしWordPressでいちいちプラグインを使うのは面倒くさい。でも.htaccessにメンテナンス表示用の定義をコメントアウトして入れ込んでおいても、JST→GMT変換が鬱陶しい。

 

そんな実際にメンテナンスを日々行っている技術者として、私が欲しい機能を盛り込みました。

ぜひ便利に使ってくださいね!

 

以上、ガノー(Twitter:ganohr)でした!

関連記事

サムネイルコードがどんなプログラミング言語で書かれているのか判定するツール手元にあるコードのプログラミング言語が不明な際にオンラインで使えるツールを開発!約200言語の特定に対応し,クライアントサイドで完結するためセキュリティ的に安全に使えます!ChatGPT版も開発しました ... 続きを読むganohr.net2022-03-30

WordPressの不具合対応/カスタマイズ¥15,000~

PC歴25年超、SE歴10年超、WordPress運営歴7年超、WordPressエンジニア歴5年超のスキルとノウハウを提供します

当サイト管理人の「ガノー」(Ganohr)は、日本最大手且つ東証一部上場企業が運営するクラウドソーシングサイト『Lancers』にて、認定ランサーとして活動しています。


※ 認定ランサーとはLancersにより様々な能力 ( 高い仕事遂行率・高い顧客満足度・多くの実績、など ) を評価したプロフェッショナルを認定する制度です。

 

.htaccessカテゴリの最新記事