【WordPress】FAQブロックのサンプル

FAQブロックは質問・回答を表記をするブロックのことを言います。

今回、２つのFAQブロックを作成しました。それぞれ、HTMLコードとCSSコードがあります。

サンプル①

まずはこちらです。QとAの文字に丸が付いたFAQブロックです。

実際の表示

質問を書く場所

回答を書く場所

HTMLコード

  <dl class="faq_blocka">
    <dt>質問を書く場所</dt>
    <dd>回答を書く場所</dd>
  </dl>

CSSコード

dl.faq_blocka {
    padding: 0.5em 1.5em 0.5em 0.5em;
}

dl.faq_blocka dt {
    position: relative;
    font-weight: bold;
    padding: 0.5em 0em 1em 1em;
    left:4em;
}

dl.faq_blocka dd {
    position: relative;
    margin-left: 0em;
    padding: 0.5em 0em 1em 1em;
    left:4em;
}

.faq_blocka dt::before {
    position: absolute;
    left:-2em; 
    font-weight: bold;
    content: 'Q';
    color: #FFF;
    background-color: #fb5ab8;
    border-radius: 50%;
    padding: 0.1em 0.5em;
}

contentはQやAの文字の表記になります。colorは文字の色になります。background-colorは文字の背景の丸い円の色になりいます。お好みの色に変えてみるといいと思います。

サンプル②

これは先ほどのシンプルバージョンです。

実際の表示

質問を書く場所

回答を書く場所

HTMLコード

  <dl class="faq_blockb">
    <dt>質問を書く場所</dt>
    <dd>回答を書く場所</dd>
  </dl>

CSSコード

dl.faq_blockb {
    padding: 0.5em 1.5em 0.5em 0.5em;
}

dl.faq_blockb dt{
    position: relative;
    left:4em;
    font-weight: bold;
    padding: 0.5em 0em 1em 1em;
}

dl.faq_blockb dd {
    position: relative;
    left:4em;
    margin-left: 0em;
    padding: 0.5em 0em 1em 1em;
}

.faq_blockb dt::before {
    position: absolute;
    left:-1em; 
    font-weight: bold;
    content: 'Q';
    color: #fb5ab8;
}

.faq_blockb dd::before {
    position: absolute;
    left:-1em; 
    font-weight: bold;
    content: 'A';
    color: #23c8ff;
}

応用的な使い方

WordPressのテーマCocoonには白抜きというブロックがあります。他のテーマでもあるかもしれませんが、このような白抜きブロックを使うと下記のようにFAQブロックが囲われた形になります。囲みを入れると、よりFAQブロックが目立ちますよね。

これは白抜きブロックの中にHTMLコードブロックを挿入する形で実現できます。

おわりに

いかがだったでしょうか。

WordPressのCocoonを使っている方は、開発者のわいひらさんに寄付をすると、特典機能としてFAQブロックが付いてきます。特典機能のFAQブロックでは、Googleの検索結果でFAQとして出力されますので、CSSなどを編集するのが面倒であれば、Cocoonの特典機能をおススメします。詳しくは、公式サイトをご覧ください。