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

トグルボタンで要約を表示してから詳細ページにリンクする目次の作成

最終更新日: 2015-01-29
サマリー(要約)を確認できる目次
CMS「すぐ使えるCGI」でホームページを管理する際に、サマリー(要約、抜粋、さわり)を確認してから詳細ページ(記事ページ)に移動する目次の作成方法をご紹介します。

トグルボタン表示のメリット

この方法で目次を作ると、ボタンをクリックすると折りたたまれていた要約が表示されます。一旦その場で内容を確認してから詳細ページへアクセスする事が可能です。

スマートフォンなどのモバイル環境では、無駄な通信を行わずにユーザに興味のあるページを見つけてもらう事ができます。

このページでご紹介する方法は jQuery を使わず軽量です。

トグルボタンでの要約表示が可能な「すぐ使えるCGI」製品

トグルボタンでの要約表示の設定方法

準備:製品の設置

これから製品をお試しされる方は先に上のリンクから製品をダウンロードの上設置を行って下さい。設置方法は、ダウンロードが完了したページに「ステップ by ステップガイド」のリンクが表示されますので、これを読みながら行って下さい。お試しは1ヶ月間無料です。

設置が終わったら、テストで記事を1件登録して、ページが書き出されることを確認して下さい。

templates/article/article_list.html に CSS を追加

無事に記事が登録できるようになったら、デザインテンプレートを編集します。テンプレート templates/article/article_list.html の <head> タグ内に、以下のスタイル(CSS)設定を追加して下さい。

※「すぐ使えるCGI」の設置が初めての方は、先にデザインテンプレートの解説をご覧下さい。

<style type="text/css">
.hide_onload {
    display: none;
}
</style>


templates/article/article_list.html に JavaScript を追加

引き続き同じテンプレートファイル templates/article/article_list.html を編集し、</body> の直前に以下の JavaScript を追加して下さい。

<script type="text/javascript">
function show_summary(d){
    var SummaryPart = document.getElementById('summary'+d);
    var ToggleOnPart = document.getElementById('on'+d);
    var ToggleOffPart = document.getElementById('off'+d);
    ToggleOnPart.style.display = 'none';
    ToggleOffPart.style.display = 'inline';
    SummaryPart.style.display = 'block';
}
function hide_summary(d){
    var SummaryPart = document.getElementById('summary'+d);
    var ToggleOnPart = document.getElementById('on'+d);
    var ToggleOffPart = document.getElementById('off'+d);
    ToggleOnPart.style.display = 'inline';
    ToggleOffPart.style.display = 'none';
    SummaryPart.style.display = 'none';
}
</script>


templates/article/article_list.txt の編集

次にテンプレート templates/article/article_list.txt を編集して、サマリー(要約)の表示とその展開のためのリンク、およびたたむためのリンクを追加します。ファイル全体が以下のようになるように編集して下さい。

templates/article/article_list.txt 編集例(全体)

<li>
	<span id="on%_d_%">[<a href="javascript:show_summary('%_d_%')">+</a>]</span>
	<span id="off%_d_%" class="hide_onload">[<a href="javascript:hide_summary('%_d_%')">-</a>]</span>
	[%_yyyy_%-%_mm_%-%_dd_%]
	<a href="%_d_%.html">%_subject_%</a>
		<blockquote class="hide_onload" id="summary%_d_%">
			%_summary_%
			[<a href="%_d_%.html">詳細</a>]
		</blockquote>
</li>

トグルボタンの変更

トグルボタンは表示を開くボタンが上記の青字部分、表示を畳むボタンが赤字部分です。それぞれ [+] と [-] の表示になるようになっていますが、これはアイコン画像などに変更しても構いません。表示位置の変更も可能です。その際、以下の点は変更せずに残して下さい。

  • 開くボタンは <span id="on%_d_%"> と </span> で囲う
  • 開くボタンのリンクの href 属性は href="javascript:show_summary('%_d_%')" にする
  • 閉じるボタンは <span id="off%_d_%" class="hide_onload"> と </span> で囲う
  • 閉じるボタンのリンクの href 属性は href="javascript:hide_summary('%_d_%')" にする

ホームページデザインの変更

ボタン以外の部分のページのデザインも適宜変更して下さい。デザイン変更の方法は、ダウンロードした製品の docs/index.html を開いて表示される「デザイン変更チュートリアル」をご覧下さい。

アップロード

編集が終わったら、テンプレートファイルを保存しサーバの同じ位置に上書きアップロードして下さい。

再構築

管理画面一覧の「再構築(テンプレート反映)」ボタンを押すと最新のテンプレートを反映してページが自動更新されます。

表示確認

ブラウザのキャッシュをクリアした後、表示を再読み込みして確認して下さい。

サマリー(要約)の長さの調整

表示されるサマリーの長さは変更できます。詳しい方法は下記ページをご覧下さい。

サマリーの長さ、省略時の記載(「...」)を変更する方法

目次に表示するサマリー(要約)の内容を指定する場合

サマリーは製品の初期設定では記事内容の先頭から自動で切り取られますが、これを手動編集する事もできます。詳しい方法は下記ページをご覧下さい。

サマリーを手動編集する方法

関連リンク

さらに詳しく