EC-CUBE：FAQよくある質問の管理・閲覧ページ

1　データベースに下記の2つのテーブルを追加する

（1）MySQL

①　dtb_faq
———————————————————–
CREATE TABLE dtb_faq (
faq_id int NOT NULL,
faq_category smallint NOT NULL,
faq_question text NOT NULL,
faq_answer text NOT NULL,
rank int NOT NULL DEFAULT 0,
creator_id int NOT NULL,
create_date datetime NOT NULL,
update_date datetime NOT NULL,
del_flg smallint NOT NULL DEFAULT 0,
PRIMARY KEY (faq_id)
);
———————————————————–

②　mtb_faq
———————————————————–
CREATE TABLE mtb_faq (
id smallint,
name text,
rank smallint NOT NULL DEFAULT 0,
PRIMARY KEY (id)
);
———————————————————–

（2）PostgreSQL

①　dtb_faq
———————————————————–
CREATE TABLE dtb_faq (
faq_id int NOT NULL,
faq_category smallint NOT NULL,
faq_question text NOT NULL,
faq_answer text NOT NULL,
rank int NOT NULL DEFAULT 0,
creator_id int NOT NULL,
create_date timestamp NOT NULL,
update_date timestamp NOT NULL,
del_flg smallint NOT NULL DEFAULT 0,
PRIMARY KEY (faq_id)
);
———————————————————–

②　mtb_faq
———————————————————–
CREATE TABLE mtb_faq (
id smallint,
name text,
rank smallint NOT NULL DEFAULT 0,
PRIMARY KEY (id)
);
———————————————————–

2　システム設定＞マスターデータ管理で、mtb_faqを選択して、カテゴリ名を登録する。
★カテゴリ名の変更や追加はここで行う。（以下は例）
———————————————————–
ID：1
値：ご注文・お支払いについて

ID：2
値：配送・送料について

ID：3
値：商品の返品・交換について

ID：4
値：会員登録について

ID：5
値：ショッピング全般について
———————————————————–

3　管理画面を作成する。下記ファイルを新規作成。

（1）　■html/admin/basis/faq.php

<?php
// {{{ requires
require_once("../require.php");
require_once(CLASS_EX_REALDIR . "page_extends/admin/basis/LC_Page_Admin_Basis_Faq_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_Admin_Basis_Faq_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

（2）　■data/class_extends/page_extends/admin/basis/LC_Page_Admin_Basis_Faq_Ex.php

<?php
// {{{ requires
require_once(CLASS_REALDIR . "pages/admin/basis/LC_Page_Admin_Basis_Faq.php");

/**
* ヘルプ設定 のページクラス(拡張).
*
* @package Page
* @author CUORE CO.,LTD.
* @version $Id: LC_Page_Admin_Basis_Faq_Ex.php 1 2009-08-04 00:00:00Z $
*/
class LC_Page_Admin_Basis_Faq_Ex extends LC_Page_Admin_Basis_Faq {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

（3）　■data/class/page/admin/basis/LC_Page_Admin_Basis_Faq.php

<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/admin/LC_Page_Admin_Ex.php';

/**
* FAQ設定 のページクラス.
*
* @package Page
* @author CUORE CO.,LTD.
*/
class LC_Page_Admin_Basis_Faq extends LC_Page_Admin_Ex {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->tpl_mainpage = 'basis/faq.tpl';
$this->tpl_subnavi = 'basis/subnavi.tpl';
$this->tpl_subno = 'faq';
$this->tpl_subtitle = 'FAQ登録';
$this->tpl_mainno = 'basis';
$masterData = new SC_DB_MasterData_Ex();
$this->arrCategory = $masterData->getMasterData("mtb_faq", array("id", "name", "rank"));
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {
$objQuery =& SC_Query_Ex::getSingletonInstance();
$objDb = new SC_Helper_DB_Ex();

if(!isset($_POST['faq_category'])) {
$arrKeys = array_keys($this->arrCategory);
$this->faq_category = $arrKeys[0];
} else {
$this->faq_category = $_POST['faq_category'];
}

// 要求判定
switch($this->getMode()) {
// 編集処理
case 'edit':
// POST値の引き継ぎ
$this->arrForm = $_POST;
// 入力文字の変換
$this->arrForm = $this->lfConvertParam($this->arrForm);
// エラーチェック
$this->arrErr = $this->lfErrorCheck($this->arrForm);
if(count($this->arrErr) <= 0) {
if($_POST['faq_id'] == "") {
$this->lfInsertClass($this->arrForm);    // 新規作成
} else {
$this->lfUpdateClass($this->arrForm);    // 既存編集
}
// FAQ質問・回答は初期化
unset($this->arrForm['faq_question']);
unset($this->arrForm['faq_answer']);
} else {
// POSTデータを引き継ぐ
$this->tpl_faq_id = $_POST['faq_id'];
}
break;

// 削除
case 'delete':
$objDb->sfDeleteRankRecord("dtb_faq", "faq_id", $_POST['faq_id'], "faq_category = " . $this->faq_category, true);
break;
// 編集前処理
case 'pre_edit':
// 編集項目をDBより取得する。
$arrRet = $objQuery->select("faq_category, faq_question, faq_answer", "dtb_faq", "faq_id = ?", array($_POST['faq_id']));
// 入力項目にカテゴリ名を入力する。
$this->arrForm['faq_category'] = $arrRet[0]['faq_category'];
$this->arrForm['faq_question'] = $arrRet[0]['faq_question'];
$this->arrForm['faq_answer'] = $arrRet[0]['faq_answer'];
// POSTデータを引き継ぐ
$this->tpl_faq_id = $_POST['faq_id'];
break;
case 'down':
$objDb->sfRankDown("dtb_faq", "faq_id", $_POST['faq_id'], "faq_category = " . $this->faq_category);
break;
case 'up':
$objDb->sfRankUp("dtb_faq", "faq_id", $_POST['faq_id'], "faq_category = " . $this->faq_category);
break;
default:
break;
}
// FAQ情報の取得
$objQuery->setorder("rank DESC");
$this->arrFaq = $objQuery->select("faq_id, faq_category, faq_question, faq_answer", "dtb_faq", "faq_category = ? AND del_flg = 0", array($this->faq_category));
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}

/* DBへの挿入 */
function lfInsertClass($arrData) {
$objQuery =& SC_Query_Ex::getSingletonInstance();
// INSERTする値を作成する。
$sqlval['faq_id'] = $objQuery->nextVal('dtb_faq_faq_id');
$sqlval['faq_category'] = $arrData['faq_category'];
$sqlval['faq_question'] = $arrData['faq_question'];
$sqlval['faq_answer'] = $arrData['faq_answer'];
$sqlval['rank'] = $objQuery->max("rank", "dtb_faq", "faq_category = " . $this->faq_category) + 1;
$sqlval['creator_id'] = $_SESSION['member_id'];
$sqlval['create_date'] = "CURRENT_TIMESTAMP";
$sqlval['update_date'] = "CURRENT_TIMESTAMP";
// INSERTの実行
$ret = $objQuery->insert("dtb_faq", $sqlval);
return $ret;
}

/* DBへの更新 */
function lfUpdateClass($arrData) {
$objQuery =& SC_Query_Ex::getSingletonInstance();
// UPDATEする値を作成する。
$sqlval['faq_question'] = $arrData['faq_question'];
$sqlval['faq_answer'] = $arrData['faq_answer'];
$sqlval['update_date'] = "CURRENT_TIMESTAMP";
$where = "faq_id = ?";
// UPDATEの実行
$ret = $objQuery->update("dtb_faq", $sqlval, $where, array($_POST['faq_id']));
return $ret;
}

/* 取得文字列の変換 */
function lfConvertParam($array) {
/*
*  文字列の変換
*  r :  「全角」英字を「半角(ﾊﾝｶｸ)」に変換
*  R :  「半角(ﾊﾝｶｸ)」英字を「全角」に変換
*  n :  「全角」数字を「半角(ﾊﾝｶｸ)」に変換
*  N :  「半角(ﾊﾝｶｸ)」数字を「全角」に変換
*  a :  「全角」英数字を「半角(ﾊﾝｶｸ)」に変換
*  A :  「半角(ﾊﾝｶｸ)」英数字を「全角」に変換
*  s :  「全角」スペースを「半角(ﾊﾝｶｸ)」に変換
*  S :  「半角(ﾊﾝｶｸ)」スペースを「全角」に変換
*  k :  「全角片仮名」を「半角(ﾊﾝｶｸ)片仮名」に変換
*  K :  「半角(ﾊﾝｶｸ)片仮名」を「全角片仮名」に変換
*  h :  「全角ひら仮名」を「半角(ﾊﾝｶｸ)片仮名」に変換
*  H :  「半角(ﾊﾝｶｸ)片仮名」を「全角ひら仮名」に変換
*  c :  「全角かた仮名」を「全角ひら仮名」に変換
*  C :  「全角ひら仮名」を「全角かた仮名」に変換
*  V :  濁点付きの文字を一文字に変換。"K","H"と共に使用します。
*/
// 文字変換
$arrConvList['faq_question'] = "KVa";
$arrConvList['faq_answer'] = "KVa";

foreach($arrConvList as $key => $val) {
// POSTされてきた値のみ変換する。
if(isset($array[$key])) {
$array[$key] = mb_convert_kana($array[$key] ,$val);
}
}
return $array;
}

/* 入力エラーチェック */
function lfErrorCheck($array) {
$objErr = new SC_CheckError_Ex($array);
$objErr->doFunc(array("FAQカテゴリ", "faq_category"), array("EXIST_CHECK"));
$objErr->doFunc(array("FAQ質問", "faq_question", MLTEXT_LEN), array("EXIST_CHECK", "SPTAB_CHECK", "MAX_LENGTH_CHECK"));
$objErr->doFunc(array("FAQ回答", "faq_answer", MLTEXT_LEN), array("EXIST_CHECK", "SPTAB_CHECK", "MAX_LENGTH_CHECK"));

// 全入力項目に問題がない場合のみ、質問の重複チェック
if(!isset($objErr->arrErr['faq_category']) && !isset($objErr->arrErr['faq_question']) && !isset($objErr->arrErr['faq_answer'])) {
$objQuery =& SC_Query_Ex::getSingletonInstance();
// カテゴリと質問が同じレコードを検索
$arrRet = $objQuery->select("faq_id", "dtb_faq", "del_flg = 0 AND faq_category = ? AND faq_question = ?", array($array['faq_category'], $array['faq_question']));
// 取得レコードがあった場合、IDを比較して編集中のレコードかチェック
if(count($arrRet) > 0 && $arrRet[0]['faq_id'] != $array['faq_id']) {
// 同じ質問が存在する場合
$objErr->arrErr['faq_question'] = "※ 既に同じ質問の登録が存在します。<br>";
}
}
return $objErr->arrErr;
}
}
?>

（4）　■data/Smarty/templates/admin/basis/faq.tpl

<form name="form1" id="form1" method="post" action="?">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="hidden" name="mode" value="edit">
<input type="hidden" name="faq_id" value="<!--{$tpl_faq_id}-->">
<div id="basis" class="contents-main">
<table class="form">
<tr>
<th>FAQカテゴリ<span class="attention"> *</span></th>
<td>
<span class="attention"><!--{$arrErr.faq_category}--></span>
<!--{if $tpl_faq_id == ""}-->
<select name="faq_category" style="<!--{if $arrErr.faq_category != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->" onChange="fnModeSubmit('change', '', ''); return false;">
<!--{html_options options=$arrCategory selected=$faq_category}-->
</select>
<!--{else}-->
<!--{$arrCategory[$faq_category]|h}-->
<input type="hidden" name="faq_category" value="<!--{$faq_category}-->" />
<!--{/if}-->
</td>
</tr>
<tr>
<th>FAQ質問<span class="attention"> *</span></th>
<td>
<span class="attention"><!--{$arrErr.faq_question}--></span>
<textarea name="faq_question" maxlength="<!--{$smarty.const.MTEXT_LEN}-->" cols="60" rows="8" class="area60" style="<!--{if $arrErr.faq_question != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->" ><!--{$arrForm.faq_question|h}--></textarea>
<span class="attention"> （上限<!--{$smarty.const.MLTEXT_LEN}-->文字）</span>
</td>
</tr>
<tr>
<th>FAQ回答<span class="attention"> *</span></th>
<td>
<span class="attention"><!--{$arrErr.faq_answer}--></span>
<textarea name="faq_answer" maxlength="<!--{$smarty.const.MTEXT_LEN}-->" cols="60" rows="8" class="area60" style="<!--{if $arrErr.faq_answer != ""}-->background-color: <!--{$smarty.const.ERR_COLOR}-->;<!--{/if}-->" ><!--{$arrForm.faq_answer|h}--></textarea>
<span class="attention"> （上限<!--{$smarty.const.MLTEXT_LEN}-->文字）</span>
</td>
</tr>
</table>
<div class="btn-area">
<ul>
<li class="btn-action"><a href="javascript:;" onclick="fnFormModeSubmit('form1', 'edit', '', ''); return false;"><span>この内容で登録する</span></a></li>
</ul>
</div>

<div>FAQカテゴリ：<!--{$arrCategory[$faq_category]|h}--></div>
<table class="list">
<colgroup width="65%">
<colgroup width="10%">
<colgroup width="10%">
<colgroup width="15%">
<tr>
<th>FAQ質問</th>
<th>編集</th>
<th>削除</th>
<th>移動</th>
</tr>
<!--{section name=cnt loop=$arrFaq}-->
<tr style="background:<!--{if $tpl_class_id != $arrFaq[cnt].faq_id}-->#ffffff<!--{else}--><!--{$smarty.const.SELECT_RGB}--><!--{/if}-->;">
<!--{assign var=faq_id value=$arrFaq[cnt].faq_id}-->
<td><!--{* FAQ質問 *}--><!--{$arrFaq[cnt].faq_question|mb_strimwidth:0:65:"..."|h|nl2br}--></td>
<td align="center">
<!--{if $tpl_faq_id != $arrFaq[cnt].faq_id}-->
<a href="?" onclick="fnModeSubmit('pre_edit', 'faq_id', <!--{$arrFaq[cnt].faq_id}-->); return false;">編集</a>
<!--{else}-->
編集中
<!--{/if}-->
</td>
<td align="center">
<!--{if $arrClassCatCount[$class_id] > 0}-->
-
<!--{else}-->
<a href="?" onclick="fnModeSubmit('delete', 'faq_id', <!--{$arrFaq[cnt].faq_id}-->); return false;">削除</a>
<!--{/if}-->
</td>
<td align="center">
<!--{if $smarty.section.cnt.iteration != 1}-->
<a href="?" onclick="fnModeSubmit('up', 'faq_id', <!--{$arrFaq[cnt].faq_id}-->); return false;">上へ</a>
<!--{/if}-->
<!--{if $smarty.section.cnt.iteration != $smarty.section.cnt.last}-->
<a href="?" onclick="fnModeSubmit('down', 'faq_id', <!--{$arrFaq[cnt].faq_id}-->); return false;">下へ</a>
<!--{/if}-->
</td>
</tr>
<!--{/section}-->
</table>

</div>
</form>

（5）　■data/Smarty/templates/admin/basis/subnavi.tpl

下記の順で「FAQ設定」画面が開けるようにする。
［基本情報管理］→［FAQ設定］

会員規約設定の下に追加。

<li<!--{if $tpl_subno == 'faq'}--> class="on"<!--{/if}--> id="navi-basis-faq"><a href="<!--{$smarty.const.ROOT_URLPATH}--><!--{$smarty.const.ADMIN_DIR}-->basis/faq.php"><span>FAQ設定</span></a></li>

4　フロント画面を作成する

「faq」フォルダを作成しその中にファイルを置く。

（1）　■html/faq/index.php

<?php
// {{{ requires
require_once("../require.php");
require_once(CLASS_EX_REALDIR . "page_extends/faq/LC_Page_Faq_Ex.php");

// }}}
// {{{ generate page

$objPage = new LC_Page_Faq_Ex();
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

（2）　■data/class_extends/page_extends/faq/LC_Page_Faq_Ex.php

<?php
// {{{ requires
require_once(CLASS_REALDIR . "pages/faq/LC_Page_Faq.php");

/**
* ヘルプ のページクラス(拡張).
*
* @package Page
* @author CUORE CO.,LTD.
* @version $Id$
*/
class LC_Page_Faq_Ex extends LC_Page_Faq {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

（3）　■data/class/page/faq/LC_Page_Faq.php

<?php
// {{{ requires
require_once CLASS_EX_REALDIR . 'page_extends/LC_Page_Ex.php';

/**
* ヘルプ のページクラス.
*
* @package Page
* @author CUORE CO.,LTD.
* @version $Id: LC_Page_Faq.php 1 2009-08-04 00:00:00Z $
*/
class LC_Page_Faq extends LC_Page_Ex {

// }}}
// {{{ functions

/**
* Page を初期化する.
*
* @return void
*/
function init() {
parent::init();
$this->tpl_page_category = 'faq';
}

/**
* Page のプロセス.
*
* @return void
*/
function process() {
parent::process();
$this->action();
$this->sendResponse();
}

/**
* Page のアクション.
*
* @return void
*/
function action() {
//ヘルプ内容の取得
$objQuery =& SC_Query_Ex::getSingletonInstance();

// デバイスタイプチェック
if (SC_Display_Ex::detectDevice() == DEVICE_TYPE_MOBILE) {
// モバイルの場合
// IDチェック
if (@$_GET['page'] < 1) {
// 指定なしの場合、一覧画面
$column = "h1.faq_id, h1.faq_category, h1.faq_question, h1.faq_answer, h2.name";
$table = "dtb_faq h1, mtb_faq h2";
$where = "h1.faq_category = h2.id AND h1.del_flg <> 1";
$order = "h1.faq_category, h1.rank DESC";

$objQuery->setorder($order);
} else {
// 指定ありの場合、詳細画面
$this->tpl_mainpage = 'faq/faq_detail.tpl';

$column = "h1.faq_question, h1.faq_answer";
$table = "dtb_faq h1";
$where = "h1.faq_id = ". @$_GET['page'];
}
} else {
// モバイル以外の場合
$column = "h1.faq_category, h1.faq_question, h1.faq_answer, h2.name";
$table = "dtb_faq h1, mtb_faq h2";
$where = "h1.faq_category = h2.id AND h1.del_flg = 0";
$order = "h1.faq_category, h1.rank DESC";

$objQuery->setorder($order);
}
$this->arrFaq = $objQuery->select($column, $table, $where);
}

/**
* デストラクタ.
*
* @return void
*/
function destroy() {
parent::destroy();
}
}
?>

（4）　PC用テンプレートとCSS
①　■data/Smarty/templates/default/faq/index.tpl　（jQueryアコーディオンを利用）

<!--▼CONTENTS-->
<script type="text/javascript">
$(document).ready(function(){
$('.faq_question').click(function() {
$('.faq_question').next().slideUp();
$(this).next().slideToggle();
}).next().hide();
});
</script>
<div id="undercolumn">
<div id="undercolumn_faq">
<h2 class="title"><!--{$tpl_title|h}--></h2>

<!--{section name=cnt loop=$arrFaq}-->
<!--{if $arrFaq[cnt].faq_category != $bef_category}-->
<!--{if $bef_category != ''}-->
</div><!--カテゴリボックスを閉じる-->
<!--{/if}-->

<div class="category_box" id="<!--{$arrFaq[cnt].faq_category|h}-->">
<div class="category_title"><!--{$arrFaq[cnt].name|h}--></div>
<!--{/if}-->
<div class="faq_question"><!--{$arrFaq[cnt].faq_question|h|nl2br}--></div>

<div class="faq_answer"><!--{$arrFaq[cnt].faq_answer|h|nl2br}--></div>

<!--{assign var=bef_category value=$arrFaq[cnt].faq_category}-->
<!--{/section}-->
</div><!--最後のカテゴリボックスを閉じる-->

</div>
</div>
<!--▲CONTENTS-->

②　■heml/user_data/packages/default/css/contents.css

/* FAQ
----------------------------------------------- */
div#undercolumn_faq .category_title {
font-size:140%;
margin-bottom:5px;
color:#039;
}

div#undercolumn_faq .category_box {
margin-bottom:15px;
}

div#undercolumn_faq .faq_question {
cursor:pointer;
background:url(../img/background/bg_q.png) no-repeat left top;
padding-left:18px;
}

div#undercolumn_faq .faq_answer {
margin-bottom:10px;
background:url(../img/background/bg_a.png) no-repeat left top;
padding-left:18px;
padding-top:3px;
padding-bottom:3px;
border-bottom:1px dotted #ccc;
color: #930;
}

（5）　携帯用テンプレート
①　■data/Smarty/templates/mobile/faq/index.tpl

<!--{section name=cnt loop=$arrFaq}-->
<!--{if $arrFaq[cnt].faq_category != $bef_category}-->
<!--{assign var=question_cnt value=1}-->
<!--{if $bef_category != ''}-->
</ul>
<!--{/if}-->
<!--{$arrFaq[cnt].name|h}-->
<ul>
<!--{/if}-->
<a href="index.php?page=<!--{$arrFaq[cnt].faq_id}-->"><!--{$arrFaq[cnt].faq_question}--></a><br>
<!--{assign var=bef_category value=$arrFaq[cnt].faq_category}-->
<!--{assign var=question_cnt value=`$question_cnt+1`}-->
<!--{/section}-->
</ul>

②　■data/Smarty/templates/mobile/faq/aq_detail.tpl

<center><!--{$arrFaq[0].faq_question}--></center>

<hr>

<!--{$arrFaq[0].faq_answer}--><br>
<a href="index.php">←戻る</a><br>

（6）　スマートフォン用テンプレートとCSS
①　■data/Smarty/templates/sphone/faq/index.tpl

<!--▼CONTENTS-->
<section id="undercolumn">
<h2 class="title"><!--{$tpl_title|h}--></h2>

<dl class="form_faq">
<!--{section name=cnt loop=$arrFaq}-->
<!--{if $arrFaq[cnt].faq_category != $bef_category}-->
<!--{if $bef_category != ''}-->
</dd>
<!--{/if}-->
<dt>■<!--{$arrFaq[cnt].name|h}--></dt>
<dd>
<!--{/if}-->
<table>
<tr>
<th width="50">Ｑ</th>
<td><div class="faq_question"><!--{$arrFaq[cnt].faq_question|h|nl2br}--></div></td>
</tr>
<tr>
<th width="50" class="answer">Ａ</th>
<td><div class="faq_answer"><!--{$arrFaq[cnt].faq_answer|h|nl2br}--></div></td>
</tr>
</table>
<!--{assign var=bef_category value=$arrFaq[cnt].faq_category}-->
<!--{/section}-->
</dd>
</dl>
</section>

<section id="search_area">
<form method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">
<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
<input type="search" name="name" id="search" value="" placeholder="キーワードを入力" class="searchbox" >
</form>
</section>
<!--▲CONTENTS-->

<script type="application/javascript">
<!--//
$(function(){
$("dd").hide();
$("dt").click(function(){
$(this).next().slideToggle("normal");
});
});
//-->
</script>

②　■heml/user_data/packages/sphone/css/contents.css

/* -----------------------------------------------
FAQ
----------------------------------------------- */
dl.form_faq{
width:100%;
margin:10px 0 15px 0;
padding:0;
border-bottom:#999 solid 1px;
position:relative;
}
dl.form_faq dt{
font-weight:bold;
font-size:17px;
padding:10px 10px 0;
}
dl.form_faq dd{
padding:0 10px 10px;
border-bottom:#CCC solid 1px;
}
dl.form_faq dd:last-child{
border-bottom:0;
}
dl.form_faq th {
vertical-align:top;
text-align:center;
}
dl.form_faq th.answer{
color:#FF6633;
}
dl.form_faq .faq_question{
font-weight:bold;
}

（7）　PC用の「Q」「A」画像を、■html/user_data/packages/default/img/backgroundフォルダにアップロードする。

　

5　FAQページを開くためのリンクを追加する

（1）PC用
■data/Smarty/templates/default/frontparts/bloc/guide.tpl　（追加）

<li>
<a href="<!--{$smarty.const.ROOT_URLPATH}-->faq/<!--{$smarty.const.DIR_INDEX_PATH}-->" class="<!--{if $tpl_page_category == "faq"}--> selected<!--{/if}-->"
>FAQ よくある質問</a></li>

（2）携帯用
■data/Smarty/templates/mobile/index.tpl　（追加・修正）

<a href="faq/<!--{$smarty.const.DIR_INDEX_PATH}-->" accesskey="5"><!--{5|numeric_emoji}-->FAQよくある質問</a><br>
<a href="contact/<!--{$smarty.const.DIR_INDEX_PATH}-->" accesskey="6"><!--{6|numeric_emoji}-->お問い合わせ</a><br>
<a href="order/<!--{$smarty.const.DIR_INDEX_PATH}-->" accesskey="7"><!--{7|numeric_emoji}-->特定商取引に関する表記</a>

（3）スマートフォン用
■data/Smarty/templates/sphone/footer.tpl　（追加）

<a rel="external" href="<!--{$smarty.const.HTTP_URL}-->faq/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">FAQよくある質問</a>

6　データベースにページを登録

（1）　PC用
———————————-
テーブル：dtb_pagelayout
device_type_id：10
page_id：29 ←既存page_idの続き
page_name：FAQ
url：faq/index.php
filename：faq/index
header_chk：1
footer_chk：1
edit_flg：2
author：NULL
description：NULL
keyword：NULL
update_url：NULL
create_date：作成日
update_date：作成日
———————————-

（2）　携帯用
———————————-
テーブル：dtb_pagelayout
device_type_id：1
page_id：40 ←既存page_idの続き
page_name：FAQ
url：faq/index.php
filename：faq/index
header_chk：1
footer_chk：1
edit_flg：2
author：NULL
description：NULL
keyword：NULL
update_url：NULL
create_date：作成日
update_date：作成日
———————————-

（3）　スマートフォン用
———————————-
テーブル：dtb_pagelayout
device_type_id：2
page_id：31 ←既存page_idの続き
page_name：FAQ
url：faq/index.php
filename：faq/index
header_chk：1
footer_chk：1
edit_flg：2
author：NULL
description：NULL
keyword：NULL
update_url：NULL
create_date：作成日
update_date：作成日
———————————-