テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『地域サービス向け 無料ホームページテンプレート tp_mix4_service（フォーム一体型LP）』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>地域サービス向け 無料ホームページテンプレート tp_mix4_service（フォーム一体型LP）</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE SERVICE」だとすれば、
<title>SAMPLE SERVICE</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（Font Awesomeの解説）
アイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのtheme.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、theme.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
メニューについて
cssフォルダのstyle.cssを開き、「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
トップページメイン画像の解説
cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
画面幅800px以下では
画面幅800px以下では、小さな端末向け画像（例：images/mainimg1_s.jpgなど、_s付き画像）が適用されます。この指定は、htmlのsrcsetの部分です。必要に応じて書き換えて下さい。大きな端末用と同じ画像でいい場合は、同じファイル名にしておけばOKです。mediaの値はcssのメディアクエリと同じなので、例えば縦長端末用などの指定もできます。
テキストブロックにあまり詰め込みすぎないで下さい
メイン画像の高さを超えた分が切れてしまうので、中身はほどほどにして下さい。
トップページにある２つのフォームの解説
テンプレートのフォームは見本です
このテンプレートに入っているフォームは見た目だけのサンプルなので、そのままでは送信できません。
実際に使う場合は、弊社のフォームパーツ（form-simple / form-full）をご利用下さい。導入手順はこちらのマニュアルをお読み下さい。
フォームパーツへの差し替え方
html側の、
<!--ここから、フォームのサンプル。〜-->
から、
<!--ここまで、フォームのサンプル-->
までの間にある<section class="contact-form-block">のブロックを、まるごとフォームパーツのhtmlに差し替えて下さい。
白い枠や、電話番号のブロックはそのまま残します。
見た目はcssフォルダのform.cssによって、自動的にこのテンプレートのデザインになります。
新しくページを作ってフォームを置く場合は、form.cssの読み込みが必要です。
headの中に、
<link rel="stylesheet" href="css/form.css">
を追加して下さい。index.htmlとcontact.htmlには最初から入っています。
サンプルの項目と、フォームパーツの初期の項目は同じではありません。
サンプルにある「電話番号」などの項目を使いたい場合は、フォームパーツ側（form.php）の設定も必要です。項目の追加方法は、フォームパーツのマニュアルをご覧下さい。
２つの項目を横に並べたい場合
サンプルの「お名前」と「電話番号」のように２つの項目を横に並べたい場合は、該当の<div class="form-row">２つを、
<div class="form-row-group">〜</div>
で囲んで下さい。画面幅500px以下では縦並びになります。
フォームパーツをそのまま貼った場合は、全ての項目が縦に並びます。
項目名の横に「任意」と表示したい場合は、
<span class="optional-badge">任意</span>
を使って下さい。
１ページに２つ以上のフォームを置く場合の注意点
トップページのように、１ページに２つ以上のフォームを置く場合は、以下の点にご注意下さい。
１．２つ目以降のフォームは、idを別の名前に変更して下さい。
フォームパーツを２回貼ると、id="name"などが重なり、項目名をクリックした時に１つ目のフォームの入力欄が選ばれてしまいます。
２つ目以降のフォームでは、id="〜"と、それに対応するfor="〜"を、別の名前に変更して下さい。
例：id="name" → id="contact-name"（forも同じ名前に）
name="〜"の方は変更しないで下さい。form.phpと対応しているので、変えると送信できなくなります。
２．フォームは<section class="contact-form-block">ごと貼って下さい。
送信完了やエラーのメッセージは、フォームを囲んでいるブロックの中に表示される仕組みです。１つのブロックの中に２つのフォームを入れると、メッセージが別のフォームの方に出てしまいます。
３．項目が違うフォームを置く場合は、form.phpを複製して下さい。
項目が同じフォームであれば、form.phpは１つで足ります（トップページの２つのフォームはこのケースです）。
例えばcontact.htmlだけ住所の項目を増やすなど、項目が違うフォームを置く場合は、form.phpを複製して（例：form-contact.php）それぞれ設定し、そのフォームの
action="form.php"
を、
action="form-contact.php"
に変更して下さい。form.php１つのままだと、必須項目の違いで送信エラーになります。
メイン画像上のフォームについて
cssフォルダのstyle.cssを開き、「.mainimg-wrap」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
画面幅900px以上ではメイン画像の右側に重なり、900px未満ではメイン画像の下に表示されます。
フォームの幅は、--form-width: min(420px, 38vw);の部分で変更できます。
メイン画像上のフォームだけ、入力欄の間隔などを少しコンパクトにしています。「メイン画像上のフォームは、全体を少しコンパクトにする」で検索すると該当箇所が出てきます。
項目はあまり増やしすぎないで下さい。
フォームがメイン画像より高くなると、その分メイン画像が縦に引き伸ばされます。項目が多いフォームは、下のフォームやcontact.htmlに置くのがおすすめです。
メイン画像上のフォームが不要な場合は、html側の<div class="mainimg-form form-card">から<!--/.mainimg-form-->までを削除して下さい。
ページ下部のフォーム（電話番号とフォームのブロック）について
cssフォルダのstyle.cssを開き、「.contact-box」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
画面幅900px以上で左右２列、900px未満では電話番号のブロックが上、フォームが下に並びます。
contact.htmlについて
contact.htmlには、白い枠などの無い、シンプルな形でフォームのサンプルを入れています。差し替え方はトップページのフォームと同じです。
送信後の表示について
フォームパーツは確認画面が無く、送信が完了するとフォームの部分が消えて、同じ場所に送信完了のメッセージが表示されます。白い枠は残るので、メイン画像上のフォームでも、枠の中にメッセージが表示されます。
「こんなお悩みはありませんか？」「ご提供するサービス」ブロック（3カラム・4カラム）の解説
cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
デフォルトでは3カラムですが、html側のclassを"list1 c4"とすると4カラム（小さな端末では2カラム）になります。
「SAMPLE SERVICEが選ばれる理由」の解説
cssフォルダのstyle.cssを開き、「.flex1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
「ご利用の流れ」の解説
cssフォルダのstyle.cssを開き、「.list2」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
「お客様からいただいた声」の解説
cssフォルダのstyle.cssを開き、「.auto1」で検索すると該当ブロックが出てきます。
「最低4セット」以上の「偶数」にして下さい。
801px以上で4列、800px以下だと2列になります。
速度調整は、jsの「サムネイルの横スライドショー（複数設置対応）」ブロックの冒頭の２行で調整できます。
お知らせブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
アイコンは、上で解説しているFont Awesomeです。
デフォルトのパララックス効果の変更（.inview）
ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。
補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。
オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。
テンプレートの使い方に迷った場合は
足りないレイアウトは「パーツ」で補えます
新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。
