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

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


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

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

icons-faq

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

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

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

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

faq_manager2-01

コードを抜粋します。↓

<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>

注意!
4行目タイトル部分の

id="create01"

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

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

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

faq_manager2-02

記事タイトル部分に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デザインカスタマイズについてでした!

コメントをどうぞ

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • 具体的なエラー画面などがある場合は添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)