- ここに質問を書きます。クリックで回答が開きます。
- ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
- ここに質問を書きます。クリックで回答が開きます。
- ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。
<!--▼▼▼▼▼ここから「よく頂く質問」--> <section class="bg-primary-color" id="faq"> <div class="c2"> <div class="title"> <h2>よく頂く質問<span>FAQ</span></h2> </div> <!--/.title--> <div class="text"> <dl class="faq"> <dt class="openclose">ここに質問を書きます。クリックで回答が開きます。</dt> <dd>ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。</dd> <dt class="openclose">ここに質問を書きます。クリックで回答が開きます。</dt> <dd>ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。ここに回答を書きます。サンプルテキスト。</dd> </dl> </div> <!--/.text--> </div> <!--/.c2--> <div class="r"><p class="btn1"><a href="#" class="inline-block">もっと見る</a></p></div> </section> <!--▲▲▲▲▲ここまで「よく頂く質問」-->
cssフォルダのstyle.cssから「faq」でテキスト検索してみて下さい。詳しい解説もあります。
bg-primary-colorはテンプレートごとのテーマカラーを背景色にしたタイプです。
cssフォルダのstyle.cssから「bg-primary-color」でテキスト検索してみて下さい。詳しい解説もあります。
idはメニューのリンク先の目印です。
メニュー側は、
<a href="#faq">よく頂く質問</a>
になっています。
トップページ以外からトップページに戻るリンクだと、別ページへのリンクになるので
<a href="index.html#faq">よく頂く質問</a>
と書きます。
左右の2カラムになったボックスの汎用的な雛形です。
この中に、
<div class="title">
と、
<div class="text">
をセットして使います。「会社概要」や「お知らせ」のブロックでもこのセットを利用しています。
<div class="title">
は、左側のタイトル向けブロックです。
<div class="text">
は右側の本文向けブロックです。
style.cssから「.c2」でテキスト検索すると設定箇所が出てきます。
class="openclose"がつくとその直後の要素が折りたたまれ、opencloseボックスをクリックすることで開閉するようになります。
opencloseがない場合は、以下のように最初から開いた状態になります。
アイコンはFont Awesomeを使用しています。アイコンを変更したい場合はmanual.htmlをお読み下さい。
style.cssの
.faq dt::before {
のcontentの行でアイコンを指定します。