Bloggerに目次を付ける。ブログが驚異的に読みやすくなった！！

しかし、Bloggerで用意されている標準ウィジェットに「目次を自動生成する機能」が無く物足りなさがあり「目次を自動生成する機能」のプラグインを導入することにしました。

手順

管理画面でテーマを選択　

管理画面でテーマを選択　＞　HTMLを編集　　

下記の導入するHTMLソースを＜/head＞の直前に挿入する
<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
console.log("call func");
$('a[name="more"]').after("<div id='toc' />");
var idcount = 1;
var h2cnt = 0;
var toc = '';
var currentlevel = 0;
$(".post-body h2,.post-body h3,.post-body h4", this).each(function() {
var chapid = "chapter-" + idcount;
$(this).before("<div class='chapter-no' id='" + chapid + "' />");
idcount++;
var level = 0;
var chapNo;
if (this.nodeName.toLowerCase() == "h2") {
level = 1;
h2cnt++;
h3cnt = "";
h4cnt = "";
chapNo = h2cnt + ".";
} else if (this.nodeName.toLowerCase() == "h3") {
level = 2;
h4cnt = "";
chapNo = h3cnt
} else if (this.nodeName.toLowerCase() == "h4") {
level = 3;
chapNo = h4cnt
}
if (currentlevel == level) {
toc += "</li><li>";
}
while (currentlevel < level) {
toc += '<ul class="chapter"><li>';
currentlevel++;
}
while (currentlevel > level) {
toc += "</li></ul><li>";
currentlevel--;
}
toc += '<a href="#' + chapid + '">' + chapNo + $(this).text() + "</a>";
$(this).html($(this).html());
});
while (currentlevel > 0) {
toc += "</li></ul>";
currentlevel--;
}
if ($(".post-body h2")[0]) {
$("#toc").html(toc);
} else {
$('#toc').attr('class', 'no-toc');
}
});
//]]>
</script>
<style><!--
/* 目次のデザイン */
#toc:before{
content:"目次";/*目次のタイトル*/
padding-left:1em;
font-weight:800;
}
#toc{
background-color:#f6f6f6; /*目次の背景色*/
padding:1em;
display:block;
margin:1em 0;
border:1px solid #ebe5e5;/*目次の枠線*/
}
#toc li{list-style:none; margin-bottom:0.2em;}
#toc ul{margin-bottom:0;}
#toc:before{display:block;text-align:center;}
.chapter-no{position: relative;top:-4.5em;
}
--></style>

挿入後HTML

目次タグの挿入

ブログ作成時、HTML画面で記事内の目次を表示させたい箇所に＜div id="toc"＞＜/div＞を挿入すると本文に目次が追加されます。
記事を書いた都度「目次設定をしなければいけない」、手間の様ですが之が逆に素晴らしいプラグインなんです。自由な場所に何カ所でも目次を表示させる事が出来ます。