Blogger：記事に目次をつけたい

こんな感じ↓

  準備

---

テーマのバックアップ

テーマ＞右上のバックアップ/復元＞テーマをダウンロード

---

テーマのHTMLを編集

下記2箇所にソースコードを追加
</head>の上

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
//*************TOC Plugin V2.0 by MyBloggerTricks.com
function mbtTOC2(){var a=1,b=0,c="";document.getElementById("post-toc").innerHTML=document.getElementById("post-toc").innerHTML.replace(/<h([\d]).*?>(.*?)<\/h([\d]).*?>/gi,function(d,e,f,g){return e!=g?d:(e>a?c+=new Array(e-a+1).join("<ol class='point"+a+"'>"):e<a&&(c+=new Array(a-e+1).join("</ol></li>")),b+=1,c+='<li><a href="#point'+b+'">'+f+"</a>",a=parseInt(e),"<h"+e+" id='point"+b+"'>"+f+"</h"+g+">")}),a&&(c+=new Array(a+1).join("</ol>")),document.getElementById("mbtTOC2").innerHTML+=c}function mbtToggle2(){var a=document.getElementById("mbtTOC2"),b=document.getElementById("Tog");"none"===a.style.display?(a.style.display="block",b.innerHTML="hide"):(a.style.display="none",b.innerHTML="show")}
//]]>
</script>

]]></b:skin>の上

/*####TOC Plugin V2.0 by MyBloggerTricks####*/

.mbtTOC2{border:1px solid #a2a9b1;background-color:#f8f9fa;color:#161616;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#f8f9fa; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#161616;padding:0 0 0 15px;}.mbtTOC2 button a {color:#0080ff; padding:0px 2px;cursor:pointer;}

.mbtTOC2 button a:hover{ text-decoration:underline; }

.mbtTOC2 button span {font-size:15px; margin:0px 10px; }



.mbtTOC2 li{margin:10px 0;  }

.mbtTOC2 li a {color:#0080ff; text-decoration:none; font-size:18px; text-transform:capitalize;}

.mbtTOC2 li a:hover {text-decoration: underline;}.mbtTOC2 li li {margin:4px 0px;}

.mbtTOC2 li li a{ color:#a2a9b1; font-size:15px;}



.mbtTOC2 ol{counter-reset:section1;list-style:none}

.mbtTOC2 ol ol{counter-reset:section2}

.mbtTOC2 ol ol ol{counter-reset:section3}

.mbtTOC2 ol ol ol ol{counter-reset:section4}

.mbtTOC2 ol ol ol ol ol{counter-reset:section5}

.mbtTOC2 li:before{content:counter(section1);counter-increment:section1;position:relative;padding:0 8px 0 0;font-size:18px}

.mbtTOC2 li li:before{content:counter(section1) "." counter(section2);counter-increment:section2;font-size:14px}

.mbtTOC2 li li li:before{content:counter(section1) "."counter(section2) "." counter(section3);counter-increment:section3}

.mbtTOC2 li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4);counter-increment:section4}

.mbtTOC2 li li li li li:before{content:counter(section1) "."counter(section2) "."counter(section3) "." counter(section4)"." counter(section5);counter-increment:section5}

/*

.point2 {list-style-type:lower-alpha}

.point3 {list-style-type:lower-roman}

.point4 {list-style-type:disc}

*/

---

ソースの書き換え

複数箇所あり（私の場合は2箇所）

<data:post.body/>
↓
<div id="post-toc"><data:post.body/></div>

テーマを保存

---

  設置方法

目次を表示させる場所に下記コードを挿入

<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()"  id="Tog">hide</a>]</span></button>  <div id="mbtTOC2"></div>
</div>

記事の最後に下記ソースを追加

<script>mbtTOC2();</script>

---

  気をつける事

HTML以外で編集すると余計な改行などが入り目次が表示されなくなる（汗）

もしくは普通に書いて余計な改行を毎回消す、面倒臭いけど・・・・
もっと良い方法をご存知の方コメントお待ちしております。

---

  参考

Bloggerの記事にTable of Contents（目次）を自動生成するプラグインを加える方法