Newsお知らせ

2024.11.23
飲食店(カフェ・居酒屋・レストラン・ピザ専門店・クラフトビール専門店・ケーキ屋さん・コーヒー専門店・ハンバーガーショップ・マカロン専門店・ベーカリーショップ)向け スマホ幅重視のLP(ランディングページ向け)無料ホームページテンプレート tp_sh1公開。
2024.00.00
サンプルテキスト。サンプルテキスト。
2024.00.00
サンプルテキスト。サンプルテキスト。
2024.00.00
サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。

Shop Data店舗情報

所在地
東京都XX区XXXX3丁目1-1
営業時間
AM00:00〜PM00:00
定休日
毎週火曜日
TEL
00-0000-0000

Follow Us

「shop」ブロックについて(「お知らせ」と「店舗情報」)

<!-- ここからお知らせとshop情報 -->
<section id="shop" class="section">
<div class="contents">

<h2><span class="hosoku">News</span><span class="fade-in-text">お知らせ</span></h2>

<dl class="table">

<dt>2024.11.23</dt>
<dd>飲食店(カフェ・居酒屋・レストラン・ピザ専門店・クラフトビール専門店・ケーキ屋さん・コーヒー専門店・ハンバーガーショップ・マカロン専門店・ベーカリーショップ)向け スマホ幅重視のLP(ランディングページ向け)無料ホームページテンプレート tp_sh1公開。</dd>

<dt>2024.00.00</dt>
<dd>サンプルテキスト。サンプルテキスト。</dd>

<dt>2024.00.00</dt>
<dd>サンプルテキスト。サンプルテキスト。</dd>

<dt>2024.00.00</dt>
<dd>サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</dd>

</dl>

<div class="shop-data">

<h2><span class="hosoku">Shop Data</span><span class="fade-in-text">店舗情報</span></h2>

<dl class="table">

<dt>所在地</dt>
<dd>東京都XX区XXXX3丁目1-1</dd>

<dt>営業時間</dt>
<dd>AM00:00〜PM00:00</dd>

<dt>定休日</dt>
<dd>毎週火曜日</dd>

<dt>TEL</dt>
<dd>00-0000-0000</dd>

</dl>

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.0448418561778!2d139.74267721573196!3d35.675897837870934!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188b89b2e1c8b1%3A0x59a123e3d5ac5ab6!2z44CSMTAwLTAwMTQg5p2x5Lqs6YO95Y2D5Luj55Sw5Yy65rC455Sw55S677yR5LiB55uu77yX4oiS77yR!5e0!3m2!1sja!2sjp!4v1545036128899" frameborder="0" style="border:0" allowfullscreen></iframe>

<h3><img src="images/forrow_us.png" alt="Follow Us"></h3>
<ul class="icons">
<li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-line"></i></a></li>
<li><a href="#"><i class="fab fa-youtube"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>

</div>
<!--/.shop-data-->

</div>
</section>

主なスタイルは

cssフォルダのstyle.cssから「/*店舗情報」でテキスト検索してみて下さい。詳しい解説もあります。

大きな端末で見た場合に見える両サイドの大きな画像について

「images/bg_shop.jpg」です。お好みで入れ替えて下さい。サイズは自由で構いませんが端末サイズで配置バランスがかわるのでおかしくないような写真を選んで下さい。

お知らせブロック

お知らせのレイアウトは共通のスタイル「.table」になっています。その下の店舗情報の所在地などのレイアウトと共通して使っています。変更する場合はstyle.cssからこの「.table」で検索して下さい。店舗情報の方だけボーダー色を変更するために上書きしています。

店舗情報の背景画像について

「images/bg_shop_data.jpg」です。必要時応じて入れ替えて下さい。画像は暗めにしておかないと文字がみづらいのでそこだけ注意しましょう。

h2見出しテキストについて

<span class="hosoku">で囲めば英語表記のような小さな文字になります。
<span class="fade-in-text">で囲めば以下のようなアニメーションテキストになります。

アニメーションテキスト

この「<span class="fade-in-text">」は他の部分にも使えますが、相性が悪いとおかしな動きになるので、おかしくならない所にだけ使うようにして下さい。

Google Mapについて

ご自身のマップに置き換えたい場合はこちらのマニュアルをご覧下さい。
上記ページでうまくいかない場合は、Google検索をかければいくらでも最新の情報が出てきます。

Follow Us!のブロック

SNSアイコンはFont Awesomeを使用しています。

Font Awesome 公式サイト
Font Awesome アイコン一覧(※バージョン6無料版)

iタグを使ってhtmlに直接アイコンを読み込む場合と、cssの擬似要素を使って読み込む場合があります。
それぞれ他のアイコンに置き換えたい場合は、当サイトのマニュアルをお読み下さい。

Font Awesomeを使う為に必要なタグ、ファイル類。

cssフォルダのstyle.css冒頭で読み込んでいる「Font Awesomeの読み込み」のブロック。

何年も経過した場合、動作に問題が出てくる可能性があります。

テンプレートを編集していないのに突然動きがおかしくなった場合は、style.cssの冒頭でCDNから読み込んでいるFont Awesome関連のファイルのバージョンを変更して動作するか確認してみて下さい。