当テンプレートの使い方

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

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

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

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

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

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

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

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

アイコン画像について（Bootstrap Iconsの解説）

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

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

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

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

トップページのスライドショー画像について

AI出力されたものを梱包していますのでそのまま再利用頂いても構いませんが著作は当サイトにあります。
このテンプレートの公開時点では、AIサイトによると「著作は作り出した人のもの」（＝当サイト）という規約になっているようです。

AI出力でないリアルな画像に入れ替えたい場合は写真ACさん（無料写真サイト）がおすすめです。

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

cssフォルダのslide.cssで設定されています。

画像を入れ替えたい場合
「1.jpg」「2.jpg」「3.jpg」の3枚の画像を用意してimagesフォルダに上書きして下さい。
大きさはバラバラでも構いませんが、適当に切り抜かれてもおかしくない画像を使って下さい。
また、拡張子が「jpeg」や「JPG」と少し違った場合にうまく表示できない可能性があるので梱包画像の拡張子と合わせて下さい。拡張子を変更したい場合はslide.css側を直接変更しても構いません。
画像は容量が軽くなるようにできるだけ圧縮して下さい。容量が大きいと初動がガタつきます。

固定画像にしたい場合
cssフォルダのslide.cssを開き、冒頭の
「/*スライドショーのキーフレーム設定」
のブロックを全て削除。

次に、index.htmlから使う画像の行だけを残してあとは削除すればOKです。

速度や枚数などの調整
cssフォルダのslide.cssで行って下さい。解説も入っています。
スライドショーに関する詳しい使い方はこちら。（「imgタグを使っていないタイプ」をご参照下さい）

縦書きの見出しについて

<div class="title-bg">
<h2><div class="tate">縦書き</div></h2>
</div>

縦書きを使いたい場合は、必ず外側に１個title-bgというclassのついたボックスを作って下さい。
その中にh2などの見出しを作り、さらにその中にtateというclassのついたボックスを作ります。
完全に縦書きしか使わないのであればもう少しシンプルにできたのですが、横書きの英語表記も使っている為、少しボックスが増えました。

<div class="title-bg">
<h2><div class="tate">縦書き</div><div class="yoko">Yokogaki</div></h2>
</div>

というわけで、その横書きも含めたサンプルがこちらです。
最初の縦書きのみのタグに横書きのブロックを追加しただけです。

<div class="title-bg" id="greeting">
<h2 class="mb0"><div class="tate">ご挨拶</div><div class="yoko">Greetings &amp; Introductions</div></h2>
</div>

ご挨拶ページ冒頭にある、背景画像のついたタイプです。
外側のボックスにidをつけて、そこで背景画像を指定しています。詳しくは、cssフォルダのstyle.css内から「greeting」をテキスト検索してみて下さい。設定箇所があります。
他のページにも適用したい場合は、それぞれに個別のidをつけて、style.cssの既存のブロックをコピペしてid部分がけ書き換えればOKです。

あと、h2のマージンで余分な空間ができるのを防ぐ為にmb0というclassも追加しました。

サムネイルスライドについて

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

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

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

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

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

汎用開閉ブロックのサンプル

以下は「よく頂く質問」を例にサンプルを用意していますが汎用的な開閉ブロックなので、基本的にはどこにでも使えます。
クリック対象としたいブロックにclass="openclose"とつければ、続く要素が自動的に開閉ブロックになります。
もしすでにclass指定がある場合は、半角スペースで区切って追加すればOKです。
例：class="sample openclose"

ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。ここに質問を書きます。クリックで回答が開きます。

ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。

枠線を囲むアニメーションボタン

このテンプレートではあまり使っていませんが、マウスオン時に枠線を囲むアニメーションボタンもあります。
ボタンのhtml側を見ればわかりますが、外側にanimation-btn、内側にanimation-btn-innerをつける事で動作します。必ずセットで使って下さい。

その外側のdivタグのclassは左右の配置についてです。左よせでいいなら一番外側のdivは削除してもOKです。
テキスト右側の矢印（）は上で解説しているBootstrap Iconsです。iタグなので使わないならhtml側からiタグを削除して下さい。

枠線の色など変更したければ、cssフォルダのstyle.cssで「アニメーションボタン」とテキスト検索してみて下さい。説明もあります。