当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>汎用デザイン 無料ホームページテンプレート tp_mix1</title>
を編集しましょう。
あなたのホームページ名が「ふれあい動物園」だとすれば、
<title>ふれあい動物園</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

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

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

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

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

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

imagesフォルダに入っていない画像（アイコン）は主にFont Awesomeの素材です。（※マップ上のアイコンは、ブラウザのアイコンです）
Font Awesome 公式サイト
Font Awesome アイコン一覧

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

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

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

イラスト、写真素材について

当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ライセンス契約により、haconanaポイント特典付与を行っている場合もあるので、ご予定の場合はライセンスページをチェックして下さい。（※ポイント付与特典は予告なく終了する場合もあります）

メニューについて

メインメニューは開閉ブロックタイプになります。
開閉メニューのコードは、htmlの下の方にあります。ヘッダーのメニューとは別になるので注意して下さい。

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

ul、ol要素

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

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

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

cssフォルダのslide.cssで設定を行っています。

１枚目のアスペクト比が反映されます。
画像サイズはバラバラでも構いませんが、１枚目のアスペクト比が全てに反映されます。合わない画像は切り抜かれます。

画像の追加方法
現状、３枚構成ですが４枚目を追加したい場合、３枚目のブロックをコピペし、imgの行だけを４枚目の画像ファイル名に書き換えればOKです。

小さな端末向けの画像
index.htmlの、
srcset="images/1s.jpg"などに指定されている画像ファイル名を上書きして下さい。当テンプレの場合は、サイズを圧縮したものを入れています。
もし小さな端末用画像を使いたくない場合は、pictureのコードを使わず、通常のimg部分だけ抜き出して使って下さい。
↓ ビフォー
<picture><source media="(max-width: 800px)" srcset="images/1s.jpg"><img src="images/1.jpg" alt=""></picture>
↓ アフター
<img src="images/1.jpg" alt="">

YouTube動画について

トップページの動画はYouTube動画になっています。チャンネルをお持ちなら、iframeのコードを入れ替えるだけで動画が置き換わります。
（ローカルだとエラーが出ますので、サーバーで確認して下さい。）

YouTube動画を使えない場合は、直接.mp4などの動画を配置することもできます。
例：動画ファイル名がmovie.mp4でimagesフォルダに入れた場合。
<video src="images/movie.mp4" controls playsinline preload="metadata"></video>

施設のご案内の枠について

トップページの「施設のご案内」で使っている写真枠はcssフォルダのstyle.cssのmask1〜mask6で設定しています。このmask1〜mask6をclassでつけることによって枠が適用されます。maskをつけない場合は通常の正方形になります。

「近くの観光地」のマップの使い方

マップもピンも全てhtml側に直接入っています。
ピンの場所もhtmlです。styleという後の数値になります。

ここのピンアイコンもメニュー同様、通常の「絵文字」です。閲覧環境によってデザインが変わります。

文字やピンのサイズなどはcssフォルダで「image-map-container」と検索して下さい。設定ブロックがあります。

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

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

サムネイル横スライドショー

右から左（rtl）、左から右（ltr）への２タイプ使えます。

背景画像がスライドアップするボックス

画像は縦長のものを準備して下さい。横長だと動きません。

grid-boxレイアウトの解説（info.htmlで使用）

色々なgridレイアウトを使う場合、必ず外枠に <div class="grid-box"> を入れて、その中に section を入れて下さい。
sectionの中に、写真やテキストをセットします。

このテンプレでは12個のマスを設定しています

cssフォルダのstyle.cssの grid-template-columns: repeat(12, 1fr);という行です。