おしゃれなメンテナンス画面を 5 分で作れるプラグイン

Coming Soon Page & Maintenance Mode by SeedProdでメンテナンス画面を作成

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

おしゃれなメンテナンスページを簡単に作りたいとお考えの方に、ぴったりなプラグインのご紹介です。

そのプラグインは、「 Coming Soon Page & Maintenance Mode by SeedProd 」。

このプラグインを使うと、下のようなメンテナンスページを 5 分もかからず作成できます。

Coming Soon Page & Maintenance Mode by SeedProdで作成したメンテナンス画面

Coming Soon Page & Maintenance Mode by SeedProd とは?

Coming Soon Page & Maintenance Mode by SeedProd は、カウントダウンページやメンテナンスページを簡単に作成できるプラグインです。

無料版はメンテナンスページ、有料版はカウントダウンページの作成に適しています。今回ご紹介するのは無料版です。

日本語には対応していませんが、機能がシンプルなので初心者の方も扱いやすいはず。

また、メンテナンスモードに移行しても、ログインユーザーには通常のサイトが表示されます。メンテナンス中に、サイトの変更をしやすいのが特徴です。

主な機能は以下のとおりです。

  • 任意のタイミングで、カウントダウンモードやメンテナンスモードに移行できる
  • 簡単に表示テキストを変更できる
  • 好きな背景画像を選択できる
  • クローラーに配慮されている
  • javascript や CSS を利用できる

インストール

WordPress 管理画面 → プラグイン → 新規追加より、 Coming Soon Page & Maintenance Mode by SeedProd を検索しインストールします。

Coming Soon Page & Maintenance Mode by SeedProdをインストール

インストール後に有効化し、設定をしていきます。有効化してもメンテナンスモードに移行しないため、ご安心を。

設定

設定は、「 Content 」「 Design 」「 Advanced 」の 3 つのタブで行います。

Coming Soon Page & Maintenance Mode by SeedProdの設定タブ

4 つ目のタブ「 Live Preview 」は、プレビュー機能です。メンテナンスモードに移行せずとも、ページデザインを確認できます。

Content タブ

Content タブでは、基本設定を行います。

① General

General は、サイトの状態を選択する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのGeneral項目

check_box「 Status 」:「 Disabled 」「 Enable Coming Soon Mode 」「 Enable Maintenance Mode 」の 3 種類から選択できます。

  • Disabled:通常のサイトの状態
  • Enable Coming Soon Mode:カウントダウンモードに移行
  • Enable Maintenance Mode:メンテナンスモードに移行

メンテナンスをする際には、 1 番下の Enable Maintenance Mode を選択し Save All Changes をクリックします。そして、メンテナンスが終わった後は、 Disabled に戻します。

メンテナンスモードに移行すると、 WordPress 管理画面の右上にメンテナンス中である旨が表示されます。

メンテナンスモード中のWordPress管理画面

メンテナンスモードに移行しても、ログインユーザーには通常のサイトが表示されます。実際のメンテナンスページを確認する時は、 WordPress からログアウトするか、ブラウザのシークレットモードでサイトを表示します。

② Page Settings

Page Settings は、ページに表示するテキストを変更する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのPage Settings項目

check_box「 Logo 」:サイトロゴをアップロードし使用できます。ロゴを使わない場合には、設定は不要です。

check_box「 Headline 」:見出しを入力します。

check_box「 Message 」:テキストを入力します。

check_box「 Powered By SeedProd 」:フッターにプラグイン作成者のクレジットを表記するかを選択します。

Page Settings項目で設定できるテキストの説明

Header

Header は、 <head> 内に挿入するタグを設定する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのHeader項目

check_box「 Favicon 」:普段のサイトで使用中のファビコンを設定できます。

check_box「 SEO Title 」:<title> タグを設定します。メンテナンスページでは、メンテナンスと入力するといいでしょう。

check_box「 SEO Meta Description 」:メタディスクリプションを設定します。

check_box「 Analytics Code 」:Google アナリティクスを設定します。

「 SEO Meta Description 」と「 Analytics Code 」は、カウントダウンページに必要なものです。メンテナンスページを作成する際には、空白で構いません。

Design タブ

Design タブでは、ページのデザインを変更します。

① Background

Background は、ページの背景色や背景画像を変更する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのBackground項目

check_box「 Background Color 」:背景色を変更できます。

check_box「 Background Image 」:背景画像をアップロードし変更できます。背景画像は 1920 x 1280 px 以上がおすすめです。 ” Send Me FREE Background Images ” ボタンをクリックすると、メールアドレスに 10 枚ほどの画像が届きます。メールアドレスの登録解除にも対応しており、画像選びに迷った時に便利です。

check_box「 Responsive Background 」:背景画像をレスポンシブに対応させるかを選択できます。通常はチェックを入れます。

check_box「 Responsive Size 」:背景画像の大きさを指定します。通常は Cover を指定します。この指定は、 CSS の background-size と同じです。

  • Cover:背景画像の縦横比を維持しつつ、背景領域を完全に覆い表示される。
  • Contain:背景画像の縦横比を維持しつつ、背景画像が全て見えるように表示される。

check_box「 Dim Background 」:背景画像を暗くします。これにより、テキストが見えやすくなります。

Dim Backgroundの無効時と有効時の違い上が Dim Background 無効時、下が有効時

check_box「 Background Repeat 」:背景画像をリピート表示するかを指定します。「 Responsive Background 」にチェックを入れると適用されません。

check_box「 Background Position 」:背景画像の表示開始位置を指定します。「 Responsive Background 」にチェックを入れると適用されません。

check_box「 Background Attachment 」:画面をスクロール時に、背景画像を固定するか、スクロールに伴い移動するかを指定します。「 Responsive Background 」にチェックを入れると適用されません。

  • Fixed:背景画像を固定し表示します。
  • Scroll:スクロールに伴い、背景画像も一緒に移動します。

② Content

Content は、テキストエリアのデザインを変更する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのContent項目

check_box「 Max Width 」:テキストエリアの最大幅を指定します。何も指定しない場合には、 600px が適用されます。

check_box「 Enable Well 」:テキストエリアをボックスで囲みます。

Enable Wellにチェックを入れた例Enable Well にチェックを入れた例

③ Text

Text は、フォント色を変更する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのText項目

check_box「 Text Color 」:テキストのフォント色を変更します。

check_box「 Link Color 」:リンクがある場合に、リンク色を変更します。

check_box「 Headline Color 」:見出しのフォント色を変更します。何も指定しないと、「 Link Color 」が適用されます。

check_box「 Text Font 」:フォントファミリーを変更します。

④ Template

Template は、独自の CSS を指定する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのTemplate項目

check_box「 Custom CSS 」:独自のデザインにしたい場合に、 CSS を指定します。

② Content の「 Enable Well 」にチェックを入れ、下記の CSS を「 Custom CSS 」に入力してみます。

#seed-csp4-content {
  background: rgba(0, 0, 0, .2);
  border: none;
}

すると、下の画像のようにテキストエリアの背景色のみ変更できます。

Enable Wellにチェックを入れCSSを指定した例

Advance タブ

Advance タブでは、高度な設定が行えます。

① Scripts

Scripts は、 javascript の読み込みや HTML を変更する項目です。

Coming Soon Page & Maintenance Mode by SeedProdのScripts項目

check_box「 Disable Default Excluded URLs 」:カウントダウンモード中やメンテナンスモード中に、デフォルトのロックアウト( ログイン排除 )機能を停止するかを選択します。

check_box「 Header Scripts 」:<head> 内に スクリプトを設置します。

check_box「 Footer Scripts 」:フッター( </body> 直前 )にスクリプトを設置します。

check_box「 Custom HTML 」:プラグインのテンプレートを全て変更します。

check_box「 Append HTML 」:プラグインのテンプレートの最後に、独自の HTML を追加します。

メンテナンスページを作成する際には、全て空白で構いません。


デザイン性の高いメンテナンスページを簡単に作れる Coming Soon Page & Maintenance Mode by SeedProd 。

店舗やサービス、ブランドなど、メンテナンスページにもこだわりたいサイトに最適なプラグインです。

また、テスト環境にインストールするのもおすすめ。テスト環境がインデックスされるリスクが小さくなります。私のテスト環境は、常にこのプラグインでメンテナンスモード中です。