フロントサイト パーツ一覧

上記デモサイトの以下パーツをセットにしています。

• ヘッダー
• フッター
• お問い合わせ誘導
• スライドショー
  • スライドショーにはパーツに加え外部jsの追記が必要となります。詳しくはこちら
• 会社概要中ページ
• プライバシーポリシー中ページ

「レイアウト管理」の各項目にそれぞれ以下の通り1カラム用、2カラム用のレイアウトを作成することで、
「theme-default」テーマの各カラム用のレイアウトを作成できます。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ title }{ | }}サイト名</title>
<meta name="description" content="{{ description }} 固定ディスクリプション">
<meta name="keywords" content="{{ keyword }}固定キーワード,固定キーワード">

<meta property="og:url" content="{%var:og:url%}" />
<meta property="og:type" content="{%var:og:type%}" />
<meta property="og:title" content="{%var:og:title%}" />
<meta property="og:description" content="{%var:og:description%}" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:image" content="{%var:og:image%}" />

<!-- /* CSS */-->
<link rel="stylesheet" href="https://common.assets.gear-s.app/files/isfw_assets/css/isfw_v1.2.css">
<!-- /* theme */-->
<link rel="stylesheet" href="https://common.assets.gear-s.app/files/theme/v1.2/theme-default/assets/css/style.css">

<div class="isfw_mainpanel webapp-layout-root">
  <header id="isfw_page_top" class="isfw_header webapp-layout-header"></header>
  <div class="isfw_master webapp-layout-master">
    <div class="isfw_pagebody webapp-layout-pagebody">
        <div class="webapp-layout-maincontent"></div>
    </div>
  </div>
  <footer class="isfw_footer webapp-layout-footer"></footer>
</div>

<div class="isfw_mainpanel webapp-layout-root">
    <header id="isfw_page_top" class="isfw_header webapp-layout-header"></header>
    <div class="isfw_master webapp-layout-master">
      <div class="isfw_pagebody webapp-layout-pagebody">
          <div class="isfw_title webapp-layout-title"></div>
          <div class="row mg webapp-layout-container">
            <div class="col-1 webapp-layout-sidecontent webapp-grid-3"></div>
            <div class="col-3 webapp-layout-maincontent webapp-grid-9"></div>
          </div>
      </div>
    </div>
    <footer class="isfw_footer webapp-layout-footer"></footer>
  </div>

  <div class="isfw_mainpanel webapp-layout-root">
    <header id="isfw_page_top" class="isfw_header webapp-layout-header"></header>
    <div class="isfw_master webapp-layout-master">
      <div class="isfw_pagebody webapp-layout-pagebody">
          <div class="isfw_title webapp-layout-title"></div>
          <div class="row mg webapp-layout-container">
            <div class="col-3 webapp-layout-maincontent webapp-grid-9"></div>
            <div class="col-1 webapp-layout-sidecontent webapp-grid-3"></div>
          </div>
      </div>
    </div>
    <footer class="isfw_footer webapp-layout-footer"></footer>
  </div>

<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/jquery.min.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/theme/v1.2/theme-default/assets/js/libs.js"></script>
<!-- vendor js-->
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/lib/popper.js/popper.js"></script>
<script type="text/javascript" src="https://common.assets.gear-s.app/files/isfw_assets/lib/bootstrap/bootstrap.min.js"></script>
<!-- faq js-->
<script type="text/javascript" src="https://common.assets.gear-s.app/files/theme/v1.2/theme-default/assets/js/libs_faq.js"></script>

はじめに以下のform用のjsをformを使用するページ内（レイアウト管理など）に挿入

<script src="https://common.assets.gear-s.app/files/isfw_assets/js/main.js" type="text/javascript"></script>

1. 「FORM用フォームパーツ」をダウンロード・インポート
2. フォームの一覧（URL）を表示するためのページをCMSで作成し、インポートした「FORM_一覧_v1.3」のパーツを使用、JS内の契約ID部分をFORMのものに変更
3. フォーム本体を表示するページをCMSで作成し、インポートした「FORM_詳細_v1.3」のパーツを使用、JS内の契約ID部分をFORMのものに変更
4. 「2.」の「フォームの一覧」ページにアクセスし、フォームのURLを取得する
5. 「4.」で取得したURLを使用してフォームにアクセスする
   ※「フォームの一覧」ページはURLを取得するためだけのページのため、URL確認後は非公開にしていただいて問題ありません

パーツ一式をダウンロードし、GEAR-Sサポートサイトの「サイト作成チュートリアルのCONTENTS 店舗紹介作成編」をご参照ください。