会社概要

大見出しが必要ならここを使います

見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
見出し	ここに説明など入れて下さい。サンプルテキスト。
所在地	Google Mapで地図を埋め込みたい場合はマニュアルをご覧下さい。

当テンプレートの使い方

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

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

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

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

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

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

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

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

ロゴ画像について

トップページのロゴは、imagesフォルダのlogo_home.png。その他ページは、logo.pngです。
制作ファイルのIllustrator(.ai)も梱包していますので、そのまま使いたい人はご活用下さい。
文字のサイズや傾きなどは文字タッチツールを使って調整できます。
フォントは「AB-kirigirisu(Regular)」で、ひらがなとカタカナ、一部の漢字もOKのようです。Adobe Fontsを使える環境の方ならそちらから無料DLできます。

文字なしの土台ファイルもbaseフォルダに入っています。好きな文字をのせてimagesフォルダに上書きして下さい。

右上の電話番号画像について

こちらもaiファイルを梱包していますのでご活用下さい。
文字なしの板のみの土台画像はbaseフォルダに入っています。

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

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

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

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

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

フッター(ページ下部)の地図

サンプル画像を配置していますが、自社の地図(GoogleMap)に置き換えたい場合は、こちらのマニュアルをご覧頂き、マップのiframeタグをテンプレートのhtml側の画像(img)タグと置き換えて下さい。

トップページのスライドショー

トップページのスライドショー写真を含めた子供の写真は、配布元サイト（写真ACさん）の規約により再配布できませんが、配布元サイト(写真AC)さんから無料ダウンロードができます。
ご利用の際はACさんの規約を読んだ上で直接ダウンロードして下さい。

• １枚目写真のDL先（※リンク先はACさんです）
• ２枚目写真のDL先（※リンク先はACさんです）
• ３枚目写真のDL先（※リンク先はACさんです）
• その他：コース紹介ページで使用していたサッカー少年の写真。（※リンク先はACさんです）

スライドショーの画像を入れ替えたい場合。
1.jpg、2.jpg、3.jpgと３枚の画像を用意し、imagesフォルダに上書きして下さい。
正方形で揃えるとデモと同じサイズ感になります。長方形でも構いませんが、少し間伸びして見えるのと若干レイアウトバランスが崩れます。※長方形画像を使う場合は３枚の縦横比率は必ず揃えておいて下さい。

画像から動画にしたい場合。
テンプレートに梱包しているサンプルファイル(sample_index_movie.html)のタグを参考に置き換えて下さい。こちらも正方形を推奨します。
動画編集ソフトをお持ちでない場合、こちらの解説をお読み下さい。

うねうねアニメーション枠について

トップページのスライドショーや、スクール紹介ページ、スタッフ紹介ページなどで使っています。
html要素にclass="mask1"またはclass="mask2"またはclass="mask3"とつける事で以下のように枠がうねうねします。

設定は、cssフォルダのstyle.cssと、animation.cssにあります。
制作当初は、SVGアニメーションを使う予定だったのですが、CSSスライドショーを背後においた場合にSafariとの相性が悪かったので、代わりにCSSのborder-radius(角を丸くするCSS)を使う方法に変更しました。border-radiusを使ったアニメーション枠は他のサイトでも多く紹介されていますので、詳しく知りたい人は検索してみて下さい。

トップページの「お知らせ」ブロックのアイコンについて

「その他」「イベント」など、テキスト部分はhtml側で直接入力されていますので必要に応じて編集して下さい。
アイコン用の文字数が増えすぎるとレイアウトが崩れます。ご注意下さい。

背景色は、cssフォルダのstyle.cssの、
#new dt span
や、
#new dt span.icon-bg1
のbackgroundでそれぞれ変更できます。

新しいアイコンを追加したい場合、上記の「#new dt span.icon-bg1」ブロックをコピペし、.icon-bg1部分を.icon-bg2などに変更し、backgroundに好きな色を設定します。
後はhtml側で、
<span class="icon-bg2">〜〜〜</span>
などとすればOKです。

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

汎用的な開閉ブロックなので、どこにでも使えます。
クリック対象としたいブロックに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.7132...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。

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

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

クラッカーアニメーションについて

h2タグもしくはh3タグにclass="cracker"を指定すれば、このようなクラッカーアニメーションが自動再生されます。
アニメーションは左右に表示されるので、中身はセンタリングしておく事をおすすめします。
このh3見出しのタグだと、
<h3 class="c cracker">
となります。cとcrackerの２つのclassを指定した場合になります。複数指定する場合は間に半角スペースを入れます。

h2、h3以外にも使いたい場合。
class="cracker"を指定する要素にposition: relative;のスタイルを追加すれば同じように動作すると思います。

クラッカー画像のサイズを変更したい場合。
cssフォルダのinview.cssの.crackerstyle imgの設定内にある幅を変更して下さい。
端末サイズごとに再指定がある場合があるのでチェックしましょう。

別のgifアニメーション画像に入れ替えたい場合。
ファイル名をcracker.gifに変更してimagesフォルダに上書きすれば単純に置き換えられます。
ファイル名は変更したくないなら、jsフォルダのjquery.inview_set.jsの、
//crackerスタイルが画面内にきたら、クラッカーアニメーションを実行する
の設定内に「２つ」あるimgタグのファイル名部分をそれぞれ入れ替えて下さい。

APNG(pngアニメーション)を使いたい場合も、このjsファイル内の書き換えでOKです。

２カラムページもご用意しております

sample_2c.htmlをご覧下さい。