5つのカテゴリーに分けて表示した例

このショートコード

[faq
cat1='購入前,cat1'
cat2='ダウンロード関係,cat2'
cat3='インストール関係,cat3'
cat4='サポート関係,cat4'
cat5='ライセンス関係,cat5']

[faqitem
title='支払い方法の種類は何がありますか？'
cat=cat1]
商品代金のお支払いは、オンラインでのお申込みのみとなっております。
対応可能なお支払い方法は、以下のとおりです。
<p class="label">支払い方法</p>
<ul>
<li>クレジットカード決済</li>
<li>コンビニ後払い</li>
<li>銀行振込</li>
</ul>
[/faqitem]

[faqitem
title="購入前に操作感を確かめたいです。体験版を提供してもらうことはできますか？"
cat=cat1]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="購入した商品を自社のサービスとして商用利用することはできますか？"
cat=cat1]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="購入した商品はどこからダウンロードできますか？"
cat=cat2]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="最新版をダウンロードするにはどこから行えますか？"
cat=cat2]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="商品のダウンロード可能な期間はありますか？"
cat=cat2]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="インストール方法がわかりません。手順をおしえてください。"
cat=cat3]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="インストールしようとしたところ、「Error 500: XXXXXXXXX」というエラーが発生してインストールできません。"
cat=cat3]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="商品のサポートに期限はありますか？どこからお問い合わせできますか？"
cat=cat4]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="有償サポートを依頼するにはどこからお問い合わせすればよいですか？"
cat=cat4]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="ライセンスはどのような単位で必要になるものですか？"
cat=cat5]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="新たにライセンスが必要になった場合は、追加で購入できますか？"
cat=cat5]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[/faq]

様々なオプションを指定して表示した例

このショートコード

[faq
cat1='購入前,before-buy'
cat2='ダウンロード関係,download'
cat3='インストール関係,install'
cat4='サポート関係,support'
cat5='ライセンス関係,license'
catcolor=#fff
catbgcolor='rgba(43,43,43,.8)']

[faqitem
title='支払い方法の種類は何がありますか？'
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=before-buy]
商品代金のお支払いは、オンラインでのお申込みのみとなっております。
対応可能なお支払い方法は、以下のとおりです。
<p class="label">支払い方法</p>
<ul>
<li>クレジットカード決済</li>
<li>コンビニ後払い</li>
<li>銀行振込</li>
</ul>
[/faqitem]

[faqitem
title="購入前に操作感を確かめたいです。体験版を提供してもらうことはできますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=before-buy]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="購入した商品を自社のサービスとして商用利用することはできますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=before-buy]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="購入した商品はどこからダウンロードできますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=download]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="最新版をダウンロードするにはどこから行えますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=download]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="商品のダウンロード可能な期間はありますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=download]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="インストール方法がわかりません。手順をおしえてください。"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=install]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="インストールしようとしたところ、「Error 500: XXXXXXXXX」というエラーが発生してインストールできません。"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=install]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="商品のサポートに期限はありますか？どこからお問い合わせできますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=support]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="有償サポートを依頼するにはどこからお問い合わせすればよいですか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=support]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="ライセンスはどのような単位で必要になるものですか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=license]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[faqitem
title="新たにライセンスが必要になった場合は、追加で購入できますか？"
titlesize=18
titlecolor=#1c96ce
titlebgcolor='#daeaf2'
fontsize=13
fontcolor=#fff
bgcolor='rgba(28,150,205,.8)'
cat=license]
グラバターとはグローバルに認識されるアバター（あるユーザーを表すグラフィックイメージや写真）です。グラバターはメールアドレスと紐づいていて、Gravatar.com サービスによって管理されています。このサービスを利用すると、ブログ所有者は自分のブログを設定することによりコメント欄にユーザーのグラバターを表示させることができます。
[/faqitem]

[/faq]

スマートフォン(レスポンシブ)表示例