スマートQ&A:質問クリックで回答スライドダウン

ユーザーがよくある質問とそれに対する回答がセットになったQ&Aページは、ポームページでは業種を超えてよく見かけます。Q&Aページは、ユーザーからのさまざまな疑問をしっかり網羅し、きちんと回答することが好ましいわけですが、そうすると、かなりのスペースを費やしてしまいます。初期状態では質問リストだけ、ユーザーが関心のある質問をクリックするとその回答が開くようになっていると便利です。

スマートQ&Aとは

初期状態では質問リストだけを表示し、ユーザーは質問をクリックすると、スライドダウンして隠れていた回答が現われる -- これがスマートQ&Aです。質問から回答へリンクを飛ばしているのではないので、質問リストへ戻りやすく、スペースをコンパクトにまとめることができます。
スマートQ&Aは、既存のページにも 無料 で導入することができます。

スマートQ&Aのサンプル

よくあるご質問

Q1. 回答は文章だけでなく、画像や動画の場合もあるのですが、その場合もスマートQ&Aは対応しますか?
A1. はい。画像でも、動画でも、初期状態では隠しておき、ユーザーが質問をクリックしたときのみ表示できます。
Q2. 初期状態では回答欄が見えないのでは、SEO は不利ではないですか?
A2. いいえ、回答欄が見えたり見えなかったりするのは人に対してだけで、検索ロボットには常に表示されているので、回答欄の文言も検索対象になります。「スマートQ&A」がSEOに不利ということはありません。
Q3. このサンプルでは、1度開いた回答が、別の質問をクリックすると、閉じてしまうのですが、開けたままにしておくことはできなのですか?
A3. はい、できます。最初に、1度開いた回答を閉じるか、開けたままにしておくか設定することができます。なお、回答を開けたままにしておく設定をした場合でも、質問をもう一度クリックすれば、閉じます。
Q4. スマートQ&Aを導入するのはどうすればいいのですか?
A4. 本ページ下のダウンロードボタンをクリックすると、スマートQ&Aのプログラムとデザインファイルを無料で入手できます。それらのファイルと jQuery.js の3つをスマートQ&Aを使いたいページから呼び出せるようにリンクを張ります。その上で、Q&AページをスマートQ&A用に加工します。
Q5. Q&Aページの加工するのはむずかしいのですか?
A5. いいえ、HTMLの初歩的なスキルがあれば、簡単に加工できます。詳しくは、スマートQ&Aの設定設置方法 をご覧ください。
Q6. 順番を入れ替えたり、質問回答を挿入したりできますか?
A6. はい、できます。入れ替したい質問回答部分を切り取り、貼りつけしてください。新規に挿入したいときは、挿入したい箇所に<dt> タグ付きの質問と<dd> タグ付きの回答を挿入すればOKです。
Q7. 1ページのうちに、いくつもQ&Aのセクションがあり、その間に普通の文章や画像があるのですが、そのすべてのQ&AにスマートQ&Aを挿入することはできますか?
A7. はい、できます。やり方はすべて同じです。

スマートQ&A のメリット

  • 既存のページにも、これから作るページにも対応できる。
  • 回答欄に画像や動画があってもOK。
  • 質問/回答の件数に関係なく、何件でも対応できる。
  • 別々のブロックにある質問/回答にも対応できる。
  • 質問/回答ページの修正、削除、挿入・追加が簡単にできる。
  • 一度開いた回答を閉じるタイプと開けたままにしておくタイプの2種類を選べる。

スマートQ&Aの設定設置方法

スマートQ&A は、jquery 3.2.1 に準拠して書かれています。よって、jQuery を読む込むことが前提です。
jQuery の読み込み方は、お使いの環境によって違うので詳細は省きます。

スマートQ&A のフォルダとファイルの構成

smart-qaフォルダ
|-jquery.smart-qa.js
|-smart-qa.css

smart-qa フォルダと中の2つのファイルの内容はまったく変える必要はありません。

html に設定する場合

  1. 作業をする前に、スマートQ&Aを設定したい html のバックアップを取っておきます。
  2. 1と同じ階層に、smart-qa フォルダを FTP でアップロードします。
  3. html の </head> の直前に、css ファイルを読み込むためのリンクを書きます。

    例)
    <link href="smart-qa/smart-qa.css" type="text/css" rel="stylesheet" />
    </head>

  4. 質問と回答のブロック全体を <dl> タグで囲み、クラス属性 smart-qa を設定します。
    一度開いた回答を開いたままにする場合は、クラス属性 open を追加します。一度開いた回答を閉じる場合は、設定不要。
  5. 質問文を <dt> タグで囲みます。
  6. 回答文(回答箇所)を <dd> タグで囲みます。
  7. 例)
    <dl class="smart-qa">
    <dt>質問文</dt>
    <dd>回答文(回答部分)</dd>
    </dl>

  8. さらに </body> の直前に、jQuery と js ファイルへのリンクを書きます。

    例)
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="smart-qa/jquery.smart-qa.js" type="text/javascript"></script>
    </body>

  9. テストして意図通りになっていれば OK です。
  10. 意図通りになっていない場合は、html 内のパスを確認してください。

なお、複数ページにスマートQ&Aを設定する場合は、上位の階層に smart-qa フォルダをアップロードし、各 html から css ファイルや js ファイルへ正しくパスを通します。

WordPress に設定する場合

  1. 作業をする前に、必ず 現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. functions.php と同じ階層に smart-qa フォルダを、FTP でアップロードします。
  3. WorkPress の管理画面にログインし、Q&Aページを開き、テキストモードにします。
  4. 質問と回答のブロック全体を <dl> タグで囲み、クラス属性 smart-qa を設定します。
    一度開いた回答を開いたままにする場合は、クラス属性 open を追加します。一度開いた回答を閉じる場合は、設定不要。
  5. 質問文を <dt> タグで囲みます。
  6. 回答文(回答箇所)を <dd> タグで囲みます。

    例)
    <dl class="smart-qa">
    <dt>質問文</dt>
    <dd>回答文(回答部分)</dd>
    </dl>

  7. functions.php に css ファイルと js ファイルを読み込むためのコードを書きます。
    以下は、xxxというスラッグのページから呼び出す場合の書き方です。

    例)
    function qa_enqueue() {
    if (is_single ('xxx')) {
    wp_register_style ('qa_style', get_stylesheet_directory_uri()."/smart-qa/smart-qa.css");
    wp_enqueue_style ('qa_style');
    wp_register_script ('qa_script', get_stylesheet_directory_uri()."/smart-qa/jquery.smart-qa.js", array('jquery'), false, true);
    wp_enqueue_script ('qa_script');
    }
    }
    add_action ('wp_enqueue_scripts', 'qa_enqueue');

  8. テストして意図通りになっていれば OK です。
  9. 意図通りになっていない場合は、バックアップしていた functions.php に戻し、技術担当者に設定を依頼しましょう。

スマートQ&Aのダウンロード


コメントを残す


// 記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述