テンプレートのご利用前に必ずお読み下さいREAD ME
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『少年サッカークラブ向け 無料ホームページテンプレート tp_mosaic1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
見出しの下の2色の線のうち、緑（#8cc63f）はstyle.cssの「main h2::after」に直接書いています。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>少年サッカークラブ向け 無料ホームページテンプレート tp_mosaic1</title>
を編集しましょう。
あなたのホームページ名が「サンプルFC」だとすれば、
<title>サンプルFC</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
h1（一番大きな見出し）について
メイン画像のキャッチコピー（<h1><span>ボールを追って、…</span></h1>）がh1です。ロゴは<p class="logo">にしています。
アイコン画像について（Font Awesomeの解説）
アイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのtheme.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、theme.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
フォントについて
日本語は「Noto Sans JP」、英字は「Montserrat」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。
日本語のフォントはtheme.cssの--base-font、英字のフォントは--accent-fontで変更できます。
写真素材について
当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ヘッダー（header）とメニューについて
cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
1ページで完結するLPなので、メニューはページ内の各ブロック（id="about"など）に飛ぶリンクです。
「クラス紹介」には、ドロップダウンメニューを入れています。クラス紹介ブロックの各カード（id="class1"id="class2"id="class3"）に直接飛びます。
メニューの最後の黄色のボタン（体験申込）は、<li class="entry">で指定しています。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
トップページメイン画像の解説
写真を斜めのラインで区切って並べるメイン画像です。cssはstyle.cssの「.mainimg」で検索すると該当ブロックが出てきます。
写真の枚数を変える（1〜4枚）
html側の<div class="photo"><img src="images/mainimg1.jpg" alt=""></div>の行を削除するだけで、残りの枚数に合わせて並び方が自動で変わります。
- 4枚：左に大きな写真、右上に1枚、右下に2枚（このテンプレートの見本）
- 3枚：左に大きな写真、右に上下2枚
- 2枚：左右に2枚
- 1枚：画面いっぱいに1枚
画面幅700px以下では、上に大きな写真（1枚目）、下に残りの写真を小さく並べます。
写真は枠に合わせて切り抜かれます。顔など大事な部分が写真の中央付近にある写真を使って下さい。1枚目は縦に長い枠になるので、特に左右が大きく切り取られます。
まっすぐ（水平・垂直）に区切る
<div class="mainimg straight">とすると、斜めではなく、まっすぐのラインで区切ります。
斜めの角度・すき間を変える
style.cssの「.mainimg」の--angle: 8deg;が斜めの角度、--gap: 6px;が写真と写真のすき間です。画面幅700px以下では--angle: 6deg;にしています。
キャッチコピー
h1と説明文の白い帯は、html側の<span>に付けています。改行しても、行ごとに帯が付きます。
クラスのタグ（<p class="tags">）は、画面幅700px以下では非表示にしています。
見出し（h2）について
cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
見出しの上の英字は、html側の<h2>見出し<span>英字</span></h2>のspanの部分です。
中央揃えにしたい場合はclass="c"を付けて下さい（「メンバーの声」で使っています）。見出しのすぐ下の説明文も中央揃えにしたい場合は、そちらにもclass="c"を付けて下さい。
トップページの各ブロック
いずれも、cssフォルダのstyle.cssを開き、それぞれの名前で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
MESSAGE（.flex1）
左にテキスト、右に写真を並べています。画面幅700px以下では縦に並びます。写真の左の辺は斜めにカットしています。不要な場合は、style.cssの「.flex1 .image img」のclip-pathの行を削除して下さい。
html側で画像を先に書くと、画像が左になり、右の辺が斜めになります（「安心の環境」の下のブロック）。
数字で見る（.counter1）
アイコン・項目名・数字・説明文のカードです。3列で、画面幅900px以下では2列になります。
クラス紹介（.list1）
写真付きのカードです。3列で、画面幅700px以下では1列になります。
横に流れる写真（.slideimg1）
クラス紹介のカードの下で、写真が右から左へ流れ続けます。写真は4枚以上で、偶数の枚数を入れて下さい。
<div class="img rtl">のrtlをltrにすると、左から右へ流れます。速さは、main.jsの「横に流れる写真（slideimg1）」の(divCount / 4) * 40の40で変更できます（大きいほどゆっくり）。
メンバーの声（.staff1）
丸い写真の紹介ブロックです。写真は丸く切り抜かれるので、正方形で、顔が真ん中に来るようにトリミングした写真がおすすめです。
練習の流れ（.schedule1）
時間・アイコン・内容を縦に並べたスケジュールです。<div class="list inview">〜</div>を追加・削除すると、項目の数を変えられます。
安心の環境（.icon1）
アイコン付きのカードです。4列で、画面幅900px以下では2列、500px以下では1列になります。
入会案内（.tab1、.ta1）
タブをクリックすると、クラスごとの表に切り替わります。
タブを増やす場合は、<ul class="tab1">の中の<li>と、<div class="tab1-content">〜</div>を、同じ数だけ追加して下さい。上から順に対応します。
最初に表示するタブは、class="tab1-active"を付けたものです。
よくあるご質問（.openclose1）
質問をクリックすると、回答が開閉します。<div class="faq-item inview">〜</div>をコピーして追加できます。
お知らせ（.news）
日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
カテゴリーの文字数が多くても、日付の列の幅が自動で広がるので、折り返しません。
無料体験（#entry）
濃い緑色の背景のブロックです。中は「MESSAGE」と同じ.flex1です。
申込フォームについて
ページの最後のフォームはサンプルです。そのままでは動作しません。
フォームのデザインは、cssフォルダのform.cssで指定しています。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
デフォルトのパララックス効果の変更（.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 コード）をコピペしてご利用頂く事もできます。
