テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『カフェ・ベーカリー向け 無料ホームページテンプレート tp_3d1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>カフェ・ベーカリー向け 無料ホームページテンプレート tp_3d1</title>
を編集しましょう。
あなたのホームページ名が「サンプルベーカリー」だとすれば、
<title>サンプルベーカリー</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」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
ロゴの横の「BAKERY & CAFE」はテキストです。html側の<div class="logo-area">の中で書き換えられます。画面幅700px以下では非表示になります。
表示中のページのメニューには、html側で<li class="current">を付けています。大きな端末では下線、小さな端末の開閉メニューではアクセントカラーの背景になります。
画面幅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で横4：縦3に固定しています。
円の形が崩れないようにする為です。違う縦横比の写真は、中央を基準に自動でトリミングされます。変更したい場合は、style.cssの「.mainimg .slide」の中にあるaspect-ratio: 4 / 3;を変更して下さい。
写真の下のキャプション（商品名など）
各写真の<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: 6vw;を変更して下さい。0にするとせり出しません。大きくしすぎると安っぽく見えるので、10vwくらいまでがおすすめです。
見下ろす角度、奥の写真の濃さを変えたい場合
style.cssの「.mainimg .carousel」の中にあるperspective-origin: 50% -60%;で、見下ろす角度を変えられます。マイナスの数字を大きくするほど、上から見下ろす形になります。50% 50%にすると真横から見たリングになります。
奥の写真の濃さは、「.mainimg .slide.pos4」のopacity: 0.15;で変更できます（0にすると奥の写真は見えなくなります）。
見下ろす角度を変えると、奥の写真が上の文字に重なることがあります。その場合は「.mainimg .carousel」のmargin-top（上に空けるスペース）を大きくして下さい。
正面以外の写真の色を変えたい場合
style.cssの「.mainimg .slide」の中にあるfilter: saturate(0.3) brightness(0.95);で、正面以外の写真の色を落としています。saturateは鮮やかさ、brightnessは明るさで、どちらも1にすると元の色のままになります。
写真の大きさを変えたい場合
style.cssの「.mainimg .slide」の中にあるwidth: 20vw;（画面幅の20%）で変更できます。小さな端末用は、すぐ下の「画面幅700px以下の追加指定」の中にあります。
写真を大きくした場合は、「.mainimg .carousel」のheight（表示エリアの高さ）も合わせて大きくして下さい。
写真同士の間隔、見える写真の枚数を変えたい場合
index.htmlの<div class="mainimg">に、次の指定を追加できます。
data-gap="1.1"：写真同士の間隔（1で隣の写真とぴったり。大きくすると間が空きます。このテンプレートは1.1にしています）
data-panels="12"：円を作るのに必要な最低枚数（増やすと円が大きくなり、左右に見える写真が増えます）
例：<div class="mainimg" data-gap="1.4" data-panels="16">
ページを開いた時の表示について
写真が1枚ずつバラバラに表示されないように、写真の読み込みが終わってから、写真の部分だけふわっと表示しています。回線が遅い場合も、3秒たったら表示します。
端末の設定で「視差効果を減らす」「動きを減らす」などをオンにしている場合は、自動では回らず、回転もすぐに切り替わります。
古いブラウザについて
3D表示にcssの新しい機能を使っている為、2021年頃より前のブラウザでは、メイン画像が正しく表示されない場合があります。
上の大きなキャッチコピーと英語
html側の<div class="text">の中を書き換えて下さい。左の大きなキャッチコピーの文字サイズは「.mainimg .text h2」、右の英語は「.mainimg .text .catch」で変更できます（どちらもstyle.css）。
見出し（h2）について
cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
<h2><span>01 / CONCEPT</span>毎朝、いちばんの…</h2>のように、spanの中が上の小さな英語になります。
見出しの丸ゴシック体は、theme.cssの--heading-fontで指定しています。
写真と文章の2カラム（.c2）
cssフォルダのstyle.cssを開き、「main .c2」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
トップの「毎朝、いちばんの焼きたてを。」、店舗案内ページの店主のあいさつ、お知らせ、お問い合わせのブロックで使っています。画面幅700px以下では縦並びになります。
トップの「季節のおすすめ」（.gallery1）
cssフォルダのstyle.cssを開き、「.gallery1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左に大きな写真1枚と説明文、右に小さな写真2枚を並べるブロックです。小さな端末でも左右に並んだままです。
3枚の写真は、同じ縦横比でご用意下さい。縦横比が違うと、左右の高さがずれます。
写真の角を丸くしたい場合は、html側のclassを"gallery1 kadomaru"として下さい。
トップの「私たちのこだわり」、メニューページのカード（.list1）
cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
デフォルトでは3カラムです。html側のclassを"list1 col2"とすると2カラムになります。メニューページが2カラムになっています。
写真はアップした画像の縦横比のまま表示されます。並べる写真は同じ縦横比にそろえると、きれいに見えます。
トップの「ホールケーキのご予約」（.flow）
cssフォルダのstyle.cssを開き、「.flow」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
4列で並んでいます。ステップの数を変える場合は、html側の<li>〜</li>を追加・削除し、style.cssの「main .flow」の中にあるrepeat(4, minmax(0, 1fr))の数字も合わせて変更して下さい。画面幅700px以下では縦並びになります。
お知らせブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
左に見出し、右にお知らせを並べています（小さな端末では縦並び）。日付の下の小さな文字はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、線の代わりにアクセントカラーの丸が付きます。
お問い合わせのブロック（「ケーキのご予約も、お気軽に。」）
cssフォルダのstyle.cssを開き、「#contact」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
トップと、メニュー・お店について・店舗案内の各ページの最後に入っています。背景色はbg1-parts（theme.cssのbg-inverse-color）です。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
ロゴは白い文字の画像（images/logo_white.png）を使っています。
写真とテキストが左右交互に並ぶブロック（.free1）
cssフォルダのstyle.cssを開き、「.free1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
お店についてページで使っているブロックです。
reverseをつければ写真とテキストの配置が入れ替わります。（小さな端末では、写真→テキストの順番で統一。）
店舗情報の表（.ta1）とGoogle Map（.iframe1）
cssフォルダのstyle.cssを開き、「.ta1」「.iframe1」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
店舗案内ページで使っています。表の行を増やす場合は、html側の<tr>〜</tr>をコピーして追加して下さい。
地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、<div class="iframe1">の中のiframeタグと入れ替えて下さい。YouTube動画の埋め込みにも使えます。
お問い合わせフォームについて
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 コード）をコピペしてご利用頂く事もできます。
