美容室Webサイトテンプレート

美容室向けのシンプルで上品な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の変更から始めることをおすすめします。