Bloggerで記事中に目次を表示させるカスタマイズ方法

スポンサーリンク

なぜ目次が必要なのか？

目次が必要かどうかに賛否両論はありますが、ボクは「How to系の記事が多めのブログであれば、必須」だと思っています。

ボクもそうなのですが、How to系の記事って、その記事に書かれている全部の内容を知りたいわけではなく、一部だけの情報を知りたい、と言うことが多々あります。

その時に、わざわざスクロールして自分のお目当ての情報を探すのはちょっと面倒ですが、目次があればクリック1発で目的の情報まで届くので、ユーザーにとって便利ですよね。

本当に些細なことですが、こんな所を徹底するかどうかでブログの良し悪しも決まってくるし、意外にも重要なポイントだったりします。

（とは言いつつも、このブログでは目次を付けていないのですが。）

bloggerに目次を付ける方法

今回の説明では、blogger公式の「シンプルテンプレート（白）」を例にして進めていきますが、基本的にはどんなテンプレートでも使えることができます。

ちなみに、今回のカスタマイズでは、記事を書く時にmoreタグ（続きを読む）を付けている人しか上手く動作しないので、もしmoreタグを使っていない人は、少々面倒ですが付けるようにしましょう。

また今回のカスタマイズは、「10251」さんの「jQueryで目次と「目次に戻る」を自動生成（プラグイン無し） | 10251」の記事が大いに参考になりました。カスタマイズ法だけでなく、「このコードの意味は何なのか？」まで親切に解説してくれている良記事なので、jQueryを勉強したい人は読むべきだと思います。

では、実際にどのようにカスタマイズしていくのかの説明に移ります。

１．</head>と</html>の真上にjQueryコードを追加する

まずは、テンプレート内にある

</head>

のコードを探しましょう。キーボードの「Ctrl」と「F」キーを同時押しすると検索窓が表示されるので、そこに「</head>」と入力してEnterを押すと、簡単に見つけられます。

以下紹介するコードも、同じ要領でOKです。 そして、</head>を見つけたら、その真上に以下のコードをコピペします。

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
 $(document).ready(function(){ $(&#39;a[name=&quot;more&quot;]&#39;).before($(&#39;#Table-of-Content&#39;).html()); 
 $(&#39;#Table-of-Content&#39;).html(&#39;&#39;); }); 
 </script>

そして、今度はテンプレートの最後にある

</html>

の真上に以下のコードをコピペします。

<script>
//<![CDATA[
$(function(){
    var idcount = 1;
    var toc = '';
    var currentlevel = 0;
    $(".post-body h2,.post-body h3,.post-body h4",this).each(function(){
        this.id = "chapter-" + idcount;
        idcount++;
        var level = 0;
        if(this.nodeName.toLowerCase() == "h2") {
            level = 1;
        } else if(this.nodeName.toLowerCase() == "h3") {
            level = 2;
        } else if(this.nodeName.toLowerCase() == "h4") {
            level = 3;
        }
        while(currentlevel < level) {
             toc += '<ol class="chapter">';
            currentlevel++;
        }
        while(currentlevel > level) {
            toc += "</ol>";
            currentlevel--;
        }
        toc += '<li><a href="#' + this.id + '">' + $(this).html() + "</a></li>\n";
    });
    while(currentlevel > 0) {
        toc += "</ol>";
        currentlevel--;
    }
    if($(".post-body h2")[0]) {
    $("#toc").html(toc);
    
    } 
else{
    $('#toc').attr('class', 'no-toc');
    }
});
//]]>
</script>

このコードは「保存」を押した後に、テンプレート内の別の場所に記述が移動している場合がありますが、それはBloggerの仕様なので、気にする必要がありません。

２．<data:post.body/>の真下にコピペする

1番の作業が終わったら、今度は

<data:post.body/>

のコードを見つけましょう。

このコードは「記事本文を表示させるためのタグ」で、bloggerでは、１つのテンプレートに２つのコードが付いている場合が多いです。 そして、上のコードを見つけたら、以下のコードを真下にコピペします。2つある場合は、両方とも同じ作業を行ってください。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <div id='Table-of-Content'>
  <div id="toc"></div>
 </div>
</b:if>

ちなみに、

<b:if cond='data:blog.pageType == &quot;item&quot; '>

と言うコードは、「もし現在のページが、記事ページの時に表示してね」と言う意味で、bloggerのカスタマイズで超頻繁に出現します。

３．CSSで目次のデザインを整える

ここまでの手順を行うと、記事ページに目次が表示されるようになっています。

しかし、このままの状態だと、目次と言うよりは「謎のリンクの羅列」としか見えないので、CSSでデザインを整えてカッコいい目次にしましょう。 そのためにもテンプレート内にある

]]></b:skin>

と言うコードを見つけて、以下のコードを真上にコピペします。

/*  目次のデザイン  */
  #toc:before{
  content:"記事の目次";/*目次のタイトル*/
  padding-left:15px;
  font-weight:800;
  }
 #toc{
 background-color:#f9f9f9; /*目次の背景色*/
 padding:10px;
 font-size:14px;
 margin:30px 0;
 display:block;
width:80%;
 border:1px solid #e6e6fa;/*目次の枠線*/
 }
 #toc li{
margin-bottom: 10px;
    font-size: 15px;
}
 #toc ol{
margin-bottom:0;
padding: 5px 10px 5px 30px;
}
#toc:before{
display:block;
font-size:16px;
text-align:center;
}
#toc a{
color:#666;
}
#toc a:hover{
color:#008ec2;
}

完成したのが、こちらの目次。あとは自分好みの目次に、じゃんじゃんカスタマイズするのみです。  

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ！