テンプレートのご利用前に必ずお読み下さいREAD ME

利用規約のご案内

このテンプレートは、Template Partyにて無料配布している『夏祭り・地域のお祭りのイベント告知向け（ショート版） 無料ホームページテンプレート tp_event1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。

HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。

下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。

【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！

コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。

このテンプレートで使用しているカラーセット

● ● ● ●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。

背景が濃い色のため、白いカード（開催概要カード）の中の色は、style.cssの「白いカード（開催概要カード・タイムテーブルの中身）の中で使う色」で、theme.cssとは別に指定しています。
footerの背景色（#0b1226）は、style.cssの「footer」に直接書いています。

当テンプレートの使い方

titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>夏祭り・地域のお祭りのイベント告知向け（ショート版） 無料ホームページテンプレート tp_event1</title>
を編集しましょう。
イベント名が「さんぷる夏まつり」だとすれば、
<title>さんぷる夏まつり｜2027年8月21日（土）開催</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">にしています。

ページ全体のレイアウトについて

大きな画面で見た時に、右側にスマホ幅の列、左側に写真のブロックを表示するレイアウトです。
画面幅800px未満では、左側のブロックは表示せず、通常のスマホ表示になります。

ヘッダーとメニューはありません。ロゴはメイン画像の左上に置いています。

列の幅を変える

style.cssの「#container」にある、
--column-width: 480px;
の数字を変更して下さい。左側のブロックの幅も、この値から自動で計算されます。

幅を大きくした場合は、左側のブロックを表示する画面幅も確認して下さい。
左側のブロックは画面幅800px以上で表示しています。列の幅を大きくすると、この画面幅の時に左側のブロックが狭くなりすぎる場合があります。その場合は、style.cssの@media (min-width:800px)の数字も大きくして下さい。

左側のブロック（#side-left）

写真（images/side.jpg）を背景に、ロゴ・キャッチ・イベント名を大きく表示します。写真の上の方に、文字を読みやすくするための濃い色を重ねています（style.cssの「#side-left::before」）。

キャッチとイベント名は、開催概要カードとは別に書いています。変更する時は、両方を書き換えて下さい。

メイン画像について

写真は1枚です。cssはstyle.cssの「.mainimg」で検索すると該当ブロックが出てきます。

写真の高さは、画面の高さに合わせて変わります（最小260px、最大560px）。写真は枠に合わせて切り抜かれるので、大事な部分が写真の中央付近にある写真を使って下さい。

左上のロゴは、生成り色の箱の上に載せています。箱の色は「.mainimg .logo」のbackgroundで変更できます。

開催概要カードについて

メイン画像に重ねている白いカードです。cssはstyle.cssの「.overview」で検索すると該当ブロックが出てきます。

日付

1日だけのイベントは、
<p class="date">2027.08.21<span>SAT</span></p>
期間があるイベントは、<br>で区切って2行にします。
<p class="date">2027.08.21<span>SAT</span><br>- 08.22<span>SUN</span></p>
2行目の日付は1行目の日付の右端に、曜日は曜日の左端に、自動でそろいます。曜日は「（土）」のような書き方でもOKです。

タグ（入場無料など）

<ul class="tags">の中の<li>を追加・削除して下さい。

お問い合わせの電話番号

<a href="tel:000-000-0000">の数字も、表示している電話番号と同じものに変更して下さい。スマホでタップすると電話がかかります。

会場の地図のリンクについて

「会場の地図を見る」のボタンと、スマホ下部の「地図」のボタンは、Googleマップの検索結果を開きます。
リンク先のURLの最後の、
https://www.google.com/maps/search/?api=1&query=東京駅
の部分を、会場の名前や住所に変更して下さい。

ブロックを追加したい場合は

見どころ・出店者の紹介・タイムテーブル・アクセス・お知らせなどのブロックが入った「フル版」もあります。同じシリーズのフル版のテンプレートから、ブロックごとコピーしてご利用下さい。

見出し（main h2・main h3）や各ブロックのcss、パララックス（.inview）のjsは、このテンプレートにも入っています。htmlをコピーするだけで、フル版と同じ表示になります。

スマホ下部の固定ボタン（.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の「.overview h1」「#side-left .name」に直接書いています。

写真素材について

当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。

テンプレートの使い方に迷った場合は

サポート掲示板をご利用下さい。

足りないレイアウトは「パーツ」で補えます

新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。