« ブログのトップページの作成方法 (FC2) | メイン | カテゴリーのリスト化 (ジュゲム) »

カテゴリーのスクリプト化 (ジュゲム)

カテゴリーのスクリプト化にはイロイロと方法があります。
スクリプト(隠れたり・・出て来たり・・・)を紹介します。

css も方法の一つですが、今回は javascript を利用した方法になります。 

、スクリプト本体を記述します。</body>の直前(htmlテンプレートの最後の方ですよ。)に以下のようなJavaScriptを挿入します。
ではコピーして、貼り付けてください。

<script type="text/javascript"> <!-- function InitFoldNavi() { FoldNavigation('newentry','off',false); // 最新エントリ  FoldNavigation('entry' ,'off' ,false); // ページエントリ FoldNavigation('comment' ,'off' ,false); // 最新コメント FoldNavigation('tb' ,'off' ,false); // 最新トラックバック FoldNavigation('archive' ,'off',false); // アーカイブ FoldNavigation('link' ,'off' ,false); // リンク FoldNavigation('profile' ,'off',false); // プロファイル FoldNavigation('category' ,'off' ,false); // カテゴリー FoldNavigation('reco' ,'off',false); // オススメ FoldNavigation('search' ,'off' ,false); // 検索 FoldNavigation('fs1' ,'off',false); // フリースペース1 FoldNavigation('fs2' ,'off',false); // フリースペース2 FoldNavigation('fs3' ,'off',false); // フリースペース3 FoldNavigation('fs4' ,'off',false); // フリースペース4 FoldNavigation('fs5' ,'off',false); // フリースペース5 } function FoldNavigation(idName,initMode,viewNum) { var openMark = 'I open out '; /* 閉じている場合に開くためのマーク */ var closeMark = 'I close it '; /* 開いている場合に閉じるためのマーク */ var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */ var idTitle = Array(idName,'name').join(''); var idList = Array(idName,'list').join(''); var objTitle = this.document.getElementById(idTitle); var objLists = this.document.getElementById(idList); if (!objTitle || !objLists) return; var dispMode = objLists.style.display; if (!dispMode) { var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join(''); var insMark = new Array(); var insText = new Array(); insMark[insMark.length] = Array('<a class="foldmark" href="#" onclick="',tmpText,'" onkeypress="',tmpText,'">').join(''); insMark[insMark.length] = (initMode == 'off') ? openMark : closeMark; insMark[insMark.length] = '</a>'; if (preMark) insText[insText.length] = insMark.join(''); insText[insText.length] = objTitle.innerHTML; if (viewNum) { var objItems = objLists.getElementsByTagName('li'); insText[insText.length] = Array(' <span>(',objItems.length,')</span>').join(''); } if (!preMark) insText[insText.length] = insMark.join(''); objLists.style.display = (initMode == 'off') ? 'none' : 'block'; objTitle.innerHTML = insText.join(''); } else if (initMode == 'chng') { var objMarks = objTitle.getElementsByTagName('a'); for (i=0;i<objMarks.length;i++) { if (objMarks[i].className == 'foldmark') { objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark; } } objLists.style.display = (dispMode == 'none') ? 'block' : 'none'; } } InitFoldNavi(); // ナビゲーションの折り畳み // --> </script>

、各リストにidを付けます。ここからはテンプレートによって少し違いますよ。以下のタグは例です。必要な部分は。idの部分ですよ。

<!-- ▼ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->
<!-- BEGIN calendar -->
<div class="linktitle"><a href="./?month={calendar_prev_yearmonth}" title="前月">▼</a> {calendar_str_yearmonth} <a href="./?month={calendar_next_yearmonth}" title="次月">▲</a></div>
<div class="calendar">{calendar_only}</div>
<!-- END calendar -->
<!-- ▲ JUGEMの独自タグを使用しています。ロリポブログ場合はお使いのブログのタグと置き換えてください。 -->


<!-- search -->
<div class="linktitle" id="searchname">SEARCH</div>
<div class="linktext" id="searchlist">
<form method="get" action="" class="search_form">
<input id="search" name="search" size="20" style="width:140px" class="form" />
<input type="submit" value="?" class="button2" />
</form>
</div>
<!-- /search/ -->

<!-- BEGIN latest_entry -->
<div class="linktitle" id="entryname">ENTRIES</div>
<div class="linktext" id="entrylist">{latest_entry_list}</div>
<!-- END latest_entry -->

<!-- BEGIN category -->
<div class="linktitle" id="categoryname">CATEGORIES</div>
<div class="linktext" id="categorylist">{category_list}</div>
<!-- END category -->


<!-- BEGIN link -->
<div class="linktitle" id="linkname">LINKS</div>
<div class="linktext" id="linklist">{link_list}</div>
<!-- END link -->


<!-- BEGIN profile -->
<div class="linktitle" id="profilename">PROFILE</div>
<div class="linktext" id="profilelist">{user_list}</div>
<!-- END profile -->

<!-- BEGIN archives -->
<div class="linktitle" id="archivename">ARCHIVES</div>
<div class="linktext" id="archivelist">{archives_list}</div>
<!-- END archives -->


<!-- BEGIN recent_comment -->
<div class="linktitle" id="commentname">COMMENTS</div>
<div class="linktext" id="commentlist">{recent_comment_list}</div>
<!-- END recent_comment -->

<!-- BEGIN recent_trackback -->
<div class="linktitle" id="tbname">TRACKBACK</div>
<div class="linktext" id="tblist">{recent_trackback_list}</div>
<!-- END recent_trackback -->


<div class="linktitle" id="reconame">RECOMMEND</div>
<!-- BEGIN amazon -->
<div class="linktext" id="recolist">{amazon_item}</div>
<!-- END amazon -->

<!-- フリースペース -->
<!-- BEGIN freespace1 -->
<div class="linktitle" id="fs1name">{freespace_title1}</div>
<div class="linktext" id="fs1list">{freespace_contents1}</div>
<!-- END freespace1 -->

<!-- BEGIN freespace2 -->
<div class="linktitle" id="fs2name">{freespace_title2}</div>
<div class="linktext" id="fs2list">{freespace_contents2}</div>
<!-- END freespace2 -->

<!-- BEGIN freespace3 -->
<div class="linktitle" id="fs3name">{freespace_title3}</div>
<div class="linktext" id="fs3list">{freespace_contents3}</div>
<!-- END freespace3 -->

<!-- BEGIN freespace4 -->
<div class="linktitle" id="fs4name">{freespace_title4}</div>
<div class="linktext" id="fs4list">{freespace_contents4}</div>
<!-- END freespace4 -->

<!-- BEGIN freespace5 -->
<div class="linktitle" id="fs5name">{freespace_title5}</div>
<div class="linktext" id="fs5list">{freespace_contents5}</div>
<!-- END freespace5 -->
<!-- /フリースペース/ -->

、完了

と、手順は二つですね・・・更新が出来たら確認してみてください。
スクリプトにはイロイロと種類があるので・・・
また、いつか紹介したいと思います(^^;

日時: 2007年03月03日 15:10

|

トラックバック

このエントリーのトラックバックURL:
http://realization-power.com/cgi/mt/mt-tb.cgi/364

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)