テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『音楽フェス・イベント向け 無料ホームページテンプレート（LP） tp_3d1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>音楽フェス・イベント向け 無料ホームページテンプレート（LP） tp_3d1</title>
を編集しましょう。
あなたのホームページ名が「サンプルフェス2027」だとすれば、
<title>サンプルフェス2027</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© あなたのサイト名 All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
ロゴ画像のaltタグも変更しましょう。
headerとfooterのhtml側に2箇所、
alt="あなたのサイト名"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
アイコン画像について（Font Awesomeの解説）
アイコンは主にFont Awesomeの素材です。
Font Awesome 公式サイト
Font Awesome アイコン一覧
iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。
Font Awesomeを使う為に必要なタグ、ファイル類。
cssフォルダのtheme.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。
何年も経過した場合、動作に問題が出てくる可能性があります。
テンプレートを編集していないのに突然動きがおかしくなった場合は、theme.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ヘッダー（header）とメニューについて
cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
背景が濃い色なので、headerのロゴも白い文字の画像（images/logo_white.png）を使っています。
ロゴの横の「MUSIC FESTIVAL 2027」はテキストです。html側の<div class="logo-area">の中で書き換えられます。画面幅700px以下では非表示になります。
1ページだけのサイト（LP）です
メニューは、ページ内の各ブロックへのリンク（href="#about"など）です。クリックすると、該当のブロックまでなめらかにスクロールします。
リンク先は、各ブロックの<section id="about">のidと合わせて下さい。ブロックを増やした場合は、idを付けてメニューに追加して下さい。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
トップページメイン画像（3Dカルーセル・ドラム型）の解説
cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
動きはjsフォルダのmain.jsの「3Dカルーセル（メイン画像）」の部分で制御しています。
写真が縦の円（ドラム）に並んで、一定時間ごとに1枚ずつ上へ回ります。正面に来た写真は少し手前に出て、元の色に戻ります。
矢印ボタン、横の写真のクリック、スマホのスワイプでも切り替えられます。正面の写真にマウスを乗せている間は止まります（左右の余白や横の写真では止まりません）。
写真を増やしたい、減らしたい場合
<div class="slide">〜</div>のブロックをコピーして追加、または削除して下さい。4枚以上がおすすめです。
円を作るのに写真が足りない時は、jsが写真のコピーを足して円を埋めます。
写真の縦横比は、cssで横16：縦9に固定しています。
円の形が崩れないようにする為です。違う縦横比の写真は、中央を基準に自動でトリミングされます。変更したい場合は、style.cssの「.mainimg .slide」の中にあるaspect-ratio: 16 / 9;を変更して下さい。
写真の下のキャプション
各写真の<div class="caption">の中身が、正面に来た時に写真の下に表示されます。正面の写真の真下に、中央揃えで並びます（矢印ボタンと枚数も、その下に並びます）。位置や文字の大きさは、style.cssの「.mainimg .carousel-nav」から下で変更できます。番号（01、02…）と枚数（01 / 07）は、jsが自動で付けます。
切り替えの間隔を変えたい場合
index.htmlの<div class="mainimg">を、例えば<div class="mainimg" data-interval="7000">とすると7秒になります（指定がない場合は5秒）。
1枚目だけは、写真が表示されてから2.5秒で最初の切り替えが始まります（「動くメイン画像」だと早めに気づいてもらう為です）。変更したい場合は、jsフォルダのmain.jsにあるvar FIRST = 2500;の数字を変更して下さい。
回転にかける時間（1.2秒）は、style.cssの「.mainimg .ring」と「.mainimg .slide」の中にある1.2sを、両方同じ数字に変更して下さい。
正面の写真のせり出し方を変えたい場合
style.cssの「.mainimg .slide.pos0」の中にある--pop: 4vw;を変更して下さい。0にすると手前に出ません。大きくしすぎると上下の写真と重なるので、6vwくらいまでがおすすめです。
正面以外の写真の色を変えたい場合
style.cssの「.mainimg .slide」の中にあるfilter: saturate(0.6) brightness(0.5);で、正面以外の写真の色を暗く落としています。saturateは鮮やかさ、brightnessは明るさで、どちらも1にすると元の色のままになります。
写真の大きさを変えたい場合
style.cssの「.mainimg .slide」の中にあるwidth: 40vw;（画面幅の40%）で変更できます。小さな端末用は、すぐ下の「画面幅700px以下の追加指定」の中にあります。
写真を大きくした場合は、「.mainimg .carousel」のheight（表示エリアの高さ）も合わせて大きくして下さい。
写真同士の間隔、見える写真の枚数を変えたい場合
index.htmlの<div class="mainimg">に、次の指定を追加できます。
data-gap="1.08"：写真同士の間隔（1で上下の写真とぴったり。大きくすると間が空きます。このテンプレートは1.08にしています）
data-panels="12"：円を作るのに必要な最低枚数（増やすと円が大きくなります）
例：<div class="mainimg" data-gap="1.4" data-panels="16">
ページを開いた時の表示について
写真が1枚ずつバラバラに表示されないように、写真の読み込みが終わってから、写真の部分だけふわっと表示しています。回線が遅い場合も、3秒たったら表示します。
端末の設定で「視差効果を減らす」「動きを減らす」などをオンにしている場合は、自動では回らず、回転もすぐに切り替わります。
古いブラウザについて
3D表示にcssの新しい機能を使っている為、2021年頃より前のブラウザでは、メイン画像が正しく表示されない場合があります。
上の大きな英語とキャッチコピー
html側の<div class="text">の中を書き換えて下さい。大きな英語の文字サイズは、style.cssの「.mainimg .text h2」で変更できます。
上下にはみ出した写真は、「.mainimg .carousel」のoverflow: hidden;で隠しています。
見出し（h2）について
cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
<h2><span>01 / ABOUT</span>音と光に、…</h2>のように、spanの中が上の小さな英語（アクセントカラー）になります。
見出しのフォントは、theme.cssの--heading-fontで指定しています。
写真と文章の2カラム（.c2）
cssフォルダのstyle.cssを開き、「main .c2」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
「ABOUT」とお知らせのブロックで使っています。画面幅700px以下では縦並びになります。
「出演アーティスト」（.gallery1）
cssフォルダのstyle.cssを開き、「.gallery1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左に大きな写真1枚と説明文、右に小さな写真2枚を並べるブロックです。小さな端末でも左右に並んだままです。
3枚の写真は、同じ縦横比でご用意下さい。縦横比が違うと、左右の高さがずれます。
写真の角を丸くしたい場合は、html側のclassを"gallery1 kadomaru"として下さい。
「3つのステージ」（.list1）
cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
デフォルトでは3カラムです。html側のclassを"list1 col2"とすると2カラムになります。
写真はアップした画像の縦横比のまま表示されます。並べる写真は同じ縦横比にそろえると、きれいに見えます。
「チケット購入から入場まで」（.flow）
cssフォルダのstyle.cssを開き、「.flow」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
4列で並んでいます。ステップの数を変える場合は、html側の<li>〜</li>を追加・削除し、style.cssの「main .flow」の中にあるrepeat(4, minmax(0, 1fr))の数字も合わせて変更して下さい。画面幅700px以下では縦並びになります。
開催概要の表（.ta1）とGoogle Map（.iframe1）
cssフォルダのstyle.cssを開き、「.ta1」「.iframe1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
表の行を増やす場合は、html側の<tr>〜</tr>をコピーして追加して下さい。
地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、<div class="iframe1">の中のiframeタグと入れ替えて下さい。YouTube動画の埋め込みにも使えます。
お知らせブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左に見出し、右にお知らせを並べています（小さな端末では縦並び）。日付の下の小さな文字はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、線の代わりにアクセントカラーの丸が付きます。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
背景色はtheme.cssのlight-color（少し明るい紫）です。ロゴは白い文字の画像（images/logo_white.png）を使っています。
お問い合わせフォームについて
ページの一番下（<section id="contact">）のフォームはサンプルです。そのままでは動作しません。
フォームのデザインは、cssフォルダのform.cssで指定しています（index.htmlで読み込んでいます）。入力欄の色は、濃い背景に合わせてtheme.cssのlight-colorにしています。
デフォルトのパララックス効果の変更（.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が適用されます。
オリジナルで準備することもできます。css/inview.cssにcssを追加し、js/jquery.inview_set.jsの「const FX_LIST」の行に設定したスタイルを追加して下さい。
テンプレートの使い方に迷った場合は
足りないレイアウトは「パーツ」で補えます
新しいレイアウトを追加したい場合は、パーツのコード単体（html / css / js コード）をコピペしてご利用頂く事もできます。
