メニュー
メニューのレイアウトについての章です。
コンテンツの包括的なラッピング（1）
<body>にid「home」を追加してください。
<body id="home">
</body>
コンテンツの包括的なラッピング（2）
<body>タグ直下に下記を参考に記述してください。
<body id="home">
<!-- テンプレートが入ります -->
<div id="body_inner01" class="d-flex flex-column position-relative">
<div id="body_inner02">
<div class="body_inner02_inner01">
<main>
<section class="t-container">
</section>
</main>
</div><!-- /.body_inner02_inner01 -->
</div><!-- /#body_inner02 -->
</div><!-- /#body_inner01 -->
<!-- テンプレートが入ります -->
</body>
コンテンツエリア毎のラッピング
各コンテンツエリアは下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、jquery.tile.min.js、home.js：カルーセルについては別途記述）
登録内容変更
- 保険契約者を変更された場合、必要に応じてメールアドレス・パスワードを変更してください。
お問合わせ
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-user-info">
<div class="t-home-user-name">
<span class="t-home-user-name-first">恵比寿</span>
<span class="t-home-user-name-last">太郎</span>
</div><!-- /.t-home-user-name -->
<div class="t-home-user-footer">
<span class="t-home-user-policynumber">A123456789</span>
<span class="t-home-user-car">Vitz</span>
</div><!-- /.t-home-user-footer -->
</div><!-- /.t-home-user-info -->
<div class="t-home-info">
<div class="t-home-info-block">
<h2 class="t-home-info-title">お知らせ</h2>
<ul class="t-home-info-list">
<li class="t-home-info-list-item">
<a href="./information/">
<span class="t-home-info-time">2020年12月31日</span>
<div class="t-home-info-entry">XXXXXXXXXXXXXのお知らせ</div>
</a>
</li>
<li class="t-home-info-list-item">
<a href="./information/">
<span class="t-home-info-time">2020年12月31日</span>
<div class="t-home-info-entry">長いタイトル長いタイトル長いタイトル長いタイトル</div>
</a>
</li>
</ul>
<div class="t-home-info-footer">
<a href="./information/" class="t-home-info-button">一覧を見る</a>
</div><!-- /.t-home-info-footer -->
</div><!-- /.t-home-info-block -->
</div><!-- /.t-home-info -->
</section>
<section class="t-container">
<div class="t-home-menu-block-fix">
<div class="t-home-menu menu01">
<a href="drive/" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico02.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img02.png" alt="Drive Report" class="image_fix02"></div>
<div class="t-home-menu-title">ドライブレポート</div>
</div>
<div class="t-home-menu-description">運転ごとの<br>安全運転診断結果</div>
</a>
<a href="monthly/" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico01.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img01.png" alt="Monthly Report" class="image_fix01"></div>
<div class="t-home-menu-title">マンスリーレポート</div>
</div>
<div class="t-home-menu-description">1か月ごとの<br>安全運転診断結果</div>
</a>
<a href="" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico03.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img05.png" alt="Brain Training" class="image_fix03"></div>
<div class="t-home-menu-title">いきいき脳体操</div>
</div>
<div class="t-home-menu-description">運転技能向上<br>トレーニング</div>
</a>
<a href="" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico04.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img06.png" alt="Point" class="image_fix04"></div>
<div class="t-home-menu-title">ADテレマイレージ</div>
</div>
<div class="t-home-menu-description">安全運転で<br>ポイントを貯める</div>
</a>
</div><!-- /.t-home-menu -->
<p class="t-home-link">
<a href="" class="t-home-link-icon">「川島隆太教授のいきいき脳体操」とは</a>
</p>
</div><!-- /.t-home-menu-block-fix -->
<div class="t-carousel-fix">
<div class="t-carousel">
<a href="https://www.aioinissaydowa.co.jp/corporate/about/24h365d/" class="t-carousel-item">
<img src="images/home/bnr01.jpg" alt="夜間休日も、示談交渉まで。I'm ZIDAN">
</a>
<a href="javascript: void(0);" class="t-carousel-item">
<img src="images/home/bnr04.jpg" alt="今月の「安全運転のポイント」">
</a>
<a href="javascript: void(0);" class="t-carousel-item">
<img src="images/home/bnr05.jpg" alt="リアルタイム被害予測ウェブサイト cmap">
</a>
</div> <!-- /.t-carousel -->
</div><!-- /.t-carousel-fix -->
<div class="t-home-edit-block-fix">
<h3 class="title_fix01">登録内容変更</h3>
<div class="t-home-edit menu02">
<a href="" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img01.png" alt="メールアドレス変更" class="image_fix01"></div>
</div>
</a>
<a href="" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img02.png" alt="パスワード変更" class="image_fix02"></div>
</div>
</a>
<a href="setting/" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img03.png" alt="各種設定" class="image_fix03"></div>
</div>
</a>
<div class="t-home-edit-item-text">
<ul class="t-annotation">
<li class="t-annotation-item">保険契約者を変更された場合、必要に応じてメールアドレス・パスワードを変更してください。</li>
</ul>
</div>
</div><!-- /.t-home-edit -->
</div><!-- /.t-home-edit-block-fix -->
<div class="t-home-contact-block-fix">
<h3 class="title_fix01">お問合わせ</h3>
<div class="t-home-contact menu02">
<a href="./faq/" class="t-home-contact-item">
<div class="t-home-contact-text">
<div class="t-home-contact-image"><img src="images/home/menu02_img05.png" alt="よくあるご質問" class="image_fix05"></div>
</div>
</a>
<a href="contact/" class="t-home-contact-item">
<div class="t-home-contact-text">
<div class="t-home-contact-image"><img src="images/home/menu02_img04.png" alt="お問合わせ先" class="image_fix04"></div>
</div>
</a>
</div><!-- /.t-home-contact -->
</div><!-- /.t-home-contact-block-fix -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>
ドライブレポート・マンスリーレポートの非活性化
ドライブレポート・マンスリーレポートの非活性化をする際は、下記を参考に「aタグ」を「divタグ」に変更してください。
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-menu-block-fix">
<div class="t-home-menu menu01">
<div class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico02.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img02.png" alt="Drive Report" class="image_fix02"></div>
<div class="t-home-menu-title">ドライブレポート</div>
</div>
<div class="t-home-menu-description">運転ごとの<br>安全運転診断結果</div>
</div>
<div class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico01.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img01.png" alt="Monthly Report" class="image_fix01"></div>
<div class="t-home-menu-title">マンスリーレポート</div>
</div>
<div class="t-home-menu-description">1か月ごとの<br>安全運転診断結果</div>
</div>
<a href="" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico03.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img05.png" alt="Brain Training" class="image_fix03"></div>
<div class="t-home-menu-title">いきいき脳体操</div>
</div>
<div class="t-home-menu-description">運転技能向上<br>トレーニング</div>
</a>
<a href="" class="t-home-menu-item">
<div class="t-home-menu-icon"><img src="images/home/menu01_ico04.png" alt=""></div>
<div class="t-home-menu-text">
<div class="t-home-menu-image"><img src="images/home/menu01_img06.png" alt="Point" class="image_fix04"></div>
<div class="t-home-menu-title">ADテレマイレージ</div>
</div>
<div class="t-home-menu-description">安全運転で<br>ポイントを貯める</div>
</a>
<!-- /.t-home-menu --></div>
<p class="t-home-link">
<a href="" class="t-home-link-icon">「川島隆太教授のいきいき脳体操」とは</a>
</p>
</div><!-- /.t-home-menu-block-fix -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>
カルーセル
カルーセルは「t-container」クラス内の「t-carousel」クラス内に下記を参考に記述してください。
（※関連ファイル：jquery-3.4.1.min.js、slick.min.js、home.js、slick.css、slick-theme.css）
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-carousel-fix">
<div class="t-carousel">
<a href="https://www.aioinissaydowa.co.jp/corporate/about/24h365d/" class="t-carousel-item">
<img src="images/home/bnr01.jpg" alt="夜間休日も、示談交渉まで。I'm ZIDAN">
</a>
<a href="javascript: void(0);" class="t-carousel-item">
<img src="images/home/bnr04.jpg" alt="今月の「安全運転のポイント」">
</a>
<a href="javascript: void(0);" class="t-carousel-item">
<img src="images/home/bnr05.jpg" alt="リアルタイム被害予測ウェブサイト cmap">
</a>
</div><!-- /.t-carousel -->
</div><!-- /.t-carousel-fix -->
</section>
</main>
<!-- テンプレートが入ります -->
</body>
登録内容変更・お問合わせ
登録内容変更・お問合わせは「t-container」クラス内の「t-home-edit-block-fix」クラス内に下記を参考に記述してください。
登録内容変更
- 保険契約者を変更された場合、必要に応じてメールアドレス・パスワードを変更してください。
お問合わせ
<body id="home">
<!-- テンプレートが入ります -->
<main>
<section class="t-container">
<div class="t-home-edit-block-fix">
<h3 class="title_fix01">登録内容変更</h3>
<div class="t-home-edit menu02">
<a href="" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img01.png" alt="メールアドレス変更" class="image_fix01"></div>
</div>
</a>
<a href="" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img02.png" alt="パスワード変更" class="image_fix02"></div>
</div>
</a>
<a href="setting/" class="t-home-edit-item">
<div class="t-home-edit-text">
<div class="t-home-edit-image"><img src="images/home/menu02_img03.png" alt="各種設定" class="image_fix03"></div>
</div>
</a>
<div class="t-home-edit-item-text">
<ul class="t-annotation">
<li class="t-annotation-item">保険契約者を変更された場合、必要に応じてメールアドレス・パスワードを変更してください。</li>
</ul>
</div>
</div><!-- /.t-home-edit -->
</div><!-- /.t-home-edit-block-fix -->
<div class="t-home-contact-block-fix">
<h3 class="title_fix01">お問合わせ</h3>
<div class="t-home-contact menu02">
<a href="./faq/" class="t-home-contact-item">
<div class="t-home-contact-text">
<div class="t-home-contact-image"><img src="images/home/menu02_img05.png" alt="よくあるご質問" class="image_fix05"></div>
</div>
</a>
<a href="contact/" class="t-home-contact-item">
<div class="t-home-contact-text">
<div class="t-home-contact-image"><img src="images/home/menu02_img04.png" alt="お問合わせ先" class="image_fix04"></div>
</div>
</a>
<!-- /.t-home-contact --></div>
<!-- /.t-home-contact-block-fix --></div>
</section>
</main>
<!-- テンプレートが入ります -->
</body>