カテゴリ分けやタグ付けも可能でショートコードで簡単表示できる「FAQ manager」のデザインをCSSでカスタマイズ！

2015.05.21 こちらのFAQ Managerプラグインの更新が止まっているので代替プラグインを紹介します！
Flexible FAQ について

以前ご紹介したWordPressにカスタム投稿形式でFAQを追加できるプラグイン「FAQ manager」のCSS追加について、お問合せを頂きました！

お問合せありがとうございます！

せっかくなので、FAQ managerにCSSを追加してデザインをカスタマイズする方法をシェアしたいと思います。

基本となる設定は、過去の記事を参照してください。
＞FAQを設置するならコレ！カテゴリ分けやタグ付けも可能でショートコードで簡単表示！FAQ manager！

ショートコードで出力されるHTML

まず、ショートコードが実際どんなHTMLを吐き出しているのかを知ることが必要です。
こちらは、FAQのページを開発者ツールで解析したものです。

コードを抜粋します。↓

<div id="faq-block">
  <div class="faq-list" data-speed="200">
    <div class="single-faq expand-faq">
      <h3 id="create01" class="faq-question expand-title">可能な作業にはどんなものがありますか？</h3>
      <div class="faq-answer" rel="create01" style="display: block;">
      静的HTML、LPデザインの制作はもちろん、・・・・可能です。
      </div>
    </div>
  </div>
</div>

注意！
４行目タイトル部分の

id="create01"

というのは、FAQmanagerで記事を追加したときのスラッグです。
スラッグが日本語のままだとIDにも日本語が来て、変換されるので注意しましょう。

id="%e3%83%86%e3%82%b9%e3%83%88"

のようにめちゃくちゃなID名になってしまいます。

記事タイトル部分にCSSを追加する

<h3 id="create01" class="faq-question expand-title">FAQ記事タイトル<h3>

となるので、

.faq-question {
  /* タイトル用のスタイル */
}
.faq-question:hover {
  /* タイトルにマウスが乗った時のスタイル */
}

といったCSSをstyle.css等に追加することで、タイトル部分のCSSを変更し、デザインをカスタマイズできます。
※h3になっている部分は、FAQmanagerの設定でh1～h6に任意で変更できます。

記事本文部分にCSSを追加する

<div class="faq-answer" rel="create01" style="display: block;">
  FAQ記事本文
</div>

となるので、

.faq-answer {
  /* 本文用のスタイル */
}

といったCSSをstyle.css等に追加することで、本文部分のCSSを変更し、デザインをカスタマイズできます。

まとめ

FAQ記事スラッグは半角英数に変更しましょう！

というのが注意点でしょうか。

あとは、カテゴリー（FAQ Topics）毎でデザインを変えたいと言うケースもあるでしょうね。
残念ながらドキュメンテーションを見ても、IDやclassにカテゴリが表示されるわけでは無いようなので（あったら教えて下さい！）、ショートコードを任意のclassのdivで囲むといいかもしれませんね。

以上、FAQmanagerのCSSデザインカスタマイズについてでした！