小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

ホームページのFAQ更新用CMS(よくある質問と回答の管理)

最終更新日: 2015-01-10
ホームページのFAQ(よくある質問コーナー)更新用CMS

「すぐ使えるCGI」を、WebサイトのFAQ(よくある質問と回答)の更新ツールとして利用する方法をご紹介します。

アイコンによるカテゴリ分類の表示やカテゴリによる絞込み機能もあり、分かりやすいFAQページがすぐに作成できます。

ホームページのFAQ更新ツール(CMS)の概要

管理画面とカテゴリ分類機能

FAQ管理ツール(CMS)

このツールでは、1件ごとに「質問」と「答え」を入力していくだけで、FAQ ページの作成ができます。

それぞれの「質問」にはカテゴリ分類を付ける事ができ、登録した「質問」の順番を並べ変えることも可能です。

画像の掲載や詳細資料などのファイル添付も可能です。

FAQのカテゴリアイコン表示とカテゴリ絞込みフィルタ

FAQ(よくある質問と回答)のカテゴリ絞込みフィルタ

各FAQ(質問)に付けたカテゴリはアイコンで分かりやすく分類して表示します。

絞り込みフィルタで選択すれば、件数が多い場合でも見やすく表示できます。

選べるページ構成

以下の2つのページ構成のどちらでも作成できます。

1ページタイプ

1ページにまとめて表示するFAQ(よくある質問と回答)

1ページに質問も回答もまとめて表示するタイプです。回答が短い場合に見やすい方法です。

サンプルでは、最初はタイトル(質問)だけ表示し、クリックで回答が表示されるようになっていますが、初めから質問と回答の両方を表示するようにする変更が可能です。

詳細ページタイプ

タイトルのクリックで別ウィンドウにFAQ(よくある質問と回答)を表示

詳細ページタイプは、タイトル(質問)をクリックした時に別のページ(別ウィンドウ、別窓)を開いて回答を表示するタイプです。

回答内容が長くても短くても使えます。1件1件の回答が長い場合はこちらのタイプの方が適しています。

また、SEO(検索エンジン最適化)的な観点で言えば、質問と回答のテーマが多岐にわたる場合は、ページのテーマ(キーワード)を絞り込むという意味で詳細ページタイプの方が良いかもしれません。

このツールの使い方

ダウンロードと設置

このFAQ更新ツールを使うには、下記のボタンからダウンロードして設置して下さい。「すぐ使えるCGI」の「添付ファイル付 ウェブページ更新ツール 大容量版」をベースに使っています。

FAQ更新管理ツール(CMS)ダウンロード ※お試し利用は1ヶ月間無料です。

ダウンロードした後の設置方法は「添付ファイル付 ウェブページ更新ツール 大容量版」の「ステップ by ステップガイド」と同じです(この説明書はダウンロードしたページからリンクでアクセスできます)。

テスト登録

「ステップ by ステップガイド」の「8. 設置完了」まで進んだら、記事を2-3件登録して、デモと同じような表示になるかを確認して下さい。

ページのデザインの変更方法

基本的なデザイン変更方法

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行えます。1のページデザインの基本的な設定方法は「デザイン変更チュートリアル」をご覧下さい。

ただし、このページからダウンロードできるサンプルには製品の初期設定に加えていくつか追加の変更がされています。例えば管理画面はスマホ対応のレスポンシブWebデザインに変更してあり、また、カテゴリ分類表示のための設定もされています。

このページでは、このツールに特有の以下の変更方法についてご説明します。

  1. ページ構成の選択とファイル名の変更
  2. カテゴリフィルタの削除
  3. カテゴリの追加と削除、変更(アイコンの変更と名前の変更)
  4. 折り畳み方式をやめる(1ページタイプの場合)
  5. 画像のサムネイル表示サイズを変更する
  6. 画像の拡大表示サイズを変更する
  7. 画像を掲載しない
  8. ファイルを掲載しない

ページ構成の選択とファイル名の変更

初期設定では、以下の2つのページ構成が両方書き出されます。

  1ページタイプ 詳細ページタイプ
構成 回答を同じページに表示
(タイトルのクリックでページ内に表示/折りたたみ)
回答を別ページに表示
(タイトルのクリックで別ウィンドウが開く)
目次の初期ファイル名 webdir/index_short.html
※製品の用語で「短い一覧」に該当
webdir/index.html
※製品の用語で「全一覧」に該当

ご希望のタイプを選んでホームページの他のページからリンクしていただきたいのですが、その際、1ページタイプをお使いになる場合は、ファイル名が初期設定の「index_short.html」ではなく「index.html」になるように、下記のように admin/admin.cgi を編集し、ページ名を変更して下さい。青字が変更前、赤字が変更後です。

admin/admin.cgi 変更前

#--------------------------------------------------------[line 155]--
# 一覧のファイル名
#--------------------------------------------------------------------
# 登録記事の全一覧のファイル名です。
# $conf{web_dir} 内に、ここで指定したファイル名で書き出されます。
#
# 一覧の書き出しが不要な場合は、ファイル名を削除して下さい。
# 書き出し不要な場合の設定) $conf{index_filename} = '';

$conf{index_filename} = 'index.html';


	(途中省略)


#--------------------------------------------------------[line 185]--
# 短い一覧のファイル名
#--------------------------------------------------------------------
# 短い一覧のファイル名です。
# $conf{web_dir} 内に、ここで指定したファイル名で書き出されます。
#
# 短い一覧の書き出しが不要な場合は、ファイル名を削除して下さい。
# 書き出し不要な場合の設定) $conf{short_list_filename} = '';

$conf{short_list_filename} = 'index_short.html';

admin/admin.cgi 変更後

#--------------------------------------------------------[line 155]--
# 一覧のファイル名
#--------------------------------------------------------------------
# 登録記事の全一覧のファイル名です。
# $conf{web_dir} 内に、ここで指定したファイル名で書き出されます。
#
# 一覧の書き出しが不要な場合は、ファイル名を削除して下さい。
# 書き出し不要な場合の設定) $conf{index_filename} = '';

$conf{index_filename} = ''; #値を削除します


	(途中省略)


#--------------------------------------------------------[line 185]--
# 短い一覧のファイル名
#--------------------------------------------------------------------
# 短い一覧のファイル名です。
# $conf{web_dir} 内に、ここで指定したファイル名で書き出されます。
#
# 短い一覧の書き出しが不要な場合は、ファイル名を削除して下さい。
# 書き出し不要な場合の設定) $conf{short_list_filename} = '';

$conf{short_list_filename} = 'index.html';

タイプ選択の反映

admin/admin.cgi 変更したら、ファイルをサーバに上書きアップロードして下さい。
その後管理画面の一覧ページにある「再構築(テンプレート変更反映)」ボタンを押すと、1ページタイプのファイルが webdir/index.html として書き出されます。

カテゴリフィルタの削除

カテゴリフィルタを使わない場合は、公開側のテンプレートからリンクを削除して下さい。選んだページ構成によって、下記のファイルが変更対象です。

変更対象ファイル

1ページタイプ templates/article/short_list.html
詳細ページタイプ templates/article/article_list.html

削除対象のコード

対象ファイルに含まれる以下の青字取り消し線の部分が削除対象です。

<h1>よくある質問と回答</h1> <ul class="category-index"> <li><a href="javascript:hide_items('')">[全て]</a></li> <li><a href="javascript:hide_items('category01')">[カテゴリ1]</a></li> <li><a href="javascript:hide_items('category02')">[カテゴリ2]</a></li> <li><a href="javascript:hide_items('category03')">[カテゴリ3]</a></li> <li> </ul> <div class="clear"></div> <ul class="faq-index" id="faq-index"> <!-- article list : generate from article_list.txt --> %_article_list_% </ul>

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

カテゴリの追加と削除、変更(アイコンの変更と名前の変更)

カテゴリの調整は以下の3ポイントに分かれます。順番にご説明します。

  1. アイコン画像の準備(画像ファイルの入れ替え、追加)
  2. カテゴリ名の変更・追加・削除
  3. アイコン画像変更の追加変更に伴うCSSの設定

アイコンの準備

まずは設定するカテゴリを決めて、全てのカテゴリについて同じサイズでアイコン画像を用意しておいて下さい。なお、初期設定のアイコンと違うサイズでも構いません。使用するアイコン画像のサイズが揃っていればOKです。初期設定のアイコン画像とソースファイルは webdir/parts/img/ ディレクトリにあり、そのままでもお使いいただけます。

なお、後でCSS(スタイルシート)に設定しますので、アイコン画像のピクセルサイズを控えておいて下さい。

アイコン画像ファイルの置き場所は初期設定は webdir/parts/img/ ですが、既にサイトに画像フォルダなどがあればそちらに移動して構いません。

カテゴリ名の変更・追加・削除 : 管理画面側

登録できるカテゴリ名の追加変更削除は、templates/admin/2.html を編集して下さい。

ファイル内に以下のようにカテゴリ1、2、3 が指定されていますので、ここを変更して下さい。例えば「カテゴリ1」を変更するのであれば、赤字と青字の部分が変更対象です。

赤字の部分は後でCSSクラス名として使用します。このまま使っても、別のクラス名を付けても構いません。新しくクラス名を付ける場合は、半角英数字で設定して下さい。青字は入力画面に表示されるカテゴリ名です。

[<a href="javascript: set_value('linetext1', 'category01', '')" tabindex="5">カテゴリ1</a>]
[<a href="javascript: set_value('linetext1', 'category02', '')" tabindex="6">カテゴリ2</a>]
[<a href="javascript: set_value('linetext1', 'category03', '')" tabindex="7">カテゴリ3</a>]

カテゴリ名の変更・追加・削除 : ホームページ側

カテゴリの絞込みフィルタを使う場合は、ホームページ側のデザインテンプレートも、初期設定のカテゴリを使用するカテゴリ名に変更して下さい。選んだページ構成によって以下のファイルが編集対象です。

変更対象ファイル

1ページタイプ templates/article/short_list.html
詳細ページタイプ templates/article/article_list.html

変更内容

下記の赤字、青字部分を、管理画面テンプレートで設定したものと対応させて変更して下さい。

<h1>よくある質問と回答</h1> <ul class="category-index"> <li><a href="javascript:hide_items('')">[全て]</a></li> <li><a href="javascript:hide_items('category01')">[カテゴリ1]</a></li> <li><a href="javascript:hide_items('category02')">[カテゴリ2]</a></li> <li><a href="javascript:hide_items('category03')">[カテゴリ3]</a></li> <li> </ul> <div class="clear"></div> <ul class="faq-index" id="faq-index"> <!-- article list : generate from article_list.txt --> %_article_list_% </ul>

アイコン画像の設定

カテゴリ名を変えてアイコン画像ファイルも変更した場合は、webdir/parts/css/common.css にその画像パスを設定して下さい。

ファイル冒頭に以下のような記載があります。管理画面テンプレートに設定した赤字部分と同じものをクラス名として設定して下さい。青字部分は、用意したアイコン画像のパス(URL)に変更して下さい。

.category01 {
	background-image: url(../img/category-1.png);
}
.category02 {
	background-image: url(../img/category-2.png);
}
.category03 {
	background-image: url(../img/category-3.png);
}

アイコン画像のサイズ

設定したカテゴリのためのアイコン画像のサイズを変えた場合は、表示が欠けてしまったり逆に空間が空きすぎたりしないように CSSファイルの設定も変更して下さい。

以下のファイルが変更対象です。

管理画面での表示用 webdir/parts/css/admin.css
ホームページ側の表示用 webdir/parts/css/site.css

それぞれ、以下のように設定がありますので、青字の部分を、作成したアイコン画像の幅に合わせて変更して下さい。なお、以下の設定では使用しているアイコンのサイズは幅45px、高さ20pxです。

管理画面での表示設定(webdir/parts/css/admin.css)

/* 管理画面 のカテゴリ表示 */
.category-cell {
	width: 50px;  /* 表示するアイコンの幅に準じて設定 */
	background-repeat: no-repeat;
	background-position: center center;
}
.category-image {
	display: inline-block;
	width: 50px;  /* 表示するアイコンの幅に準じて設定 */
	height: 20px;  /* 表示するアイコンの高さに準じて設定 */
	background-repeat: no-repeat;
	background-position: left bottom;
}

ホームページ側の表示設定(webdir/parts/css/site.css)

/* アイコン表示の設定 */

/* 一覧ページの設定 */
.faq-index .question {
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 50px; /* 表示するアイコンの幅+余白 */
}
/* 詳細ページの設定 */
.cat-icon {
	background-repeat: no-repeat;
	background-position: left center;
	display: inline-block;
	width: 50px; /* 表示するアイコンの幅に準じて設定 */
}

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして変更の確認を行って下さい。

折り畳み方式をやめる(1ページタイプの場合)

1ページに全ての質問と回答を表示する場合で、クリックによる回答表示を行わずに最初から質問と回答を全て表示させておくには、テンプレート templates/article/short_list.txt からそのための設定を削除して下さい。

削除対象のコード

以下の青字取り消し線の部分が削除対象です。

<li class="cat-%_linetext1_%" id="cat-%_d_%">
<h3 class="question %_linetext1_%"> <a href="javascript:toggle_body('%_d_%')" class="toggle">%_subject_% </a></h3>
	<blockquote id="body%_d_%" class="toggle_hidden">
	%_body_%
	 : (省略)
	</blockquote>
</li>

変更の反映

ファイルを変更したら、サーバに上書きアップロードの後、管理画面の一覧から「再構築(テンプレート変更反映)」を行って下さい。

反映の確認

ブラウザのキャッシュをクリアしてからページを再読み込みをして表示を確認して下さい。

画像のサムネイル表示サイズを変更する

ページに表示されているサムネイル画像のサイズを変更するには、admin/admin.cgi の設定を希望のサイズに変更して下さい。詳しくは下記のページをご覧下さい。

画像の縮小をする方法

画像の縮小ができないサーバの場合

サーバによっては画像縮小ができない場合があります。この場合はCSSファイル webdir/parts/css/site.css で調整して下さい。下記のような設定がありますので、赤字部分を追加し、青字部分は希望のサイズに変更して下さい。

/* サムネイル */
.thumbnail {
	float: left;
	margin-right: 20px;
}
.thumbnail img {
	width: 200px;
}

画像の拡大表示サイズを変更する

画像の拡大は「jQuery lightBox」という方法を使っています。拡大表示される画像が大きすぎないように調整が可能です。詳しい方法は下記のページをご覧ください。

jQuery lightBox の使い方

変更対象ファイル

上記のページに説明のある設定を行うファイルは下記の通りです。

1ページタイプ templates/article/short_list.html
詳細ページタイプ templates/article/article_list.html
なお、この方法は表示サイズの調整です。ピクセルサイズを変更する方法は、下記のページをご覧下さい。初期設定では 1200px 四方に収まるように自動縮小されます。

画像の縮小をする方法

画像を掲載しない

画像を使わない場合は管理画面にも表示されないように削除可能です。詳しい方法は下記のページをご覧下さい。

管理画面から画像を削除する方法

ファイルを掲載しない

添付ファイルのアップロードを行わない場合は管理画面にも表示されないように削除可能です。詳しい方法は下記のページをご覧下さい。

添付ファイルのアップロードを行わない設定

さらに詳しく