テンプレートのご利用前に必ずお読み下さい
利用規約のご案内
このテンプレートは、Template Partyにて無料配布している『和食店・寿司店向け 無料ホームページテンプレート tp_bento1』です。必ずダウンロード先のサイトの利用規約をご一読の上でご利用下さい。
HP最下部の著作表示『Web Design:Template-Party』は無断で削除しないで下さい。
わざと見えなく加工する事も禁止です。
下部の著作を外したい場合は
Template-Partyのライセンス契約を行う事でHP下部の著作を外す事ができます。
【お知らせ】弊社運営サイト（Frames CMS）を使えば、コード編集不要！
コード編集に挫折しそうなお客様向け。コードを開く必要がなく、管理ページから楽々更新。
まずは、Frames CMS のFree（無料版）を使ってみて下さい。
業者様のクライアントへのご活用にも。
このテンプレートで使用しているカラーセット
●
●
●
●
cssフォルダのtheme.cssで一括置き換えできますし、個別に直接カラーコードを指定してもOKです。
背景が墨色（黒）のテンプレートです。theme.cssの--light-colorと--primary-light-colorは「背景より少し明るい色」として使っています。
当テンプレートの使い方
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>和食店・寿司店向け 無料ホームページテンプレート tp_bento1</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」、見出しの英字と価格は英字フォント「Cormorant Garamond」を使っています。どちらもGoogle Fontsで、cssフォルダのtheme.css冒頭で読み込んでいます。
本文のフォントはtheme.cssの--base-font、英字のフォントは--accent-fontで変更できます。
写真素材について
当テンプレートで使用している写真素材は、弊社素材サイトhaconanaにて無料DLできます。
ヘッダー（header）とメニューについて
cssフォルダのstyle.cssを開き、「header」「#menubar」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
メニューが増えて横に収まらなくなった場合は、メニュー全体がロゴの下に回り込みます。
表示中のページのメニューには、html側で<li class="current">を付けています。文字がメインカラーになります。
「メニュー」には、ドロップダウンメニューを入れています。メニューページの各項目（menu.htmlのid="meal"、id="ippin"、id="drink"）に直接飛びます。
画面幅900px未満で開閉メニューになります
900pxの数値を変更したい場合は、jsフォルダのmain.js冒頭にある、
const breakPoint = 900;
この数字を変更して下さい。
動作確認の際にあまりに素早い動作をされるとスクリプトが追いつかない場合があります。特にweb業者様など慣れている環境でテストされる際は、あくまで通常ユーザーの速度で試して下さい。
トップページメイン画像の解説
このテンプレートは、トップの1行目のベントー（写真を敷き詰めるグリッド）が、メイン画像の代わりになっています。
1行目は、下で解説している<div class="bento">の「G」の形（左に大きなマス、右上にキャッチコピーの文字だけのマス、右下に小さなマス2つ）です。写真や文字の差し替え、マスの組み合わせの変え方は、下の「写真を敷き詰めるブロック（.bento）」をご覧下さい。
大きなマスの写真はimagesフォルダのmainimg1.jpgです。
写真1枚を画面いっぱいに表示するメイン画像にしたい場合
1行目の<div class="bento">〜<!--/.bento-->を削除し、<div id="contents">のすぐ上に、下のhtmlを入れて下さい。cssはstyle.cssに入っています（「.mainimg」で検索すると出てきます）。高さは「画面の高さ − headerの高さ（80px）」になります。
大きな端末では、キャッチコピーが読みやすいように、写真の左側をcssで少し暗くしています（写真自体は加工していません）。不要な場合や、キャッチコピーを右に置く場合は、style.cssの「.mainimg .slide::after」で調整して下さい（右に置く場合は90degを270degに）。
<div class="mainimg">
<div class="slide img1">
<div class="text left inverse">
<h2><span>JAPANESE CUISINE</span>旬を、<br>ひと皿に。</h2>
<p>説明文</p>
<div class="btn-container"><p class="btn"><a href="menu.html">メニューを見る</a></p></div>
</div>
<picture><img src="images/mainimg1.jpg" alt=""></picture>
</div>
</div>
見出し（h2）について
cssフォルダのstyle.cssを開き、「main h2」で検索すると該当ブロックが出てきます。
見出しは<h2>メニュー<span>MENU</span></h2>のように書きます。spanの英字が、和文の上に大きく表示されます。中央揃えにしたい場合は<h2 class="c">として下さい。
下層ページでは、最初の見出し（h2）がページタイトルの代わりになっています。
写真を敷き詰めるブロック（.bento）
cssフォルダのstyle.cssを開き、「.bento」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
写真を、すき間なくぎっしり並べるブロックです。トップ、メニュー、こだわり、店舗情報の各ページで使っています。
基本のしくみ
- <div class="bento">〜</div>の1つが、1行分です。行を増やしたい場合は、このブロックごとコピーして下さい。
- 画面の横幅を4列に分け、1マスは正方形になります。画面幅700px以下では2列になります。
- 中の<div>1つが1マスです。マスの大きさは、divに付けるclassで決まります。
<div>（classなし）……1マス
<div class="big">……大（横2マス×縦2マス）
<div class="wide">……横長（横2マス）
<div class="tall">……縦長（縦2マス）
マスは、htmlに書いた順番に、左上から空いている所へ自動で詰めて並びます。難しい計算は必要ありません。
組み合わせの見本
1行の中で、合計が「横4マス×縦2マス」など、四角くそろうように組み合わせるときれいです。下はこのテンプレートで使っている組み合わせです。htmlをコピーしてお使い下さい。
- A：大1＋小4（big、なし、なし、なし、なし）……トップの「うな重」の行
- B：横長1＋小2（wide、なし、なし）……メニューページの「お食事」の1行目
- C：3等分（下のc3を使います）……メニューページの「一品料理」
- D：4等分（なし×4）……メニューページの「お食事」の2行目、「飲み物・甘味」
- E：縦長＋小（tall、なし、なし、tall、なし、なし）……トップの「おまかせ握り」の行
- F：半々（wide、wide）……トップの「こだわり」、こだわりページ
- G：大1＋小2＋横長1（big、なし、なし、wide）……トップの「大トロ」の行
3等分にしたい場合
<div class="bento c3">とすると、その行だけ3列になります。画面幅700px以下では、1つ目が横幅いっぱいになり、残りの2つが下に並びます。
マスの順番を入れ替えたい場合（上下・左右）
htmlの<div>〜</div>の順番を入れ替えるだけです。例えばGの形で、横長のマスを小さいマス2つより先に書くと、横長が上、小さいマスが下になります。こだわりページの、写真と文字が左右交互になっている行も、順番を入れ替えているだけです。
大きなマス（big）を右側に置きたい場合は、<div class="bento reverse">として下さい（トップの「うな重」の行がこの形です）。画面幅700px以下では、大きなマスは横幅いっぱいになります。
写真について
写真はマスの形に合わせて、端が自動で切れて表示されます。大事なもの（商品など）は、写真の中央に来るようにして下さい。
縦長・横長・正方形、どの写真でも使えます。マウスを乗せると、写真が少し大きく、少し明るくなります。
商品名と価格
マスの中の<div class="text">に、商品名（h3）と価格（p）を書きます。価格の後ろの小さな文字（「税込」など）は<span>で囲みます。文字は左下に表示され、写真の下側が暗くなって読みやすくなります。不要な場合は、<div class="text">〜</div>を削除すると写真だけのマスになります（店舗情報ページの一番下がこの形です）。
商品名の上に、小さな英語表記を入れることもできます（外国人のお客様向けなど）。h3の中に<span>で書いて下さい。入れたい商品にだけ書けばOKです。
<h3><span>Fatty Tuna</span>大トロ</h3>
文字だけのマス
マスに背景色のclassを付けると、写真なしの文字だけのマスになります。トップの「ランチ握り」（<div class="bg1-primary-parts">）や「こだわり」（<div class="wide bg1-light-parts">）がこの形です。bg1-accent-partsなども使えます。
文字が多くてマスに入りきらない場合は、その行の高さが自動で伸びます。
マス全体をリンクにしたい場合
マスの中身を<a href="リンク先">〜</a>で囲んで下さい。
<div><a href="menu.html"><img src="…" alt=""><div class="text">…</div></a></div>
バッジ（.badge）
cssフォルダのstyle.cssを開き、「.badge」で検索すると該当ブロックが出てきます。
ベントーのマスの中に1行足すだけで、「人気No.1」「期間限定」などのバッジを付けられます。classの付け替えで、4種類の形から選べます。
<span class="badge">期間限定</span>
……小さなラベル。左上に表示されます。文字数の制限はありません。（メニューページの「季節の甘味」）
<span class="badge circle">数量<br>限定</span>
……丸いスタンプ。右上に表示されます。2行で4〜5文字くらいまでがおすすめです。（トップの「うな重」）
<span class="badge star">人気<br>No.1</span>
……ギザギザの星形。右上に表示されます。2行で4〜5文字くらいまでがおすすめです。（トップの「大トロ」）
<span class="badge ribbon">おすすめ</span>
……左上の角に、斜めの帯で表示されます。5〜6文字くらいまでがおすすめです。写真の左上が空いているときに向いています。（このテンプレートでは使っていません）
大きなマス（big）では、丸と星形が少し大きくなります。
色は、星形がアクセントカラー、ほかはメインカラーです（theme.cssの色を読み込んでいます）。
斜めに傾けたい場合は、style.cssの「.bento .badge.circle」などにtransform: rotate(10deg);を足して下さい（数字が角度です）。
テキストだけのメニュー（.list1）
cssフォルダのstyle.cssを開き、「.list1」で検索すると該当ブロックが出てきます。
メニューページの一番下にある、商品名と価格だけのリストです。写真を用意できないメニューに便利です。大きな端末では2列、画面幅600px以下では1列になります。
項目を増やす場合は、<div>〜</div>をコピーして追加して下さい。
お知らせブロックの解説
cssフォルダのstyle.cssを開き、「.news」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
日付の横の小さな枠はカテゴリーです。目立たせたい場合は<span class="accent-color">とすると、アクセントカラーの背景になります。
店舗情報ページ（.ta1、.iframe1）
表はcssフォルダのstyle.cssの「.ta1」、地図は「.iframe1」で検索すると該当ブロックが出てきます。
地図を差し替える場合は、Google Mapで場所を表示し、「共有」→「地図を埋め込む」でコードをコピーして、<div class="iframe1 gray">の中のiframeタグと入れ替えて下さい。
地図は白黒にしています。カラーに戻したい場合は、html側のclassからgrayを削除して下さい。
footerブロックの解説
cssフォルダのstyle.cssを開き、「footer」で検索すると該当ブロックが出てきます。説明コメントも入っていますので、必要に応じて調整してみて下さい。
お問い合わせフォームについて
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 コード）をコピペしてご利用頂く事もできます。
