立ち上げ準備中のページ専用で使える無料レスポンシブデザインテンプレート(html)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

別の記事でドメイン取得後に「独自メールアドレスを発行する手順」をご紹介いたしました。独自メールアドレスはレンタルサーバー側でドメイン設定が連携していれば使えます。ウェブサイトのページを立ち上げていなくても問題ありません。とはいえ人によってはページ側を「準備中」にしておきたい方もいるはずです。

本日はウェブサイト側に差し込める『立ち上げ準備中の専用テンプレート』を解説させていただきます。レンタルサーバーのドメインフォルダ内にindex.htmlをアップロードするだけで使える便利ファイルです。

最下部URLからファイルのダウンロードも可能なのでぜひご活用くださいませ。

立ち上げ準備中のページ専用で使えるデザインテンプレート(html)

準備中に使えるテンプレートのデザインが以下です。アイコンと見出しと本文という3つの構成でシンプルな見た目に仕上げています。htmlファイルの編集はむずかしいという方に向けて「そのままアップロードしても使える文章」にしていますのでご安心くださいませ。細かく微調整をされる場合はご自由に編集ください。

パソコンでの表示例

各コンテンツをセンタリングさせています。特に複雑な設定はしていません。シンプルイズベスト。

スマホでの表示例

念のためスマホでも最適化表示されるよう設計いたしました。こちらもレイアウトはシンプルです。

アイコンをカスタマイズする方法

もし「公開準備中」や「現在ページの準備を進めています。今しばらくお待ちくださいませ。」を編集する場合はUTF-8に対応したテキストエディターで開いて上書き保存をすればOKです。通常のメモ帳では文字コードを適切に扱えないため一部の環境(Windows等)で文字化けが発生するのでご注意くださいませ。

ちなみにアイコンは「SVG」で読み込んでいます。アイコンをJPEGやPNGで読み込ませると特定の環境(iPhoneやMacbookの非Retinaモニター)で画像がにじむ現象が発生するでSVGで対策しています。

多少の知識があれば「SVGのまま」でお好きなアイコンへ変更できるので自信があればぜひお試しください。

<アイコンを入れ替える手順>
1. 商用利用が可能なSVGアイコンを手に入れる(MITライセンス等)
2. SVGアイコンのサイズを63pxへ変更する(サイズもお好みでどうぞ)
3. 新しいSVGのpathデータを調べて差し替える(htmlを編集すればOK)

遊び心で時計のアイコンはあえて「おやつの時間(3時)」を指定しています。コーヒーとスナック片手に休憩しながらページの立ち上げを進めてくださいね。準備中のページをずっと使用してもOKです。

まとめ

本日は準備中のページを立ち上げる専用のレスポンシブテンプレートをご紹介させていただきました。ファイルのダウンロードはこちらから行なえます。なお、配布先がわかるよう念のためクレジット表記を差し込んでいますので可能な限りそのままご使用ください。非表示にされる場合は設置場所のご報告だけお願いいたします。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する