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

ホームページ折りたたみ用のCSSとJavaScript

最終更新日: 2016-05-20

CMS「すぐ使えるCGI」でホームページにお知らせや更新履歴などを掲載する際に、クリックすると詳細の表示をON/OFF(表示したり隠したり)できる折りたたみリスト(アコーディオン)の作成方法をご紹介します。

折りたたみ式お知らせホームページの概要

折りたたみ式のリスト(アコーディオン)

「折り畳み式」というのは、クリックする事によって、その場で詳細が表示されたり、また隠れたりする一覧の事です。JavaScriptとCSS(スタイルシート)の組み合わせで動作します。

このページでご紹介する方法は、jQuery などの JavaScript ライブラリを使いません。軽量でスマホ用ページなどにも適しています。

2つの動作パターン

ページのデザインのパターンは2種類あります。

アイコンをクリックしてお知らせ詳細内容を表示する折りたたみ式ホームページ

一つは、アイコンをクリックするとアイコンがそれに合わせて変わるパターンです。例えば表示前は 「+」 だった場所に、詳細表示中は 「-」 が表示されます。

タイトルをクリックしてお知らせ詳細内容を表示するアコーディオン方式ホームページ

二つ目は、タイトルをクリックして詳細を表示させ、もう一度タイトルをクリックすると詳細が隠れるパターンです。

折りたたみ式ホームページの使いどころ

折りたたみ式(アコーディオン式)ホームページは、以下のようなページで効果的です。

長すぎるページの調整

折りたたみ式のページであれば、ページの掲載内容がたまっていき1ページの表示件数が長くなってしまった場合に表示を見やすくすることができます。

特に、「すぐ使えるCGI」の従来版(エントリー版)には目次ページ分割の機能が無いので、従来版を使っていて登録件数が増えページが予想外に長くなってしまった場合は、折りたたみ式に切り替えると、あまりスクロールをしなくてもホームページに掲載されているお知らせの全体が見渡せるようになります。

スマホ(スマートフォン)ページの見やすさ改善

また、スマホ(スマートフォン)の場合はもともと画面が小さいので、「すぐ使えるCGI」の大容量版でページ分割ができる場合でも、まずタイトルを表示しユーザが選んだものだけ詳細を表示するようにすれば、表示が見やすくなります。

モバイル環境での表示速度改善

この他、折りたたみ方式には画面の見やすさ以外にももう一つメリットがあります。それは、詳細内容表示の際に再度Webサーバにアクセスしなくても済む点です。現在利用数が伸びているスマートフォンやタブレットなどのモバイル環境では、オフィスや家庭でのネットワーク環境に比べてやはり通信速度が遅くなります。このため、Webサーバへアクセスしなければならない回数が多いとその度に時間がかかり、Webサイトの見やすさが失われてしまいます。

折りたたみ方式にすると1回Webサーバにアクセスしてタイトルを表示した後、詳細内容表示の際に再度サーバにアクセスする必要が無くなりますので、素早く内容が表示されてWebサイトの使いやすさも向上します。

折りたたみ式お知らせホームページのオンラインデモ

折りたたみ式ホームページの動きは以下のオンラインデモをご覧下さい。デモの製品はダウンロードしてすぐ使えます。

アイコンをクリックすると詳細が表示されるパターン

アイコンをクリックしてお知らせ詳細内容を表示する折りたたみ式ホームページ

タイトルの脇にある小さなマーク(「+」)をクリックすると詳細が表示されるパターンです。詳細が表示されている間は違うマーク(「-」)を表示して、今度はそのマークのクリックで詳細を折たたむ事ができます。

マークを画像(アイコン)にしたり、色やフォントサイズの変更が可能です。画像とファイルのアップロードも可能です。

表示オンラインデモ 管理画面オンラインデモ

タイトルをクリックすると詳細が表示されるパターン

タイトルをクリックしてお知らせ詳細内容を表示するアコーディオン方式ホームページ

タイトルのリンクをクリックすると詳細が表示され、再度タイトルをクリックするとたたまれるパターンです。画像とファイルのアップロードも可能です。

表示オンラインデモ 管理画面オンラインデモ

jQuery の使用について

このページでご紹介する折りたたみのための JavaScript では、jQuery などのライブラリを使いません。軽量ですので携帯端末などにも適しています。しかしながら、このページからダウンロードできるサンプルに関しては、画像のライトボックス表示(拡大表示)のために jQuery を使用しています。


折りたたみ式お知らせホームページの作成方法

デモの製品はダウンロードしてすぐに同じように使えますが、お手元の製品をご利用になる場合は下記の通りテンプレートを編集して下さい。元の製品コードは異なりますので、コードをそのままコピーしたりせず、ポイントだけかいつまんで編集して下さい。

準備:「すぐ使えるCGI」の設置

まず準備として、製品をダウンロードしてサーバに設置して下さい。テストは無料でご利用いただけます。設置の「ステップ by ステップガイド」はダウンロードが完了した画面にリンクが表示されます。

テスト登録

テストデータとして記事を1件登録して、管理画面が正常に動作する事を確認して下さい。

折りたたみ式ホームページの作成の手順概要

折りたたみ式ホームページの作成の手順は以下の通りです。

  1. テンプレートの編集
  2. テンプレートのアップロード
  3. 再構築

最初の「テンプレートの編集」が、アイコンをクリックするパターンとタイトルをクリックするパターンで違いますので、この部分を別々にご説明します。

折りたたみ式お知らせホームページのためのテンプレートの編集方法

では各パターンの折りたたみ式ページ用にテンプレートを編集していきますが、どちらのパターンも編集する内容は以下の2点です。順番にご説明します。

  1. CSS の組み込み
  2. クリックで表示/隠すためのリンクの設定とタグ付
  3. JavaScript の組み込み

アイコンをクリックするパターンの編集方法

※タイトルをクリックするパターンはこちら

CSS の組み込み

テンプレート templates/article/article_list.html 開いて、<head> と </head> の間に以下のコードを追加して下さい。下記は動作上必要な部分のみ記載しています。必要なスタイル設定は適宜追加して下さい。また、別ファイルにCSS設定を記載しても構いません。

このページからダウンロードした製品サンプルの場合、この設定は webdir/parts/css/sugu-162-show-hide.css にあります。

<style type="text/css">
/* ページ表示時に隠す要素に付ける */
.hide-onload {
	display: none !important;
}
</style>

クリックで表示/隠すためのリンクの設定とタグ付

次に、クリックして表示したり隠したりするための ID属性やCSSクラス属性を付けていきます。テンプレート templates/article/article_list.txt を編集して下さい。

(※これは、アイコンをクリックするパターンの説明です。タイトルをクリックするパターンはこちら。)

ポイントは以下の3点です。サンプルコードの下に補足説明をします。元のファイルはお使いの製品によって異なりますので、ポイント部分だけ変更を加えて下さい。
  1. 最初に表示した時には隠しておく部分にCSSクラス「hide-onload」を設定(赤字)
  2. 詳細内容部分と「+」「-」のリンクに ID属性を付ける(青字)
  3. クリックした時に実行される JavaScript を設定(黒太字)
<div class="sugu-entry">
    <a name="%_d_%"></a>
    <div class="title">

    <span class="date">[%_yyyy_%-%_mm_%-%_dd_%]</span>
    <h2>%_subject_%</h2>
    <span class="toggle" id="toggle-btn-on-%_d_%">[<a href="javascript:show_body('%_d_%')">+</a>]</span>
    <span class="toggle hide-onload" id="toggle-btn-off-%_d_%">[<a href="javascript:hide_body('%_d_%')">-</a>]</span>

    </div>
    <blockquote id="body-%_d_%" class="hide-onload">
    %_body_%
    </blockquote>
</div>

最初に表示した時には隠しておく部分にCSSクラス「hide-onload」を設定(赤字)

最初にページが表示された時には隠しておく部分、つまり、クリックした時に初めて表示される部分にはCSSクラス設定「class="hide-onload"」を指定します。詳細を隠すためのリンク(「-」)と詳細内容は初めは表示しませんので、上の例ではこの2か所に設定しています。

詳細内容部分と「+」「-」のリンクに ID属性を付ける(青字)

クリックするアイコン(マーク)部分を<span>等で囲い ID属性を付けます。なお、サンプルコードの中の「+」「-」部分は、アイコン画像などに差し替えて構いません。

クリックした時に実行される JavaScript を設定(黒太字)

「+」「-」のリンクには、クリックした時に実行される表示調整用の JavaScript を設定しておきます。

以上3点の編集が終わったら、「JavaScript の組み込み」に進んで下さい。

タイトルをクリックするパターンの編集方法

※ここはタイトルをクリックするパターンの説明です。アイコンをクリックするパターンはこちら

CSS の組み込み

テンプレート templates/article/article_list.html 開いて、<head> と </head> の間に以下のコードを追加して下さい。下記は動作上必要な部分のみ記載しています。必要なスタイル設定は適宜追加して下さい。また、別ファイルにCSS設定を記載しても構いません。

このページからダウンロードした製品サンプルの場合、この設定は webdir/parts/css/sugu-162-show-hide.css にあります。

<style type="text/css">
/* ページ表示時に隠す要素に付ける */
.hide-onload {
	display: none !important;
}
/* リンク表示がうるさくなりすぎないように設定 */
.toggle-title a
,.toggle-title a:hover
,.toggle-title a:visited
{
	text-decoration: none;
	color: black;
}
.toggle-title a:hover {
	text-decoration: underline;
}
</style>

クリックで表示/隠すためのリンクの設定とタグ付

次に、クリックして表示したり隠したりするための ID属性やCSSクラス属性を付けていきます。テンプレート templates/article/article_list.txt を編集して下さい。

(※これは、タイトルをクリックするパターンの説明です。アイコンをクリックするパターンはこちら。)

ポイントは以下の4点です。サンプルコードの下に補足説明をします。元のファイルはお使いの製品によって異なりますので、ポイント部分だけ変更を加えて下さい。
  1. 1件が一つの<div>に収まるようにし、ID属性と CLASS属性を設定(緑字)
  2. リンクの表示調整のためのCLASS属性を設定(青字)
  3. タイトルに、クリックした時に実行される JavaScript を設定(青字)
  4. 詳細部分に ID属性と CLASS属性を設定(赤字)
<div class="sugu-entry" id="e%_d_%">
    <div class="title">
    <span class="date">[%_yyyy_%-%_mm_%-%_dd_%]</span>
    <h2 class="toggle-title"><a href="javascript:toggle_body('%_d_%', false)">%_subject_%</a></h2>
    </div>
    <blockquote id="body-%_d_%" class="hide-onload">
    %_body_%
    </blockquote>
</div>

1件が一つの<div>に収まるようにし、ID属性と CLASS属性を設定(緑字)

JavaScript からクラス属性やID属性を見て表示のコントロールをするので、1件分の一番外側のタグにそれらを追加します。もし1件分が一つの <div> タグ内に収まっていなかったら、タグ自体を追加して下さい。

リンクの表示調整のためのCLASS属性を設定(青字)

折りたたみのスイッチにするリンクが訪問済みリンクとして色が変わってしまわないように、設定しますので(上記CSS参照)、指定用のクラス「toggle-title」を追加します。

クリックした時に実行される JavaScript を設定(青字)

タイトルに、クリックした時に実行される JavaScript を設定します。

タイトルをクリックして記事を表示した時に他の記事を閉じるかどうかの設定

アコーディオン式の動作オプション:他を折りたたむか、開いたまま残す
タイトルに設定した JavaScript の青字内の「false」を「true」にすると、一つの記事の記事内容を表示させた時に他の記事の内容は全て自動的に折りたたまれます。

詳細部分に ID属性と CLASS属性を設定(赤字)

詳細内容は初めは表示しませんので隠しておくためのCSSクラス「hide-onload」を追加します。また、表示のON/OFFのために ID属性が必要ですので、ID属性を付けて下さい。

以上2点の編集が終わったら、「JavaScript の組み込み」に進んで下さい。

JavaScriptの組み込み

※以下の手順は、アイコンをクリックするパターン、タイトルをクリックするパターンの両方で共通です。

テンプレート templates/article/article_list.html 開いて、終了 body タグ </head> の直前に以下のコードを追加して下さい。太字の部分は、上の説明のサンプルから変えた設定があれば変更して下さい。コードを別ファイルに保存して <script src="..."> で読み込んでも構いません。

このページからダウンロードした製品サンプルの場合、この設定は webdir/parts/js/sugu-162-show-hide.js にあります。

<script type="text/javascript">

var idFmt = new RegExp("e(\\d+)$", "i"); // に付けたID属性から記事番号を取り出す正規表現
var hideClass = 'hide-onload'; //非表示(display: none)を設定したクラス名
var entryClass = 'sugu-entry'; //記事1件分の一番外側の要素のクラス名

function toggle(TGT, Action){
	if (Action == "show"){
		for (i=0; i<TGT.length; i++){
	 	   document.getElementById(TGT[i]) && document.getElementById(TGT[i]).classList.remove(hideClass);
		}
	} else if (Action == "hide"){
		for (i=0; i<TGT.length; i++){
	 	   document.getElementById(TGT[i]) && document.getElementById(TGT[i]).classList.add(hideClass);
		}
	}
}

function show_target(myURL){
    var indexPound = myURL.lastIndexOf("#");
    if (0 < indexPound && indexPound < myURL.length-1){
        var res = myURL.match(idFmt);
        var myId = RegExp.$1;
        show_body(myId);
    }
}

function show_body(d){
	toggle(['toggle-btn-on-'+d], 'hide');
	toggle(['body-'+d, 'toggle-btn-off-'+d], 'show');
}

function hide_body(d){
	toggle(['toggle-btn-on-'+d], 'show');
	toggle(['body-'+d, 'toggle-btn-off-'+d], 'hide');
}

function toggle_body(d, Accordion){
    var Target = document.getElementById('body-'+d);
    if(!Target){return;}
    if (check_class(Target, hideClass)) {
		toggle(['body-'+d], 'show');
		if (Accordion){
			hide_other(d);
		}
    } else {
		toggle(['body-'+d], 'hide');
    }
}

function check_class(Target, cName){
    var CurrClass = Target.getAttribute("class")||Target.getAttribute("className");
    if (CurrClass.indexOf(cName, 0)>=0) {
    	return true;
    } else {
    	return false;
    }
}

function hide_other(d){
	var Entries = document.getElementsByClassName(entryClass);
	for (i=0; i<Entries.length; i++){
		var res = Entries[i].getAttribute("id").match(idFmt);
	    var myId = RegExp.$1;
	    if (myId != d && !check_class(document.getElementById('body-'+myId), hideClass)) {
			toggle(['body-'+myId], 'hide');
	    }
	}
}
</script>

編集の反映


テンプレートのアップロード

編集が終わったら、編集した以下のテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。ファイルを分けて設定した場合は適宜それらのファイルもアップロードして下さい。

templates/article/article_list.html
templates/article/article_list.txt

再構築

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

表示確認

ブラウザで表示を再読み込みして動作を確認して下さい。

関連リンク

さらに詳しく