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

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

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

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

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

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

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

国内最大級の広告サービスでエンジニア職

⇒ 今すぐ募集内容をチェック - 株式会社ファンコミュニケーションズ【AD】 -

パソコンでの表示例

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

スマホでの表示例

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

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

もし「公開準備中」や「現在ページの準備を進めています。今しばらくお待ちくださいませ。」を編集する場合は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です。

まとめ

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

- 新コースでワードプレスを学ぶ【AD】-

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください