誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ！」の4回目。よくある質問編です。
※こちらクラシックエディタ向けの記事になります。
1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」はこちら。
「よくある質問」ページはサービスサイトとかショッピングサイトではけっこう需要があるんですよね。
Cocoonは超簡単に開閉式のFAQページを作る事が出来るのです。
今回はCocoonのトグルボックス機能を使ってよくある質問ページを作ろうと思います。
「よくある質問」ページって？
「Frequently Asked Questions」の略で「FAQ」などとも表記されます。
定義つきリストで書いたりテーブルで書いたり、書き方はサイトの雰囲気やボリュームによっていろいろあるかと思います。
こちらは東京ガスのよくある質問。
タイトルが一覧になっていて、クリックで詳細ページにジャンプ。
Ｘサーバのよくある質問。
開閉式のものです。
日本科学未来館のよくある質問。
見出しと内容が並んでいるシンプルなもの。
いろいろな書き方・見せ方がありますね。
見やすく整理されていて内容が充実していれば問題ないかなと思います。
さて、今回はCocoonの機能を使って作っていきたいと思います。
FAQにはCocoonの「トグルボックス」が便利
Cocoonには開閉式のボックスがすぐに作れる機能があります。
「ビジュアルエディタ」の「タグ」のプルダウンから「トグルボックス」を選択。
「トグルボックス見出し」が表示されたら「テキストエディタ」に移動。
「トグルボックス見出し」と「トグルボックス内容」にそれぞれ中身を入れたらOK。
超簡単。
これで見出し部分をクリックすると内容部分が表示される、開閉式の「よくある質問」が完成です。
FAQにはCocoonの「トグルボックス見出し」を左揃えにする
個人的な好みですが見出しが左揃えの方がより見やすいかなと思います。
のでCSSに下記を追加。
.toggle-button { text-align: left; }
これで見出しが左揃えになります。
「よくある質問」ページの完成
質問項目が増えたらカテゴリ毎に分けた方が見やすいですね。
Cocoonはほんとうにかゆい所に手が届くテーマです。何度も言いますがすごい。
ひととおりできあがったサンプルサイト公開しています。（広告出ますが…）
スクロールアニメーションについてはコチラの記事で書いてます。
コメント