スマートQ&Aの設定・設置

スマートQ&A

更新日: 2018年9月30日

Q&Aページをスマートにします。最初は質問リストが並んでいるだけ。質問項目をクリックすると、それに対応する回答がスライドダウンしながら現われます。別の質問項目をクリックすると、その回答がスライドダウンする一方で、前の回答がスライドアップし、見えなくなります。

スマートQ&Aを見る/ダウンロードする

フォルダとファイルの構成

スマートQ&Aは、以下のようなフォルダとファイル構成になっています。

smart-qaフォルダ
  |-smart-qa.js (動きを制御するプログラムファイル)
  |-smart-qa.css (デザインファイル)

スマートQ&Aには設定ファイルはありません。スマートQ&Aを設定するには、設定したいページのHTMLを少し書き換えます。
なお、ダウンロード用zipファイルには、上記のファイルの他、これをお読みください.html という説明書が入っています。

スマートQ&Aの設定

通常のHTMLの場合は、そのままHTMLを書き込んでいきます。
WordPressの場合は、記事の入力画面を「テキスト」モードして作業をします。(「ビジュアル」モードでなく。)

  1. スマートQ&Aを設置するHTMLに、まず、質問と回答を一対ずつ書き並べます。
  2. 質問と回答のブロック全体を <dl>~</dl> で囲みます。その際、dl のクラスを "smart-qa" とします。
  3. 質問は <dt>~</dt> で囲みます。
  4. 回答は<dd>~</dd> で囲みます。

以上で、設定は終わりです。

例)

<dl class="smart-qa">
  <dt>Q1. ~</dt>
  <dd>A!. ~</dd> 
  <dt>Q2. ~</dt>
  <dd>A2. ~</dd> 
  <dt>Q3. ~</dt>
  <dd>A3. ~</dd> 
</dl>

スマートQ&Aの設置

以下、通常のhtmlファイルに設置する場合と、Wordpressに設置する場合に分けて、設置のしかたを説明します。

通常のhtmlファイルに設置する場合

  1. 作業をする前に、スマートQ&Aを呼び出す html のバックアップを取っておきます。
  2. smart-qaフォルダを、Q&Aページと同じ階層にアップロードします。
    |-
    |-html (Q&Aページ)
    |-smart-qa フォルダ
        |-smart-qa.css
        |-smart-qa.js
    
  3. スマートQ&Aを呼び出したい html の </head> の直前に、cssファイル、jquery.js、jsファイルへのリンクを書きます。

例)

<link href="smart-qa/smart-qa.css" type="text/css" rel="stylesheet" />
<script src="https://
ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" 
type="text/javascript"></script>
<script src="smart-qa/smart-qa.js" type="text/javascript">
</script>
</head>
  1. 意図通りになっていればOKです。
  2. 意図通りになっていない場合は、正しくリンクされているか確認してください。

wordpressに設置する場合

  1. 作業をする前に、必ず functions.php のバックアップを取っておきます。
  2. smart-qaフォルダを、themesフォルダ中の現在のテーマフォルダにアップロードします。
    themesフォルダ
      |-
      |-current-theme (現在のテーマフォルダ)
          |-
          |-functions.php
          |-smart-qa フォルダ
             |-smart-qa.css
             |-smart-qa.js
    
  3. スマートQ&Aを呼び出すために、テーマフォルダ内の functions.php に cssファイルと jsファイルへのリンクを書きます。
    以下は、xxxというスラッグの投稿ページから呼び出す場合の書き方です。

例)

function cb_enqueue(){
  if (is_single ('xxx')) {
    wp_enqueue_script ('qa_script', 
get_template_directory_uri()."/smart-qa/smart-qa.js", 
array('jquery'), false, true);
    wp_enqueue_style ('qa_style', 
get_template_directory_uri()."/smart-qa/smart-qa.css");
  }
}
add_action ('wp_enqueue_scripts', 'cb_enqueue');
  1. 意図通りになっていればOKです。
  2. 意図通りになっていない場合は、正しくリンクされているか確認してください。

CMSサイトへの設置は、ホームページの技術担当者に依頼するようにしましょう。

▲このページのトップへ