ご利用の前にRead me

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

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『キッズクラブ・幼稚園向け 無料ホームページテンプレート tp_bubble1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

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

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

【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！

コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。

このテンプレートで使用しているカラーセット

● ● ● ●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。

メイン画像の単色の玉や、見出しの小さな3つの丸、ページタイトルの飾りの丸の色は、style.cssに直接書いています（下の各項目をご覧下さい）。

当テンプレートの使い方

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

titleとmetaタグ（description）は、ページごとに変えるのがおすすめです。
例えば「プログラム」ページなら<title>プログラム｜サンプルキッズクラブ</title>のように、そのページの内容が分かるtitleにすると、検索結果で見つけてもらいやすくなります。

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

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

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

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

h1（一番大きな見出し）について

トップページは、メイン画像のキャッチコピー（<h1>わらって、あそんで、…</h1>）がh1です。
下層ページは、ページタイトル（<h1 class="page-title">）が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関連のファイルのバージョンを変更して動作するか確認してみて下さい。

フォントについて

日本語は丸ゴシックの「Zen Maru Gothic」、英字は「Quicksand」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。

日本語のフォントはtheme.cssの--base-font、英字のフォントは--accent-fontで変更できます。

写真素材について

当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。

ヘッダー（header）とメニューについて

cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

表示中のページのメニューには、html側で<li class="current">を付けています。大きな端末では薄いピンクの丸い背景、小さな端末の開閉メニューではアクセントカラーの背景になります。

「プログラム」には、ドロップダウンメニューを入れています。プログラムページの各項目（program.htmlのid="play"id="study"id="outing"）に直接飛びます。

画面幅900px未満で開閉メニューになります

900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。

動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

トップページメイン画像（シャボン玉・フローティングアニメーション）の解説

cssはstyle.cssの「.mainimg」「.bubble」、jsはmain.jsの「シャボン玉（メイン画像）」で検索すると該当ブロックが出てきます。
大小の丸（シャボン玉）が、キャッチコピーのまわりでゆらゆら漂うメイン画像です。いくつかの玉には写真が入り、残りは単色の玉になります。マウスのある端末では、カーソルを近づけると玉が少しよけます。

写真の入れ替え・追加（htmlの編集は不要です）

写真は、imagesフォルダの中のbubbleフォルダに入っています。
bubble1.jpg、bubble2.jpg、bubble3.jpg…のように、連番のファイル名で入れて下さい。番号が途切れたところまで、jsが自動で読み込みます（例：bubble1〜bubble8があれば8枚）。htmlに写真を書き足す必要はありません。

• 写真は大きい玉から順に入ります。どの玉にどの写真が入るかは、ページを開くたびにランダムに変わります。
• 写真が入るのは12枚までです。おすすめは6〜12枚です。少ない場合は、単色の玉が増えます。
• 写真は丸く切り抜かれます。正方形で、顔が真ん中に来るようにトリミングした写真がおすすめです。大きさは500px四方くらいで十分です（同梱の写真は480px）。
• 小さすぎる玉（直径60px未満）には写真を入れません。スマホでは、パソコンより写真の数が少なく見える場合があります。

キャッチコピーと重なる玉は、自動で隠れます

キャッチコピーの文章を長くしても、文字と重なる玉はjsが自動で隠すので、文字が読めなくなることはありません。

単色の玉の色

style.cssの「単色のシャボン玉の色」で、.bubble.color1〜.bubble.color6の6色を指定しています。それぞれのカラーコードを変更して下さい。

玉の並べ方（配置）を変える

index.htmlの<div class="mainimg">にclassを足すだけで、並べ方が変わります。

• なし（class="mainimg"）：キャッチコピーのまわりに散らす
• class="mainimg side"：玉を右側に寄せて、キャッチコピーは左に。縦長の画面ではキャッチコピーが下になります
• class="mainimg ring"：キャッチコピーのまわりを、玉がゆっくり回ります（「周回アニメーション」「オービット」と呼ばれる動きです）。縦長の画面（スマホなど）では、玉がキャッチコピーの後ろを通るので、文字に背景色の縁取りを付けています
• class="mainimg rise"：玉が下から上へ、ゆっくり浮かび上がっていきます。キャッチコピーには背景の箱が付きます（このテンプレートの見本）

玉の形を変える

• class="mainimg square"：角丸の四角
• class="mainimg blob"：ぷにぷにと形が変わる丸（「ブロブ」「モーフィング」と呼ばれる動きです）（このテンプレートの見本）

並べ方と形は組み合わせて使えます（例：class="mainimg rise blob"）。

イラストを入れたい場合

<div class="bubbles" data-dir="images/bubble/" data-deco="deco">のようにdata-decoを書き足し、bubbleフォルダにdeco1.png、deco2.png…の連番でイラスト（背景が透明のpng）を入れると、単色の玉のいくつかがイラストに変わり、イラストだけがふわふわ浮かびます（玉の色は付きません）。

写真のフォルダやファイル名を変えたい場合

<div class="bubbles">のdata-dir（フォルダ）、data-name（ファイル名の数字の前の部分。無い場合はbubble）、data-ext（拡張子。無い場合はjpg）で変更できます。
例：data-dir="images/photo/" data-name="smile" data-ext="png"とすると、images/photo/smile1.png、smile2.png…を読み込みます。

玉の位置や大きさを変えたい場合

main.jsの「配置のリスト」に、玉ごとの位置（%）と大きさを並べています。wideが横長の画面用、tallが縦長の画面（スマホなど）用です。数字を少しずつ変えて試してみて下さい。

その他

• 端末の設定で「視差効果を減らす」「動きを減らす」などをオンにしている場合は、玉は動きません。
• URLの末尾に?fixedを付けて開くと（例：index.html?fixed）、毎回同じ配置になります。スクリーンショットを撮るときなどにどうぞ。

見出し（h2）について

cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。

見出しの上の英字は、html側の<h2>見出し<span>英字</span></h2>のspanの部分です。英字の前の小さな3つの丸は「main h2 span::before」で指定しています。

3つの丸を出したくない見出しには、class="nodot"を付けて下さい。見出しが続くページでは、丸を出さない方がすっきりします（下層ページやこのページで使っています）。
中央揃えにしたい場合はclass="c"です。両方使う場合はclass="c nodot"として下さい。

トップページの各ブロック

いずれも、cssフォルダのstyle.cssを開き、それぞれの名前で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

「やってみたい」を、いちばんに。（.flex1）

左にテキスト、右に大きな写真と、その左下に重なる小さな丸い写真を並べています。画面幅700px以下では縦に並びます。
小さな丸い写真が不要な場合は、html側の<img src="images/square1.jpg" alt="" class="maru">の行を削除して下さい。

プログラム（.list1）

丸い写真のカードです。class="list1 square"のsquareで、写真を正方形（丸）に切り抜いています。3列で、コンテナ幅899px以下では2列になります。最後の段の数が少ないときは、中央に寄ります。

数字で見る（.counter1）

白い丸の中に、アイコン・数字・説明を並べています。丸の最大の大きさは「.counter1 .list」のmax-widthで変更できます。

入会案内（.list2）

アイコン付きの3列のボックスです。ボタンは、入会案内ページ（guide.html）のid="flow"id="price"id="visit"に直接飛びます。

お知らせ（.news）

左に見出し、右にお知らせを並べています（小さな端末では縦並び）。日付の横の丸い枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
カテゴリーの文字数が多くても、日付の列の幅が自動で広がるので、折り返しません。

お問い合わせへの誘導（.cta1）

トップページの最後の、ピンクの背景のブロックです。

下層ページについて

ページタイトル（h1.page-title）

cssフォルダのstyle.cssを開き、「page-title」で検索すると該当ブロックが出てきます。
左上と右下の飾りの丸は「h1.page-title::before」「h1.page-title::after」です。不要な場合は、style.cssの「飾りの丸」のブロックごと削除して下さい。

プログラムページ（.free1）

写真とテキストを左右交互に並べるブロックです。<div class="list reverse">とすると、写真とテキストの配置が入れ替わります。
項目を増やす場合は、<div id="play" class="list">〜</div>をコピーして追加し、idも重ならないように変更して下さい（メニューのドロップダウンから、このidに飛びます）。
日程や場所の枠は<dl class="info">です。不要な場合は削除して下さい。

表（.ta1）

クラブについてページの「クラブ概要」と、入会案内ページの「料金について」で使っています。

ステップ（.step1）

入会案内ページの「入会までの流れ」で使っています。<li>〜</li>を追加・削除すると、ステップの数を変えられます。

Google Map（.iframe1）

クラブについてページの「アクセス」の地図です。地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、<div class="iframe1">の中のiframeタグと入れ替えて下さい。

footerブロックの解説

cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。

お問い合わせフォームについて

contact.htmlのフォームはサンプルです。そのままでは動作しません。
フォームのデザインは、cssフォルダのform.cssで指定しています（contact.htmlでのみ読み込んでいます）。

デフォルトのパララックス効果の変更（.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 コード）をコピペしてご利用頂く事もできます。