会社概要

テンプレートのご利用前に必ずお読み下さい

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『エステサロン向け 無料ホームページテンプレート esthe4』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

トップページのスライドショー写真は、配布元サイト（写真ACさん）の規約により再配布できません

写真ACさんから「無料」でダウンロードできるので、同じ写真を使いたい場合はACさんの規約を読んだ上で直接ダウンロードして下さい。

• １枚目写真のDL先（※リンク先はACさんです）
• ２枚目写真のDL先（※リンク先はACさんです）
• ３枚目写真のDL先（※リンク先はACさんです）

当テンプレートにはお問い合わせフォーム（自動フォーム：試用版）がセットされています

contact.htmlと同じ３項目のお問い合わせフォームを簡単に使えるようにセットしています。

自動フォームを使う場合（※編集に入る前にご確認下さい）
あなたのメールアドレス設定と、簡単な編集だけで使えます。詳しくはこちらのマニュアルをご覧下さい。

自動フォームを使わない場合
テンプレートに梱包されている「form.html」「confirm.html」「finish.html」の3枚のファイルを削除して下さい。

2021年10月「以前」にテンプレートを利用した事のあるお客様へ

2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
今後しばらく新作テンプレートの手直しが入るかもしれません。

• モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
• IE10以前は考慮しておりません。Microsoft社のIEサポートが2022年6月で終了する為、IE11の動作チェックも近いうちに終了させて頂きます。
• floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。

当テンプレートの使い方

初心者向けマニュアル公開中

画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。

titleタグ、copyright、metaタグ、他の設定

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>エステサロン向け 無料ホームページテンプレート esthe4</title>
を編集しましょう。
あなたのホームページ名が「ESTHETIC SALON」だとすれば、
<title>ESTHETIC SALON</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Esthetic Salon All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。

ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。

h1ロゴのaltタグも変更しましょう。
html側に、
alt="Esthetic Salon"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

トップページのスライドショー（vegas）の解説

トップページのスライドショーには、vegasを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。

vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/

上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。

画像を入れ替える場合や、枚数を変更したい場合。
画像サイズは自由で構いませんが、閲覧しているウィンドウサイズにより、スライドショー画像はトリミングされますので、切り抜かれてもおかしくない画像をご用意下さい。
枚数を変更する場合やファイル名を変更する場合は、jsフォルダのvegas.jsを開いて編集して下さい。枚数追加は、既存の画像読み込み行をコピペして画像ファイル名を入れ替えるだけでOKです。

vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある「vegas.min.css」の読み込みの１行。
2. html下部にある、「スライドショー画像」のブロック。
3. その下にある「jQueryの読み込み」のブロック。※下のjsファイルより先に読み込んで下さい。
4. その下にある「スライドショー（vegas）」のブロック。
5. jsフォルダ内の「vegas.js」。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、CDNから読み込んでいるjQueryのバージョン及びvegas関連のファイルのバージョンを変更して動作するか確認してみて下さい。

スライドショーでなく、固定画像にしたい場合。
html下部にある、「スライドショー（vegas）」のブロックを削除。
jsフォルダのvegas.jsファイルも合わせて削除しておきます。
次に、cssフォルダのstyle.cssを開き、
#mainimg {
のブロックを削除します。
続いて、その上にある、
body {
の中の、
background: #fff;
を以下に変更します。以下はimagesフォルダの1.jpgを読み込む例です。
background: #fff url(../images/1.jpg) no-repeat center center / cover;

アイコン画像について（Font Awesomeの解説）

imagesフォルダに入っていない画像（アイコン）は全てFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。
1. cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。

左側のブロックについて（※画面幅900px以上で見た場合）

画面の「高さ」が「720px以下」になった場合
左側のブロックの高さが若干圧縮されます。
この設定がなくても、画面の高さを超えたコンテンツ量になれば自動でスクロールバーが出るのですが、あまり見た目がよくないのでできるだけ出にくい対策をしました。

さらに画面の「高さ」が狭くなると、自動でスクロールバーが出るようになっています。
今のメニュー数のままなら特に調整不要ですが、増やす際は、cssフォルダのstyle.cssの中程にある、
@media screen and (max-height:720px) {
の720の数値を少し増やして調整してみて下さい。
※変更しなくてもメニューが切れるわけではないので、そのままでも特に問題はないです。

画面幅900px以下になると開閉メニューになります

この基準サイズ（ブレイクポイント）を変更したい場合は、cssフォルダのstyle.cssの、
@media screen and (min-width:900px) {
の900の数字を変更します。
続いて、jsフォルダのmain.jsの、
var winBP = 900; //ブレイクポイント
という箇所を探して、ここの数字も合わせて変更して下さい。
どちらか一方だけ変更するとレイアウトに問題が出るので必ずセットで変更するようにして下さい。

「よく頂くご質問」で使っている開閉ブロックについて

汎用的な開閉ブロックなので、どこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"

フォントサイズ（px,rem,em）について

cssフォルダのstyle.cssで、基準となるフォントサイズを２箇所、pxで記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOK。

１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 14px;
２つ目は下の方にある、画面幅900px以上の端末向けで、以下。
font-size: 16px;

「rem」の単位がついたフォントは、上の２箇所あるpxのサイズに対して「相対的」に出しているサイズになります。
例えば、900px未満の画面幅の時の基準サイズは「14px」なので、他の要素などで28pxで表示させたい場合は、
28px ÷ 14px = 2rem(28px)
となります。（cssの指定は、font-size: 2rem;　となる。）

10pxにしたい場合も同様です。この場合、
10px ÷ 14 = 0.7142...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。

または計算などせず、「見た目」でremの数値を決めてしまってもいいでしょう。
実際このテンプレートのremは、厳密に割り出したわけじゃなく、雰囲気(何となく適当)で指定しています。

ちなみに、emも数カ所使っていますが、これは親の文字サイズを基準とした文字サイズ指定になります。

リストタグのサンプル（ul要素）

• リストタグ。サンプルテキスト。
• リストタグ。サンプルテキスト。
• リストタグ。サンプルテキスト。
• リストタグ。サンプルテキスト。
• リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。

リストタグのサンプル（ol要素）

1. リストタグ。サンプルテキスト。
2. リストタグ。サンプルテキスト。
3. リストタグ。サンプルテキスト。
4. リストタグ。サンプルテキスト。
5. リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。リストタグ。サンプルテキスト。