Aboutお店について
お店に関する説明があればここに書きます。
2021年10月「以前」に弊社テンプレートを利用した事のあるお客様へ
2021年11月以降からの配布テンプレートについて、かなり仕様が変更されましたので、メインとなる内容のみピックアップさせて頂きます。
※今後しばらく仕様の変更が入るかもしれません。
- モバイルファーストのcssに変更しました。小さな端末からの設定になるのでご注意下さい。
- IE10以前は考慮しておりません。Microsoft社のIEサポートが2022年6月で終了する為、IE11の動作チェックも近いうちに終了させて頂きます。
- floatでのレイアウトから、主にflexボックスを使ったレイアウトへ変更されました。
当テンプレートの使い方
初心者向けマニュアル公開中
画像加工やテンプレートの編集方法、無料サーバーを使ってサイトを公開するなど動画をまじえてわかりやすく解説しています。
初心者向けマニュアルはこちら。
titleタグ、copyright、metaタグ、他の設定
titleタグの設定はとても重要です。念入りにワードを選んで適切に入力しましょう。
まず、htmlソースが見れる状態にして、
<title>飲食店向け 無料ホームページテンプレート tp_cafe17</title>
を編集しましょう。
あなたのホームページ名が「Sample Cafe」だとすれば、
<title>Sample Cafe</title>
とすればＯＫです。SEO対策もするなら冒頭に重要なワードを入れておきましょう。
copyrightを変更しましょう。
続いてhtmlの下の方にある、
Copyright© Sample Cafe All Rights Reserved.
の部分もあなたのサイト名に変更します。
metaタグを変更しましょう。
htmlソースが見える状態にしてmetaタグを変更しましょう。
ソースの上の方に、
content="ここにサイト説明を入れます"
という部分がありますので、テキストをサイトの説明文に入れ替えます。検索結果の文面に使われる場合もありますので、見た人が来訪したくなるような説明文を簡潔に書きましょう。
h1ロゴのaltタグも変更しましょう。
html側に、
alt="Sample Cafe"
となっている箇所があるので、この部分もあなたのサイト名に変更しましょう。
トップページのロゴアニメーション（vivus）の解説
トップページのロゴアニメーションには、vivusを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
vivus 公式サイト：https://maxwellito.github.io/vivus/
当テンプレートのロゴアニメーションを置き換えたい人は
弊社マニュアルをご覧下さい。※Illustratorが必要です。
ロゴアニメーションが作れない！という人は
静止画ロゴでのトップページもご用意しています。
使い方は簡単で、index.htmlの冒頭が、
<body class="home">
となっているのを、
<body class="home index2">
にするだけです。
トップページのスライドショー（vegas）の解説
トップページのスライドショーには、vegasを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
vegas 公式サイト：https://vegas.jaysalvat.com/
オプション一覧：https://vegas.jaysalvat.com/documentation/settings/
トランジション一覧：https://vegas.jaysalvat.com/documentation/transitions/
上記の「トランジション一覧」で、色々なスライドショーのパターンを見る事ができます。お好みで設定を変更してみて下さい。jsフォルダのvegas.jsの値を変更するだけです。
vegasの設定は、jsフォルダのvegas.jsにあります。枚数を追加したい際もここに追加するだけでOKです。
※閲覧しているウィンドウサイズにより、スライドショー画像はトリミングされますので、切り抜かれてもおかしくない画像をご用意下さい。
vegasを使う為に必要なタグ、ファイル類。
1. html冒頭のhead内にある、「vegas.min.css」の読み込みの１行。
2. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
3. その下にある、「スライドショー（vegas）」からの数行のタグ。
4. jsフォルダ内の「js/vegas.js」。
トップページの「Photo's（お料理の写真）」の横スライドショーについて
こちらの横スライドショーには、slickを使用しています。
テンプレート内の解説及び、当サイト上でのマニュアル以外のサポートは基本的には行なっておりませんので、使いこなしたい方はGoogle検索などかけてみて下さい。
写真の縦横サイズを予め揃えておくと綺麗に並びます。
枚数は自由に変更できます。html側に既存の写真ブロックをコピペして新しい画像ファイル名に書き換えて下さい。
スタイル変更は、cssフォルダのstyle.cssでできます。それ以外に、jsフォルダのslick.jsにも設定があります。
slickを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「スライドショー（slick）」からの数行のタグ。
3. jsフォルダ内の「js/slick.js」。
このh2タグのフェードイン効果をつけたくない場合
jsフォルダのjquery.invie_set.jsの上の方にある、
$('main h2, .blur')
を、
$('.blur')
とし、次に、cssフォルダのstyle.cssの、
main h2 {
の
opacity: 0;
の１行を削除すればOKです。
アニメーション対象が画面に現れたらアクションを起こす
h2の見出しがふわっと出現したり、写真が下からふわっと浮き上がったり、アニメーション対象が画面に現れたらアクションを起こす、という処理はinviewで行なっています。
inviewを使う為に必要なタグ、ファイル類。
1. html下部にある、「jQueryファイルの読み込み」のタグ。※下のjsファイルより先に読み込んで下さい。
2. その下にある、「パララックス（inview）」からの数行のタグ。
3. jsフォルダ内の「js/jquery.inview_set.js」。
4. cssフォルダ内の「inview.css」。
↓ 「blur」スタイルの適用例
↓ 「up」スタイルの適用例
↓ 「left」スタイルの適用例
↓ 「right」スタイルの適用例
↓ 「transform1」スタイルの適用例
↓ 「transform2」スタイルの適用例
About Google Fonts英語表記に使っているフォント（↑）について
cssフォルダのstyle.cssの冒頭でGoogle Fontsを読み込んでそれを指定しています。英語専用フォントです。
変更する事もできますので、気になる人はGoogle Fontsマニュアルをご覧下さい。
フォントサイズ（rem）について
cssフォルダのstyle.cssで、基準となるフォントサイズを「２箇所」記載しています。
全体的にフォントサイズを大きくまたは小さくしたいなら、この基準サイズだけを変更すればOKです。
１つ目はstyle.cssの冒頭に記載されている以下。
font-size: 14px;
２つ目は下の方にある、画面幅800px以上の端末向けで、以下。
font-size: 18px;
上記以外のフォントサイズは全て「rem」の単位がついていますが、これは、上のpxのサイズに「相対的」に出しているサイズになります。
例えば、800px未満の画面幅の時の基準サイズは「14px」なので、他の要素などで28pxで表示させたい場合は、
28px ÷ 14px = 2rem(28px)
となります。（cssの指定は、font-size: 2rem; となる。）
10pxにしたい場合も同様です。この場合、
10px ÷ 14 = 0.7142...
と小数点が続いてしまいますが、厳密に出す必要はないので、適当に切り上げて、
font-size: 0.7rem;
あたりにしておけばOKです。
または計算などせず、「見た目」でremの数値を決めてしまってもいいでしょう。
実際このテンプレートのremは、厳密に割り出したわけじゃなく、雰囲気(何となく適当)で指定しています。
emや%などは継承の問題が発生しますがremだとこれが起きないので便利です。