テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『カフェ・喫茶店向け 無料ホームページテンプレート tp_collage1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>カフェ・喫茶店向け 無料ホームページテンプレート tp_collage1</title>
を編集しましょう。
あなたのホームページ名が「サンプル珈琲店」だとすれば、
<title>サンプル珈琲店</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
titleとmetaタグ（description）は、ページごとに変えるのがおすすめです。
例えば「メニュー」ページなら<title>メニュー｜サンプル珈琲店</title>のように、そのページの内容が分かるtitleにすると、検索結果で見つけてもらいやすくなります。
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関連のファイルのバージョンを変更して動作するか確認してみて下さい。
フォントについて
本文は明朝体の「Noto Serif JP」、見出しは明朝体の「Shippori Mincho」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。
本文のフォントはtheme.cssの--base-fontで変更できます。
見出しのフォントは、style.cssの中でShippori Minchoと検索すると、使っている箇所が出てきます。変更する場合はそれぞれ書き換えて下さい。
イラスト、写真素材について
当テンプレートで使用しているイラストや写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ヘッダー（header）とメニューについて
cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
ロゴの下の「ちいさな珈琲と、焼き菓子の店」はテキストです。html側の<div class="logo-area">の中で書き換えられます。画面幅700px以下では非表示になります。
表示中のページのメニューには、html側で<li class="current">を付けています。大きな端末では下線、小さな端末の開閉メニューではアクセントカラーの背景になります。
「メニュー」には、ドロップダウンメニューを入れています。メニューページの各項目（menu.htmlのid="menu1"〜id="menu3"）に直接飛びます。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
トップページメイン画像の解説
cssフォルダのstyle.cssを開き、「.mainimg」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左にキャッチコピー、右に大きな写真と、その左下に重なる小さな写真を並べた、動きのない（静止画の）メイン画像です。画面幅900px以下では、キャッチコピーの下に写真が並びます。
左上の水彩のにじみは、imagesフォルダのwatercolor.pngです。濃さはcssフォルダのstyle.cssの「左上の水彩のにじみ」にあるopacityで調整できます。不要な場合は、index.htmlの<p class="watercolor">の行を削除して下さい。
写真はimagesフォルダのmainimg1.jpg（大きな写真）とmainimg2.jpg（小さな写真）です。大きな写真は横4：縦3、小さな写真は正方形がおすすめです。
小さな写真が不要な場合は、html側の<div class="image sub">の行を削除して下さい。
写真の右上の縦書きの文字は、html側の<p class="tate">です。不要な場合はこの行を削除して下さい。
手書き風イラストについて
トップページの4か所（メイン画像のキャッチコピーの下、「わたしたちの、こだわり。」「おうちでも、お店の味を。」「季節のメニュー」のテキストの下）に、手書き風のイラストを入れています。html側の<p class="illust">の行です。不要な場合はこの行を削除して下さい。
画像はimagesフォルダのillust1.png〜illust4.pngです。ほかのモチーフも入った一覧（illust.png）も同梱していますので、切り抜いてご利用下さい。
イラストの濃さは、style.cssの「.mainimg .text .illust」「.collage1 .text .illust」の中にあるopacity: 1;で変更できます。小さくするほど薄くなります（例：0.6で6割の濃さ）。
大きさは、同じ場所のwidthで変更できます。
見出し（h2）について
cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
見出しの下の短い線は「main h2::after」で指定しています。中央揃えの見出し（<h2 class="c">）では、線も中央になります。
下層ページでは、最初の見出し（h2）がページタイトルの代わりになっています。
写真とテキストをずらして並べるブロック（.collage1）
cssフォルダのstyle.cssを開き、「.collage1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
トップの「わたしたちの、こだわり。」「おうちでも、お店の味を。」「ハンドドリップワークショップ」「季節のメニュー」「アクセス」と、こだわりページで使っているブロックです。
左から「大きな写真・テキスト・小さな写真」の順に、高さを少しずらして並べています。大きな写真は画面の端までくっつきます。
左右を入れ替えたい場合
html側のclassを"collage1 reverse"とすると、「小さな写真・テキスト・大きな写真」の順になります。上から交互に使うと、リズムが出ます。
小さな写真を消したい、重ねたい場合
小さな写真が不要な場合は、html側の<div class="image sub">の行を削除して下さい（「ハンドドリップワークショップ」「アクセス」がこの形です）。
小さな写真を大きな写真の角に少し重ねたい場合は、<div class="image sub overlap">として下さい（「おうちでも、お店の味を。」がこの形です）。大きさはstyle.cssの「.collage1 .sub.overlap」のwidthで変更できます。
小さな端末では
画面幅900px以下では、「大きな写真→テキスト→小さな写真」の順に縦に並びます。
ワークショップの流れと、アクセスの情報
「ハンドドリップワークショップ」の番号つきの流れは<ol class="course">、「アクセス」の住所や営業時間は<dl class="info">です。どちらもテキストの中で使えます。番号（01、02…）はcssが自動で付けます。
トップの「おすすめのメニュー」（.spot）
cssフォルダのstyle.cssを開き、「.spot」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左にテキスト、右に3枚の写真を高さをずらして並べています。ずらす量は「.spot .list:nth-child(1)」「.spot .list:nth-child(3)」のmargin-topで変更できます。
画面幅600px以下では1列になり、写真が左右交互に寄ります。
3枚の写真は、同じ縦横比でご用意下さい。
写真がゆっくり動く帯（.slideup1）
cssフォルダのstyle.cssを開き、「.slideup1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
トップの「ハンドドリップワークショップ」と「季節のメニュー」の間にある、画面幅いっぱいの写真の帯です。スクロールに合わせて写真がゆっくり上下に動きます。
写真はhtml側の<img src="images/landscape3.jpg" alt="" class="scrollfx-move">、写真の上の一文は<div class="text">の中で変更できます。
写真に重ねている黒の濃さは「.slideup1.overlay::before」のrgba(0,0,0,0.25)で変更できます。黒を重ねたくない場合は、html側のclassからoverlayを削除して下さい。
動く量は、jsフォルダのmain.jsの「画像・動画アップのパララックス」にあるconst maxMove = 80;などで調整できます。
端末の設定で「視差効果を減らす」「動きを減らす」などをオンにしている場合は、写真は動きません。
お知らせブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左に見出し、右にお知らせを並べています（小さな端末では縦並び）。日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
このブロックだけ、背景を淡い色（bg1-light-parts）にしています。
Google Map（.iframe1）
cssフォルダのstyle.cssを開き、「.iframe1」で検索すると該当ブロックが出てきます。
トップの「アクセス」の地図です。地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、<div class="main iframe1 gray">の中のiframeタグと入れ替えて下さい。
地図は白黒にしています。カラーに戻したい場合は、html側のclassからgrayを削除して下さい。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
メニューページ（.free1）
cssフォルダのstyle.cssを開き、「.free1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
写真とテキストを左右交互に並べるブロックです。<div class="list reverse">とすると、写真とテキストの配置が入れ替わります。
項目を増やす場合は、<div class="list" id="menu1">〜</div>をコピーして追加し、idも重ならないように変更して下さい（メニューのドロップダウンから、このidに飛びます）。
テイクアウトページのカード（.list1）
cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
3列のカードです。2個目のカードを少し下げて、段違いにしています。段違いが不要な場合は「.list1 .list:nth-child(3n+2)」のブロックを削除して下さい。
並べる写真は同じ縦横比にそろえると、きれいに見えます。
ワークショップページの流れ（.flow）
cssフォルダのstyle.cssを開き、「.flow」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
4列で並んでいます。ステップの数を変える場合は、html側の<li>〜</li>を追加・削除し、style.cssの「main .flow」の中にあるrepeat(4, minmax(0, 1fr))の数字も合わせて変更して下さい。画面幅700px以下では縦並びになります。
お問い合わせフォームについて
contact.htmlのフォームはサンプルです。そのままでは動作しません。
フォームのデザインは、cssフォルダのform.cssで指定しています（contact.htmlでのみ読み込んでいます）。
デフォルトのパララックス効果の変更（.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 コード）をコピペしてご利用頂く事もできます。
