cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

Cocoonをコーポレートサイトっぽくカスタマイズ!④よくある質問編

Cocoonをコーポレートサイトっぽくカスタマイズ WORDPRESS
スポンサーリンク

誰得コンテンツ、「Cocoonをコーポレートサイトっぽくカスタマイズ!」の4回目。よくある質問編です。

1回目「トップページ編」、2回目「メニュー編」、3回目「料金表編」はこちら。

 

 

「よくある質問」ページはサービスサイトとかショッピングサイトではけっこう需要があるんですよね。

Cocoonは超簡単に開閉式のFAQページを作る事が出来るのです。
今回はCocoonのトグルボックス機能を使ってよくある質問ページを作ろうと思います。

Cocoonで作るよくある質問ページ

 

「よくある質問」ページって?

「Frequently Asked Questions」の略で「FAQ」などとも表記されます。
定義つきリストで書いたりテーブルで書いたり、書き方はサイトの雰囲気やボリュームによっていろいろあるかと思います。

 

よくある質問の例
こちらは東京ガスのよくある質問
タイトルが一覧になっていて、クリックで詳細ページにジャンプ。

 

よくある質問の例
Xサーバのよくある質問
開閉式のものです。

 

よくある質問の例
日本科学未来館のよくある質問
見出しと内容が並んでいるシンプルなもの。

 

いろいろな書き方・見せ方がありますね。
見やすく整理されていて内容が充実していれば問題ないかなと思います。

さて、今回はCocoonの機能を使って作っていきたいと思います。

 

FAQにはCocoonの「トグルボックス」が便利

Cocoonには開閉式のボックスがすぐに作れる機能があります。

「ビジュアルエディタ」の「タグ」のプルダウンから「トグルボックス」を選択。

cocoonのトグルボックス

「トグルボックス見出し」が表示されたら「テキストエディタ」に移動。
cocoonのトグルボックス


「トグルボックス見出し」と「トグルボックス内容」にそれぞれ中身を入れたらOK。
超簡単。

これで見出し部分をクリックすると内容部分が表示される、開閉式の「よくある質問」が完成です。

Cocoonで作るよくある質問ページ

 

FAQにはCocoonの「トグルボックス見出し」を左揃えにする

個人的な好みですが見出しが左揃えの方がより見やすいかなと思います。
のでCSSに下記を追加。

.toggle-button { text-align: left; }

これで見出しが左揃えになります。

cocoonのトグルボックス

「よくある質問」ページの完成

質問項目が増えたらカテゴリ毎に分けた方が見やすいですね。
Cocoonはほんとうにかゆい所に手が届くテーマです。何度も言いますがすごい。

ひととおりできあがったサンプルサイト公開しています。(広告出ますが…)

コメント

タイトルとURLをコピーしました