スマートQ&Aのダウンロードと設定設置

スマートQ&Aのダウンロードと設定設置

本ページでは、Q&Aセクションをスマートに見せるスマートQ&Aを無料ダウンロードできます。あわせて、ダウンロードしたスクロールアップの設定設置のしかたについて詳しく解説します。

フォルダとフィルの構成

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

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

設定設置の流れ

  1. Q&Aを完成させる。
  2. Q&Aページ(ファイル)のバックアップを取る。
  3. Q&AページにスマートQ&Aの設定を行う。
  4. Q&Aファイルからプログラム等にリンクを張る。
  5. Q&Aページと smart-qa フォルダをアップロードする。
  6. テストする。

ここでは、通常の html に設置する場合と 代表的な CMS WordPress に設置する場合に分けて、具体的にコードを例示しながら解説します。

通常の html に設定する場合

通常の html とは、プログラムで生成されたものではなく、html と css というプログラム言語で書かれたホームページのことです。

  1. まず、質問とそれに対する回答を並べて書き込みます。
    例)
    Q1. 回答は文章だけでなく、画像や動画の場合もあるのですが、その場合もスマートQ&Aは対応しますか?
    A1. はい、画像でも動画でも、ユーザーが対応する質問をクリックしたときのみ、表示することができます。
    Q2. 〇〇〇〇〇〇?
    A2. ◇◇◇◇◇◇
  2. Q&Aが完成したら、Q&Aページの htmlファイルをバックアップしておきます。
  3. Q&Aページの html に戻り、質問と回答のブロック全体を <dl> タグで囲み、クラス属性 smart-qa を設定します。
    一度開いた回答を開いたままにする場合は、クラス属性 open を追加します。一度開いた回答を閉じる場合は、クラス属性の追加は不要です。
    例は、一度開いた回答を次の質問では閉じる設定です。
    例)
    <dl class="smart-qa">
    Q1. 回答は文章だけでなく、画像や動画の場合もあるのですが、その場合もスマートQ&Aは対応しますか?
    A1. はい、画像でも動画でも、ユーザーが対応する質問をクリックしたときのみ、表示することができます。
    Q2. 〇〇〇〇〇〇?
    A2. ◇◇◇◇◇◇
    </dl>
  4. 質問文を <dt> タグで囲みます。
    例)
    <dl class="smart-qa">
    <dt>Q1. 回答は文章だけでなく、画像や動画の場合もあるのですが、その場合もスマートQ&Aは対応しますか?</dt>
    A1. はい、画像でも動画でも、ユーザーが対応する質問をクリックしたときのみ、表示することができます。
    <dt>Q2. 〇〇〇〇〇〇?</dt>
    A2. ◇◇◇◇◇◇
    </dl>
  5. 回答文を <dd> タグで囲みます。
    例)
    <dl class="smart-qa">
    <dt>Q1. 回答は文章だけでなく、画像や動画の場合もあるのですが、その場合もスマートQ&Aは対応しますか?</dt>
    <dd>A1. はい、画像でも動画でも、ユーザーが対応する質問をクリックしたときのみ、表示することができます。<dd>
    <dt>Q2. 〇〇〇〇〇〇?</dt>
    <dd>A2. ◇◇◇◇◇◇<dd>
    </dl>
    ここまでで、スマートQ&A の設定は終わりです。
  6. 次に、</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>
  7. 同じファイルの </head> の直前に smart-qa.css を読み込むリンクを書きます。
    例)
    <link href="smart-qa/smart-qa.css" type="text/css" rel="stylesheet" />
    </head>
  8. 上記設定の終わった html ファイルを保存してFTPソフトでアップロードし、既存のものに上書きします。
  9. 同時に Q&A フォルダを同じ階層にアップロードします。
  10. テストして意図通りになっていれば OK です。

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

意図通りにいかない場合は、html 内のパスを確認してください。
ファイル名やパスをミスすると、動きません。
どうしてもうまくいかないときは、専門家に任せましょう。

WordPress に設定する場合

  1. 作業をする前に、現在のテーマフォルダ内の functions.php のバックアップを取っておきます。
  2. WorkPress の管理画面にログインし、Q&Aページを開き、「通常の html に設定する場合」の1と同様に、質問とそれに対する回答を並べて書き込みます。
  3. Q&Aが完成したら、いったんページを保存します。
  4. html が編集できるモードにして、質問と回答のブロック全体を <dl> タグで囲み、クラス属性 smart-qa を設定します。
    一度開いた回答を開いたままにする場合は、クラス属性 open を追加します。一度開いた回答を閉じる場合は、クラス属性の追加は不要です。(「通常の html に設定する場合」の3参照)
  5. 質問文を <dt> タグで囲みます。(「通常の html に設定する場合」の4参照)
  6. 回答文を <dd> タグで囲みます。(「通常の html に設定する場合」の5参照)
  7. ページを再び保存します。
  8. 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');
  9. FTP ソフトで smart-qa フォルダを functions.php と同じ階層にアップロードします。
  10. テストして意図通りになっていれば OK です。

意図通りになっていない場合は、バックアップしていた functions.php に戻し、技術担当者に設定を依頼しましょう。

スマートQ&Aの使用条件

スマートQ&Aは、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 です。
jquery.smart-qa.js と smart-qa.css 冒頭の弊社のクレジットは消さないでください。
プログラムの改変は自由ですが、改変したプログラムは、本プログラムと同様、CC(クリエイティブ コモンズ)ライセンスの 表示 + 継承 で公開しなければなりません。
なお、商用/非商用関係なく、許可なく、お使いいただけます

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

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


コメントを残す