飲食店（カフェ・居酒屋）向け無料ホームページテンプレート tp

ご挨拶Greetings

ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。
ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。ここに挨拶文を入れます。サンプルテキスト。

当テンプレートの使い方

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

まず、htmlソースが見れる状態にして、
<title>飲食店（カフェ・居酒屋）向け無料ホームページテンプレート tp_foods10</title>
を編集しましょう。
あなたのホームページ名が「SAMPLE CAFE」だとすれば、
<title>SAMPLE CAFE</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。

copyrightを変更しましょう。

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

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

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

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

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

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

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

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

cssフォルダのstyle.cssを開き、冒頭の、
:root {
の中にある、
--primary-color:
の行でアクセントカラー（主にメインメニューの背景色）を設定します。
次に、その下の行にある、
--primary-text-color:
で、アクセントカラーの上のテキスト色を設定します。
次は、その20行ほど下の方にある
body {
の中の、
background:
と、
color:
でサイト全体の背景色と文字色を設定し、最後に、
/*リンク（全般）設定
のブロックの、
a {
の中の、
color:
を変更すればOKです。ここは基本的にbodyで設定したcolorと合わせておけばOKです。

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

ロゴ画像について

トップページの用のロゴ（logo_home.png）と、その他ページ用のロゴ（logo.png）の２種類あります。
必要に応じて入れ替えて下さい。
ロゴサイズや配置場所については、cssフォルダのstyle.cssの
/*ヘッダー
の中にあります。

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

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

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

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

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

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

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

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

上部メニューについて

画面幅が900px未満で、メインメニューが開閉ブロックタイプになります。
この数値を変更したい場合は、jsフォルダのmain.jsの、
if(window.innerWidth < 900)
の、900の数値を変更して下さい。

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

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

上部メニューのドロップダウンメニューについて

「メニュー（Menu）」にはドロップダウンメニューが設定されています。
ドロップダウンを使う為の特別な設定は不要ですが、必ず親となるli要素の「中」に入れるようにして下さい。

OKな例

<li><a href="">親となるメニュー</a>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>
</li>

NGな例

<li><a href="">親となるメニュー</a></li>
<ul>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
<li><a href="list.html">ドロップダウンのメニュー</a></li>
</ul>

trigger-pointブロックについて（※重要）

当テンプレートでは、メニューが画面上部に到達した際にfixed的にとどまるようになっています。
この判断を、trigger-pointブロックが行っていますので、うっかり削除しないように注意して下さい。

このtrigger-pointについては、メインメニューのブロックの「上」にある要素「全て」を囲むようにして下さい。

アンカーリンク（同一ページ内リンク）を使う場合の注意点

アンカーリンクの場合、当ページのメニューのように、
<a href="#menu1">
として下さい。その他のページからは別ページへの移動になる為、
<a href="menu.html#menu1">
などになっていますが、このタグをコピペでmenu.htmlにそのまま使用すると、ブラウザはページをリロードせずにハッシュのみを変更するためメニューがスムース移動しない他、メニュー部分とリンク先の先頭が重なってしまいます。

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

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

16:9のアスペクト比率の背景画像をレスポンシブ化しています

サンプルテンプレートでは、16:9の画像がレスポンシブになるようcssで設定されています。
この比率以外でも問題なく表示されますが、表示されない部分が出てきますので、16:9以外の比率の画像を全部表示させたければ以下を調整して下さい。

cssフォルダのstyle.cssの、
.home header {
の中にある、
padding-top: 56%;
を調整します。56というのは、9÷16=0.5625（ここまで細かくする必要はないので、0.56）の事です。
もし、2:1の画像を使いたければ、1÷2=0.5
padding-top: 50%;
と書き直せばOKです。

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

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

画像を入れ替えたい場合

1.jpg〜3.jpgで作る場合はそのままimagesフォルダに画像を上書きすればOKです。拡張子を変えたい場合は、cssフォルダのslide.cssの中で読み込んでいる画像ファイル名を編集して下さい。
4.jpgというの画像を追加したい場合は、index.htmlのスライドショーのタグを１行追加し、
<div class="slide slide4"></div>
とし、cssフォルダのslide.cssの「.slide3」のブロックをコピペし、「.slide4」に書き換えて、画像の読み込みファイル名も変更して下さい。

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

_black_がつくタイプのみ

スライドショー画像が実際より暗くなるような設定になっています。
元のまま色を出したい場合は、cssフォルダのslide.cssの、
.slide::before {
のブロックを削除して下さい。
ここで暗さ加減を調整することもできます。

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

_movieタイプのみ、スライドショーではなくmp4動画を配置しています。
動画の読み込みは直接index.htmlのheader内で行っていますので、ファイル名を変更するなどの必要があれば直接html内を書き換えて下さい。
アスペクト比の変更については、上のスライドショータイプの解説と同じです。

_movie&slideのみ、１枚目が動画で２枚目と３枚目が写真の組み合わせになっています。

スライドショーのhtml部分に動画タグを直接入れればOKです。詳しくは_movie&slideタイプのindex.htmlのコード側を見て下さい。
_movie&slideは１枚目だけ動画になっていますが、３枚とも動画にする事もできます。ただ、容量が大きいと初動ががたつくかもしれないので、注意して下さい。

サンプル動画について

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

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

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

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

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

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

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

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

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

2カラムにしたい場合

index_c2.htmlがサンプルなのでそちらでご確認下さい。

まず２カラムを囲むブロックとして、
<main>
を、
<main class="column">
に変更し、その中にメインコンテンツ<div class="main-contents">とサブコンテンツ<div class="sub-contents">を作って下さい。

具体的には以下のような形になります。

<main class="column">

<div class="main-contents">
※ここにメインコンテンツの内容を入れます。
</div>

<div class="sub-contents">
※ここにサブコンテンツの内容を入れます。
</div>

</div>

sub-contentsを右側にもってきたい場合は、cssフォルダのstyle.cssの、
main.column .main-contents {
と、
main.column .sub-contents {
の中にあるorderの数字を入れ替えて下さい。
orderは数字の小さな順に並びます。