テンプレートのご利用前に必ずお読み下さいREAD ME
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『フードフェス・飲食イベントの告知向け 無料ホームページテンプレート tp_event1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>フードフェス・飲食イベントの告知向け 無料ホームページテンプレート tp_event1</title>
を編集しましょう。
イベント名が「さんぷるフードフェス」だとすれば、
<title>さんぷるフードフェス｜2027年10月23日（土）・24日（日）開催</title>
とすればＯＫです。イベント名と開催日を入れておくと、検索結果で見つけてもらいやすくなります。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
ロゴ画像のaltタグも変更しましょう。
メイン画像の左上・左側のブロック・footerの3箇所に、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
概要カードの下の1行は削除して下さい。
2026.11.09 フードフェス・飲食イベントの告知向け 無料ホームページテンプレート…の行は、テンプレートの公開日のお知らせです。ご利用の際は、行ごと削除して下さい。
h1（一番大きな見出し）について
開催概要カードのイベント名（<h1>さんぷるフードフェス<span>…</span></h1>）がh1です。spanの部分は、イベント名の上に表示されるキャッチコピーです。ロゴは<p class="logo">にしています。
ページ全体のレイアウトについて
大きな画面で見た時に、中央にスマホ幅の列、左側に写真のブロックを表示するレイアウトです。画面幅1200px以上では、右側にもブロックを表示します。
画面幅800px未満では、左右のブロックは表示せず、通常のスマホ表示になります。
ヘッダーとメニューはありません。ロゴはメイン画像の左上に置いています。
中央の列の幅を変える
style.cssの「#container」にある、
--column-width: 480px;
の数字を変更して下さい。左右のブロックの幅も、この値から自動で計算されます。
幅を大きくした場合は、左右のブロックを表示する画面幅も確認して下さい。
左側のブロックは画面幅800px以上、右側のブロックは1200px以上で表示しています。列の幅を大きくすると、この画面幅の時に左右のブロックが狭くなりすぎる場合があります。その場合は、style.cssの@media (min-width:800px)@media (min-width:1200px)の数字も大きくして下さい。
左側のブロック（#side-left）
写真（images/side.jpg）を背景に、ロゴ・キャッチ・イベント名を大きく表示します。写真の上の方に、文字を読みやすくするための濃い色を重ねています（style.cssの「#side-left::before」）。
キャッチとイベント名は、開催概要カードとは別に書いています。変更する時は、両方を書き換えて下さい。
右側のブロック（#side-right）
画面幅1200px以上で表示します。ページ内のメニュー（INDEX）と、ボタンを並べています。メニューは、各ブロックのid="point"などに飛ぶリンクです。
不要な場合は、html側の<div id="side-right">〜</div>を丸ごと削除して下さい。中央の列が右に寄り、左の写真が広がります。
残す場合は、<div id="side-left">より前に置いて下さい（cssで「右側があるかどうか」を判定するため）。
メイン画像について
写真は1枚です。cssはstyle.cssの「.mainimg」で検索すると該当ブロックが出てきます。
写真の高さは、画面の高さに合わせて変わります（最小260px、最大560px）。写真は枠に合わせて切り抜かれるので、大事な部分が写真の中央付近にある写真を使って下さい。
左上のロゴは、生成り色の箱の上に載せています。箱の色は「.mainimg .logo」のbackgroundで変更できます。
開催概要カードについて
メイン画像に重ねている白いカードです。cssはstyle.cssの「.overview」で検索すると該当ブロックが出てきます。
日付
1日だけのイベントは、
<p class="date">2027.10.23<span>SAT</span></p>
期間があるイベントは、<br>で区切って2行にします。
<p class="date">2027.10.23<span>SAT</span><br>- 10.24<span>SUN</span></p>
2行目の日付は1行目の日付の右端に、曜日は曜日の左端に、自動でそろいます。曜日は「（土）」のような書き方でもOKです。
タグ（入場無料など）
<ul class="tags">の中の<li>を追加・削除して下さい。
お問い合わせの電話番号
<a href="tel:000-000-0000">の数字も、表示している電話番号と同じものに変更して下さい。スマホでタップすると電話がかかります。
見出し（h2・h3）について
cssフォルダのstyle.cssを開き、「main h2」「main h3」で検索すると該当ブロックが出てきます。
見出しの上の英字は、html側の<h2>見出し<span>英字</span></h2>のspanの部分です。中央揃えにしたい場合はclass="c"を付けて下さい。
各ブロックについて
いずれも、cssフォルダのstyle.cssを開き、それぞれの名前で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
フェスの見どころ・出店者のご紹介（.list1）
写真付きのカードを2列で並べています。<div class="list inview">〜</div>を追加・削除すると、カードの数を変えられます。
そのほかの出店者（.yoko2）
写真を載せない出店者を、文字だけで2列に並べています。左が出店者名（dt）、右がカテゴリー（dd）です。
タイムテーブル（.tab1、.schedule1）
タブをクリックすると、1日目・2日目のスケジュールに切り替わります。
タブを増やす場合は、<ul class="tab1">の中の<li>と、<div class="tab1-content">〜</div>を、同じ数だけ追加して下さい。上から順に対応します。最初に表示するタブは、class="tab1-active"を付けたものです。
1日だけのイベントの場合は、<ul class="tab1">〜</ul>と、<div class="tab1-content">の外枠を削除して、<div class="schedule1">を1つだけ残して下さい。
スケジュールは、<div class="list">〜</div>を追加・削除すると、項目の数を変えられます。
会場へのアクセス（.access1）
Googleマップと、所在地・行き方を縦に並べています。Google Mapの使い方はこちら。
その下の「ご来場のみなさまへ」は、通常の箇条書き（ul）です。
お知らせ（.news）
雨天時の開催情報など、イベントの連絡に使えます。日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
スマホ下部の固定ボタン（.fixed1）
画面幅700px以下の時だけ、画面の下に固定で表示します。
電話のボタンのtel:000-000-0000の数字を、ご自身の電話番号に変更して下さい。不要なボタンは、<a>の行を削除すれば、残りのボタンが横幅いっぱいに広がります。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
アイコン画像について（Font Awesomeの解説）
アイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのtheme.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、theme.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
フォントについて
本文は「Noto Sans JP」、見出しとイベント名は「Shippori Mincho B1」、日付などの英数字は「Roboto Slab」を使っています。いずれもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。
本文のフォントはtheme.cssの--base-font、英数字のフォントは--accent-fontで変更できます。見出しとイベント名のフォントは、style.cssの「main h2」「.overview h1」「#side-left .name」に直接書いています。
写真素材について
当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。
デフォルトのパララックス効果の変更（.inview）
ブロックが下からふわっと出現してくるパララックスも一括置き換えができます。
変更したい場合は、js/jquery.inview_set.jsの冒頭にある、
const FX_DEFAULT = 'up';
のupを変更するだけです。デフォルトで準備されているのは以下です。
'up','down','transform1','transform2','transform3','blur'
up以外に入れ替えてみて下さい。html側にclass="inview"とあるブロックに適用されます。
補足：一部だけ違う効果（例えばblur）を使いたい場合はdata-fxを使って、
class="inview" data-fx="blur"
とすればそこだけblurが適用されます。
タイムテーブルの中は、タブを切り替えた時に一瞬見えなくならないよう、パララックスを付けていません。
テンプレートの使い方に迷った場合は
足りないレイアウトは「パーツ」で補えます
新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。
