外部スクリプト：リスト要素の省略表示と展開
項目数の多いリストを最初の数件だけ表示させ、残りの部分を表示・非表示させるトグルスイッチを追加します。
特徴
- リスト（
<ul>,<ol>）の<li>要素表示数を制限しスペース効率を高めます。また、ユーザの選択・誘導の手助けになるかもしれません。
- 最初に表示する項目数を指定できます。1ページ内に複数記述も可能です。
<li>要素内のHTMLは自由です。スクリプトによる編集もありません。- スクリプトが実行されると
<li>要素に以下のclassNameが割り当てられます。
- 閉じている項目 →
<li class="hoge js_close2">
- 開いている項目かつ閉じることのできる項目 →
<li class="hoge js_open2">
（hogeは元から設定されているclassNameです。無くてもOK）
- トグルスイッチになる部分のHTMLは以下のようになります。（n は隠されている項目数）
<li class="js_buttom"><a href="#祖父ノード（リスト）のID">..more ( n items)</a></li>
- FC2管理画面からこの予約
className、またはサブクラスにユーザ独自の装飾（フォントサイズ、枠線 など）が行えます。
動作サンプル
例1 ）アーカイブリストを3項目表示。サイドバーにある通常のリストの場合は以下のような表示になります。
月別アーカイブ一覧
例2 ）カテゴリリストを5項目表示。オリジナルのCSSでリストの項目がdisplay: inlineに設定されている（ワンカラム・ラブな）場合は以下のような表示になります。詳しくはこのページのCSS部分を読んでください。
カテゴリ別一覧
注意点
スクリプトオフの環境ではすべて表示されます。実際には隠しているだけなので、ページの読込みを軽くするものではありません。
定義リスト<dl>には未対応です。（需要があればつくるかも）
初期表示項目数の設定について
- 最初に表示する数が全項目数よりも多い場合には何もしません。
- 最初に表示する数が0の場合は
..moreとだけ書き出され全項目表示・非表示のトグルになります。
- 最初に表示する数には‐（マイナス）の値は設定できません。
ダウンロード
> more_list.js
アップロード
- ”FC2管理画面”→”ファイルのアップロード”（ツール）→”アップロードするファイルの選択” と進み、jsファイルをアップロードします。
- ”FC2管理画面”→”テンプレートの設定”（環境設定）→”テンプレートの編集” と進み、現在選択されているスタイルの修正を開きます。
- ”HTMLの編集”の欄を以下のように編集します。（＊ほとんどのテンプレートは1の部分は記述済みです。無い場合のみ必須）
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-jp" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- 追加部分 始まり-->
<meta http-equiv="content-script-type" content="text/javascript" /> > <!-- 1 -->
<!-- 追加部分 終わり-->
<link href="<%css_link>" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<%url>?xml" />
<!-- 追加部分 始まり-->
<script src="<%url>file/more_list.js" type="text/javascript"></script> > <!-- 2 -->
<!-- 追加部分 終わり-->
<title><%blog_name><%sub_title></title>
- 次にスクリプト呼出し側（リストの
</ul>,</ol>要素を閉じた直後）の設定をします。（必須）
<ul
id="archive" > <!-- 1 -->
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>年<%archive_month>月（<%archive_count>）</a></li>
<!--/archive-->
</ul>
<script type="text/javascript">
morelist( "archive" , 3 ); <!-- 2 -->
</script>
- IDがなければ適宜追加すること
- 1のIDと初期表示数を引数にして呼び出すこと
更新日 2005-12-02
作成日 2005-11-27