当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。

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

copyrightを変更しましょう。

続いてhtmlの下の方にある、
Copyright© さんぷる幼稚園 All Rights Reserved.
の部分もあなたのサイト名に変更します。

metaタグを変更しましょう。

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

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

h1ロゴのaltタグも変更しましょう

html側に、
alt="さんぷる幼稚園"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。

テンプレートの色変更について

全体のカラー変更は簡単にできます。

cssフォルダのstyle.cssを開き、冒頭の、
:root {
の中にある、
--primary-color:
〜〜〜
他数行の設定を変更すればサイト全体の色変更ができます。

※必要に応じてテーブルやカラムブロック内の調整が必要になる場合もあります。

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

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

Font Awesome 公式サイト
Font Awesome アイコン一覧

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

Font Awesomeを使う為に必要なタグ、ファイル類。

cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。

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

メニューについて

メインメニューは開閉ブロックタイプになります。
メニュー本体のコードはhtml下部の方にある、
<div id="menubar">
からのブロックです。

メニュー幅は画面幅の最大70%に設定されており、これを超えることはありません。設定箇所は、cssフォルダのstyle.cssの、
.small-screen #menubar > div {
の中にある、以下の行です。
max-width: 70%;
これよりコンテンツ量が少なければその分メニューが記載されているブロック幅も狭くなります。

※当テンプレートのメニュー関連のコードは2024年4月最新版を使っています。

基本的な動作チェックは行いましたが、様々な動作チェックをされた場合に不具合が発生する可能性があるので、発見された際はお手数ですがサポート掲示板からご連絡下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。

トップページのスライドショー画像について（※_movieタイプ以外）

cssフォルダのslide.cssおよび、jsフォルダのmain.jsにスライドショーのスタイル設定があります。
slide.cssでは画像の指定や画像が切り替わるフェードのスピードなどの調整ができます。
main.jsでは、スライドショーの１枚あたりの表示時間の変更ができます。
枚数を追加しても自動で読み込んでくれるので特に設定は不要ですが、容量が大きすぎたり枚数が多すぎたりすると初動がガタつく可能性があるので注意して下さい。

スライドショー画像について

当サイトで用意したものなのでそのままご利用・編集頂いて問題ございません。
スライドショー以外のその他の写真やイラストもAI出力によるものです。こちらもそのままご利用頂いても構いません。

端末の向きにより画像が切り替わります

通常は、imagesフォルダ内の1.jpg〜3.jpgが表示されますが、画面が縦長になった場合にのみ、1_portrait.jpg〜3_portrait.jpgが適用されますので、それぞれご用意下さい。
縦長用画像を使わない場合は、1.jpg〜3.jpgと同じ画像を1_portrait.jpg〜3_portrait.jpgとして保存しておけばOKです。

スライドショーを追加したい場合

4.jpgというの画像を追加したい場合は、index.htmlのスライドショーのタグを１行追加し、
<div class="slide slide4"></div>
とし、cssフォルダのslide.cssの「.slide3」のブロックをコピペし、「.slide4」に書き換えて、画像の読み込みファイル名も変更して下さい。

画像は容量が軽くなるようにできるだけ圧縮して下さい。
容量が大きいと初動がガタつく可能性があります。（※ローカルでは確認できません。サーバーにアップすると分かります。）

トップページの動画について（※_movieタイプ）

_movieタイプのみ、スライドショーではなくmp4動画を配置しています。
動画の読み込みは直接index.htmlのmainimg内で行っていますので、ファイル名を変更するなどの必要があれば直接html内を書き換えて下さい。

通常は、imagesフォルダ内のmovie.mp4が表示されますが、画面が縦長になった場合にのみ、movie_portrait.mp4が適用されます。
縦長用画像を使わない場合は、movie.mp4をmovie_portrait.mp4として保存しておけばOKです。

_slideタイプに動画を使いたい場合

index.htmlの
<aside id="mainimg">
からの数行のブロックを_movieのパーツと入れ替えてもらえば動画になります。

サンプル動画について

サンプル動画は、写真を元にHaiper.aiで動画に変換したものです。現時点では、まだベータ版なので無料で利用ができるようです。また、商用利用についても現時点では問題なさそうなので（ChatGPTに調べてもらった＆日本のユーザーさんが本家に問い合わせてOKがでている様子）テンプレートに梱包させて頂きました。
Haiper.aiを使用して作成された出力データ（動画）の知的財産権はユーザーに帰属するとの事なので(※テンプレ制作時点で)、必要があれば動画もそのままご利用頂いても構いません。

トップページのオープニングの枠について

simpleタイプは以外は、小さな装飾枠がスクロールとともに広がっていくスタイルになっています。（simpleタイプは枠なし）
枠はimagesフォルダのwaku.svgになりますが必要に応じて入れ替えて頂いてOKです。
もしpng形式にした場合は、cssフォルダのslide.cssの、
.waku {
の中にある、
waku.svg
の部分を変更して下さい。

枠が拡大して消えるまでの間、スライドショー（または動画）が見え続けるようにトップページのみ#containerの上に空白（margin-top）が設定されています。
この数値が大きければ大きいほど、コンテンツが見えるまでに時間がかかる＝スライドショー（または動画）が表示され続けることになります。
この空白（margin-top）を変更する場合は、cssフォルダのstyle.cssの
.home #container {
の数値を変更して下さい。

尚、simpleタイプは枠がない為、この設定もなく、すぐコンテンツが見えるようになっています。

オープニングの「さんぷる幼稚園」のテキストについて

スライドショーや動画の上に１文字ずつ出てくるテキストは直接html側に書き込んでいますので書き換えてご利用下さい。
文字色や丸い縁取りなどは、cssフォルダのstyle.cssの、
/*テキストのフェードイン設定
のブロックで変更して下さい。
#mainimgという名前がついている箇所がオープニング専用のスタイルです。

テキスト専用のフェードイン効果について

class="fade-in-text"を指定すると、この見出しのようなフェードイン効果になります。
アニメーションの速度などの調整は、cssフォルダのstyle.cssから「.char」でテキスト検索をかけて下さい。説明もコメントで書いています。また、jsフォルダのmain.js内にも設定箇所があります。
お好みで調整して下さい。

トップページで使っているポップアイコンです。img要素にclass="pop1"とすればOKですが、他のブロックで使う場合はコツがいります。
テキストもアイコンもセンタリングしたい場合、ここのhtmlのようにh2の外側に<div class="c">〜</div>を追加して下さい。

通常のh2要素の中に入れると

こんな感じで画面サイズによっては端っこにアイコンが出てしまいます。

インラインのh2でアイコンは左に

これはh2要素にinline-blockを指定し、アイコンにleftというclassを追加した例です。
お好みで使い分けて下さい。
アイコンはどんなものでもOKです。htmlに直接配置して下さい。
アイコン部分が他の要素に重なってしまう場合があるので、その際は余白を作って下さい。

トップページのサムネイルスライドショーについて

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

写真の縦横サイズを予め揃えておくと綺麗に並びます

枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スライドショーの設定は、jsフォルダのslick.jsで調整できます。

slickを使う為に必要なタグ、ファイル類

1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick.js」。

ul、ol要素

1. これはol要素です。サンプルテキスト。
2. これはol要素です。サンプルテキスト。
3. これはol要素です。サンプルテキスト。

• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。
• これはul要素です。サンプルテキスト。

出現アニメーションについて

以下のような出現のアニメーションサンプルをsample_inview.htmlにまとめています。
好きなアニメーションに簡単に変更できますし、オリジナルのものを作る事もできます。

2カラムレイアウトにもできます

詳しくはindex_c2.htmlをご覧下さい。