美容室向けのシンプルで上品なWebサイトテンプレートです。 HTML・CSS・JavaScriptで構成されているため、専門的なソフトを使わずに編集できます。 【収録内容】 ・index.html ・style.css ・script.js ・README.txt ・imagesフォルダ 【変更できる項目】 ・店舗名 ・住所 ・電話番号 ・営業時間 ・メニュー ・料金 ・スタッフ情報 ・画像 ・Web予約リンク 【使い方】 1. ZIPファイルを解凍 2. index.htmlをブラウザで開いて確認 3. 店名・住所・電話番号・料金などを自分の情報に変更 4. imagesフォルダの画像を自分の画像に差し替え 5. 必要に応じてWebサーバーへアップロード 【動作環境】 Google Chrome / Microsoft Edge / Safariなどの一般的なWebブラウザ Windows・MacのPCに対応しています。 【注意事項】 ※本商品はPCでの編集・利用を推奨しています。スマートフォンから購入できますが、編集にはPCが必要です。 掲載されている店舗名・住所・電話番号・スタッフ名はサンプルです。 購入後、ご自身の情報へ変更してご利用ください。 テンプレートそのものの再販売・再配布は禁止しています。 【ファイル形式】 ZIP形式 ━━━━━━━━━━━━━━━━━━ 【購入後の詳しい編集方法】 ━━━━━━━━━━━━━━━━━━ HTMLの編集が初めての方でもご利用いただけるよう、基本的な編集方法を説明します。 ■ STEP 1｜編集する準備 【Windowsの場合】 PCでZIPファイルを右クリックし、「すべて展開」などを選択して解凍してください。 編集にはWindows標準の「メモ帳」を使用できます。 追加の編集ソフトをインストールする必要はありません。 より編集しやすいソフトを使用したい場合は、Visual Studio Codeなどの無料エディターも利用できます。 【Macの場合】 ZIPファイルをダブルクリックして解凍してください。 編集にはMac標準の「テキストエディット」を使用できます。 ただし、HTMLを編集する場合は「標準テキスト」に設定して使用してください。 より編集しやすいソフトを使用したい場合は、Visual Studio Codeなどの無料エディターも利用できます。 ■ STEP 2｜index.htmlを開く 解凍したフォルダの中にある「index.html」を編集します。 【Windows】 「index.html」を右クリック ↓ 「プログラムから開く」 ↓ 「メモ帳」 で開けます。 【Mac】 「index.html」を右クリック ↓ 「このアプリケーションで開く」 ↓ 「テキストエディット」 で開けます。 ※Macのテキストエディットを使用する場合は、リッチテキストではなく「標準テキスト」で編集してください。 ■ STEP 3｜文字を変更する 【Windows】 メモ帳で「Ctrl + F」を押すと、ページ内の文字を検索できます。 【Mac】 「command + F」を押すと、ページ内の文字を検索できます。 例えば、 LUMIERE と検索すると、店舗名が書かれている場所を探せます。 見つかった文字を、自分のお店の名前に変更してください。 住所・電話番号・営業時間・メニュー・料金・スタッフ情報なども同じ方法で変更できます。 ■ STEP 4｜画像を変更する 「images」フォルダの中にある画像を、自分の画像に差し替えます。 画像のファイル名を変更した場合は、index.htmlに書かれている画像ファイル名も変更する必要があります。 例： <img src="images/shop.jpg"> 「shop.jpg」という画像を使用する場合、imagesフォルダ内にも同じ名前の画像を用意します。 ■ STEP 5｜予約URLを変更する index.html内にある予約ボタンのURLを、自分の予約ページのURLに変更します。 例： <a href="https://example.com">予約する</a> 「https://example.com」の部分を、ご自身の予約ページのURLに変更してください。 ■ STEP 6｜保存する 編集が終わったら保存します。 Windows： 「Ctrl + S」 Mac： 「command + S」 その後、index.htmlをブラウザで開くと、変更したWebサイトを確認できます。 ■ STEP 7｜公開する 完成したWebサイトをインターネット上で公開する場合は、レンタルサーバーなどへファイルをアップロードしてください。 公開方法は、ご利用になるサーバーによって異なります。 ■ 編集の基本 「文字を変える」 → index.htmlを編集 「画像を変える」 → imagesフォルダの画像を差し替える 「予約先を変える」 → index.html内のURLを変更 「デザインを大きく変更する」 → style.cssを編集 「動作を変更する」 → script.jsを編集 HTML編集が初めての方は、まずindex.htmlの文字・画像・URLの変更から始めることをおすすめします。