«
»

2012.05.17

jQueryで自動目次作成

jQueryでヘッダーを読み込んで目次を作成します。
ネットにあるサンプルを自分のwordpress用に少し改変。

→長い文章でのサンプル

参考:○LINK:h1からh6の見出しを抽出し、ページ内リンク(toc)を自動生成するjavascript|1bit::memo( http://1bit.mobi/20110106215505.html

変更点・注意点

  • -「$」部分を「jQuery」に変更
  • -こちらのブログ環境にあわせて、h3からのリストを作るよう変更
  • -CSSはwikipediaの目次を参考に
  • -<div class="tocChild">で囲んだ部分の目次を作る
  • 目次表示域は<div id="toc">
  • -(目次を作る範囲が重複しないよう、ブログの記事は「続きを読む」以降にしたほうがいいと思うよ)

ソース

JAVASCRIPT:
  1. jQuery(function(){
  2.     // H1~H6タグから目次を生成する
  3.     var idcount = 1;   
  4.     var toc = '<h2>目次</h2>';
  5.     var currentlevel = 0;
  6.     jQuery(".tocChild :header",this).each(function(){
  7.         this.id = "toc_" + idcount;
  8.         idcount++;
  9.         var level = 0;
  10.         if(this.nodeName.toLowerCase() == "h3") {
  11.             level = 1;
  12.         } else if(this.nodeName.toLowerCase() == "h4") {
  13.             level = 2;
  14.         } else if(this.nodeName.toLowerCase() == "h5") {
  15.             level = 3;
  16.         } else if(this.nodeName.toLowerCase() == "h6") {
  17.             level = 4;
  18.         }
  19.         while(currentlevel <level) {
  20.             toc += "<ol>";
  21.             currentlevel++;
  22.         }
  23.         while(currentlevel> level) {
  24.             toc += "<\/ol>";
  25.             currentlevel--;
  26.         }
  27.         toc += '<li><a href="#' + this.id + '">' + jQuery(this).html() + "<\/a><\/li>\n";
  28.        
  29.         jQuery(this).append(' <a href="#toc" class="toclink">↑<\/a>');
  30.     });
  31.     while(currentlevel> 0) {
  32.         toc += "<\/ol>";
  33.         currentlevel--;
  34.     }
  35.     jQuery("#toc").html(toc);
  36. });

CSS:
  1. #toc {
  2.     border: 1px solid #AAA;
  3.     background-color: #F9F9F9;
  4.     padding: 5px;
  5.     font-size: 95%;
  6.     width: 70%;
  7. }
  8. #toc h2 {
  9.     margin-left:10px;
  10.     font-size: 100%;
  11.     font-weight: bold;
  12.     color: #666666;
  13. }
  14. #toc ol{
  15.     list-style-type: none;
  16.     margin: 6px 0 6px 2em; 
  17. }
  18. a.toclink {
  19.     font-family: "MS Pゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;
  20.     text-decoration: underline;
  21.     font-size: 50%;
  22.     font-weight: normal;
  23. }

Comment & Trackback

Trackback are closed.

No comments.

Comment





XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

コメントリンクを nofollow free に設定することも出来ます。