EC-CUBE2.12:FAQよくある質問の管理・閲覧ページ

▼ここでのカスタマイズファイルをすべてダウンロードできます。
必要な箇所だけコピーしてご利用ください。
他のカスタマイズも含まれている場合がありますので、ファイルの上書きは絶対におやめください。
こちらから(facebookユーザーのみ)

サンプルはこちら

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にカテゴリ名を登録する。
★カテゴリ名の変更や追加はここで行う。(以下は例)

INSERT INTO mtb_faq (id, name, rank) VALUES (1, 'ご注文・お支払いについて', 1);
INSERT INTO mtb_faq (id, name, rank) VALUES (2, '配送・送料について', 2);
INSERT INTO mtb_faq (id, name, rank) VALUES (3, '商品の返品・交換について', 3);
INSERT INTO mtb_faq (id, name, rank) VALUES (4, '会員登録について', 4);
INSERT INTO mtb_faq (id, name, rank) VALUES (5, 'ショッピング全般について', 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]|escape}-->
<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|escape}--></textarea>
<span class="attention"> (上限<!--{$smarty.const.MLTEXT_LEN}-->文字)</span>
</td>
</tr>
</table>
<div class="btn-area">
<ul>
<li><a class="btn-action" href="javascript:;" onclick="fnFormModeSubmit('form1', 'edit', '', ''); return false;"><span class="btn-next">この内容で登録する</span></a></li>
</ul>
</div>

<div>FAQカテゴリ:<!--{$arrCategory[$faq_category]|escape}--></div>
<table class="list">
<col width="65%">
<col width="10%">
<col width="10%">
<col 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用 ■data/Smarty/templates/default/faq/index.tpl

<!--▼CONTENTS-->
<script type="text/javascript">
$(document).ready(function() {
$(".faq_answer").css("display","none");
$(".faq_question").click(function(){
$('.faq_question').next().slideUp();
$(this).next().slideToggle("fast");
}).next();
});
</script>

<div id="undercolumn">
<div id="undercolumn_faq">
<h2 class="title"><!--{$tpl_title|h}--></h2>

<!--{if $arrFaq|@count == 0}-->
<div>現在、登録されていません。
<!--{/if}-->

<!--{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"><table><tr><td class="faq_q"><span>Q</span></td><td class="question"><!--{$arrFaq[cnt].faq_question|h|nl2br}--></td></tr></table></div>

<div class="faq_answer"><table><tr><td class="faq_a"><span>A</span></td><td class="answer"><!--{$arrFaq[cnt].faq_answer|h|nl2br}--></td></tr></table></div>
<div class="clear"></div>
<!--{assign var=bef_category value=$arrFaq[cnt].faq_category}-->
<!--{/section}-->
</div><!--最後のカテゴリボックスを閉じる-->

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

 携帯用 ■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|escape}-->
<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>

 スマートフォン用 ■data/Smarty/templates/sphone/faq/index.tpl

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

<dl>
<!--{section name=cnt loop=$arrFaq}-->
<!--{if $arrFaq[cnt].faq_category != $bef_category}-->
<!--{if $bef_category != ''}-->
</dd>
<!--{/if}-->
<dt>■<!--{$arrFaq[cnt].name|escape}--></dt>
<dd>
<!--{/if}-->
<table>
<tr>
<th width="50">Q</th>
<td><div class="faq_question"><!--{$arrFaq[cnt].faq_question|escape|nl2br}--></div></td>
</tr>
<tr>
<th width="50" class="answer">A</th>
<td><div class="faq_answer"><!--{$arrFaq[cnt].faq_answer|escape|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>

(5)CSS

 ■html/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 table {
margin:0;
border:none;
}
div#undercolumn_faq table td {
padding:0;
border:none;
}
div#undercolumn_faq .faq_q,
div#undercolumn_faq .faq_a {
width:20px;
vertical-align:top;
text-align:center;
color:#FFF;
}
div#undercolumn_faq .faq_q span {
padding:0 2px;
background-color:#F00;
}
div#undercolumn_faq .faq_a span {
padding:0 2px;
background-color: #06C;
}
div#undercolumn_faq .faq_question {
cursor:pointer;
margin-bottom:5px;
}
div#undercolumn_faq .faq_question .question {
padding-left:5px;
}
div#undercolumn_faq .faq_question:hover {
color:#F60;
}
div#undercolumn_faq .faq_answer {
margin-bottom:15px;
}
div#undercolumn_faq .faq_answer .answer {
padding:5px;
border: #039 1px solid;
background-color: #06C;
color:#FFF;
}

 ■html/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;
}

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

 PC用

INSERT INTO dtb_pagelayout (device_type_id, page_id, page_name, url, filename, header_chk, footer_chk, edit_flg, author, description, keyword, update_url, create_date, update_date) VALUES (10, 29, 'FAQ', 'faq/index.php', 'faq/index', 1, 1, 2, NULL, NULL, NULL, NULL, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

 携帯用

INSERT INTO dtb_pagelayout (device_type_id, page_id, page_name, url, filename, header_chk, footer_chk, edit_flg, author, description, keyword, update_url, create_date, update_date) VALUES (1, 40, 'FAQ', 'faq/index.php', 'faq/index', 1, 1, 2, NULL, NULL, NULL, NULL, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

 スマートフォン用

INSERT INTO dtb_pagelayout (device_type_id, page_id, page_name, url, filename, header_chk, footer_chk, edit_flg, author, description, keyword, update_url, create_date, update_date) VALUES (2, 31, 'FAQ', 'faq/index.php', 'faq/index', 1, 1, 2, NULL, NULL, NULL, NULL, CURRENT_TIMESTAMP, CURRENT_TIMESTAMP);

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>

 携帯用
■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>

 スマートフォン用
■data/Smarty/templates/sphone/footer.tpl (追加)

<a rel="external" href="<!--{$smarty.const.HTTP_URL}-->abouts/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">当サイトについて</a>
<a rel="external" href="<!--{$smarty.const.HTTPS_URL}-->contact/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">お問い合わせ</a><br />
<a rel="external" href="<!--{$smarty.const.HTTP_URL}-->faq/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">FAQよくある質問</a><br />
<a rel="external" href="<!--{$smarty.const.HTTP_URL}-->order/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">特定商取引に関する表記</a>
<a rel="external" href="<!--{$smarty.const.HTTP_URL}-->guide/privacy.php">プライバシーポリシー</a>

(2)ブロックを新規作成する場合

 ■html/frontparts/bloc/faq.php

<?php
// {{{ requires
require_once realpath(dirname(__FILE__)) . '/../../require.php';
require_once CLASS_EX_REALDIR . 'page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Faq_Ex.php';

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

$objPage = new LC_Page_FrontParts_BLoc_Faq_Ex();
$objPage->blocItems = $params['items'];
register_shutdown_function(array($objPage, "destroy"));
$objPage->init();
$objPage->process();
?>

 ■data/class_extends/page_extends/frontparts/bloc/LC_Page_FrontParts_Bloc_Faq_Ex.php

<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc_Faq.php';

class LC_Page_FrontParts_Bloc_Faq_Ex extends LC_Page_FrontParts_Bloc_Faq {

// }}}
// {{{ functions

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

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

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

 ■data/class/page/frontparts/bloc/LC_Page_FrontParts_Bloc_Faq_.php

<?php
// {{{ requires
require_once CLASS_REALDIR . 'pages/frontparts/bloc/LC_Page_FrontParts_Bloc.php';

class LC_Page_FrontParts_Bloc_Faq extends LC_Page_FrontParts_Bloc {

// }}}
// {{{ functions

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

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

/**
* Page のアクション.
*
* @return void
*/
function action() {
}

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

 PC用 ■data/Smarty/templates/default/frontparts/bloc/faq.tpl

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

 携帯用 ■data/Smarty/templates/mobile/frontparts/bloc/faq.tpl

<hr>
<center><a href="faq/<!--{$smarty.const.DIR_INDEX_PATH}-->">FAQよくある質問</a></center>
<hr>

 スマートフォン用 ■data/Smarty/templates/sphone/frontparts/bloc/faq.tpl

<div>
<ul class="navBox">
<li><a href="<!--{$smarty.const.HTTP_URL}-->faq/<!--{$smarty.const.DIR_INDEX_PATH|h}-->">FAQよくある質問</a></li>
</ul>
</div>

 データベースdtb_blocテーブルに追加する

■ PC用

INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (10, 14, 'FAQよくある質問', 'faq.tpl', 'faq', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/faq.php', 0);

■ 携帯用

INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (1, 9, 'FAQよくある質問', 'faq.tpl', 'faq', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/faq.php', 0);

■ スマートフォン用

INSERT INTO dtb_bloc (device_type_id, bloc_id, bloc_name, tpl_path, filename, create_date, update_date, php_path, deletable_flg) VALUES (2, 12, 'FAQよくある質問', 'faq.tpl', 'faq', CURRENT_TIMESTAMP, CURRENT_TIMESTAMP, 'frontparts/bloc/faq.php', 0);

 デザイン管理からブロック配置