« 【MT】ウェブページに「ウェブページと同じタグを持つブログ記事」の一覧を表示させる方法 | メイン | 【MT】 mapperプラグインが表示しなくなったので、対処してみた »

【MT】MTとjQueryを使って、簡単でかっこいい「Q&A(FAQ)」のページを作る方法

企業サイトなどによく「Q&A」のページを付ける場合がありますが、あれを簡単に更新できるようMTを使って構築する方法です。
さらに、jQueryを使って、質問をクリックすると答えがスライドして表示(折りたたみ)するようにします。

参考にさせていただいたサイトはこちら


まず、jQuery tutorial: fancy FAQsからソースをダウンロードします(一番下にダウンロードボタンがあります)
ダウンロードしたファイルを解凍して、faqsフォルダの中の「scripts」フォルダと「images」フォルダをサーバーにアップロードします。

 

 

MTのテンプレートに、以下のように外部スクリプトを読み込ませます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="scripts/utility.js"></script>

 

 

スタイルシートを読ませます。 
      <style type="text/css">
          html{font-size:72.5%}
          body{font-size:1.2em;color:#294f88}
          .sample{margin:30px;border:1px solid #92cdec;background:#d7e7ff;padding:30px 30px 0 30px}
          h1{margin:0;padding:0;font-size:2em;}
          dl{font-size:1.2em;line-height:170%;margin-bottom:20px}
          p{font-size:1.0em;line-height:170%;margin-bottom:20px}
          dl,dt,dd{padding:0;margin:0}
        .faqs{padding-top:20px}
        .faqs dt{background:url(images/q.gif) 0 6px no-repeat;padding:5px 0 15px 30px;position:relative;}
        .faqs dt:hover{cursor:pointer}
        .faqs dd{background:url(images/a.gif) 0 6px no-repeat;padding:0 0 3px 30px;position:relative;color:#333}
        .faqs .hover{color:#990000;text-decoration:underline}
      </style>


 

テンプレート内にhtmlを書き込みます。

基本は以下のようにすることでスライドして表示(折りたたみ)ができます。

<dl class="faqs">
  <dt>質問〇〇〇</dt>
  <dd>回答〇〇〇</dd>
  <dt>質問△△△</dt>
  <dd>回答△△△</dd>
  <dt>質問◇◇◇</dt>
  <dd>回答◇◇◇</dd>
</dl>

 

 

上記ソースをMTで構築し、Q&Aの内容をブログで構築します。
ブログタイトルに「質問」を、本文に「回答」を記述。
カテゴリ分による質問の分類も可能です。

<MTTopLevelCategories>
    <MTSubCatIsFirst><dl class="faqs"></MTSubCatIsFirst>
        <MTIfNonZero tag="MTCategoryCount">
            <h2><MTCategoryLabel></h2>
                    <MTEntries sort_order="ascend">
        <dt><$mt:EntryTitle$></dt>
        <dd><$mt:EntryBody$></dd>
                    </MTEntries>
        </MTIfNonZero>
        <$MTSubCatsRecurse$>
    <MTSubCatIsLast></dl></MTSubCatIsLast>
</MTTopLevelCategories>

 

で、完成するとこんな感じになります。
image

工事・障害情報 (1)
パソコン (13)
フレッツ光プレミアム (3)
ホームページ作成 (8)
ウイルス・スパム対策 (6)
EC-CUBE (12)
Movable Type (11)
接続 (4)
機能 (1)
料金 (1)

About

2013年06月26日 10:52に投稿されたエントリーのページです。

ひとつ前の投稿は「【MT】ウェブページに「ウェブページと同じタグを持つブログ記事」の一覧を表示させる方法」です。

次の投稿は「【MT】 mapperプラグインが表示しなくなったので、対処してみた」です。

他にも多くのエントリーがあります。メインページアーカイブページも見てください。

Powered by
Take-net Service