Bloggerで目次を自動で表示できるようする方法

ぷろんと(@pront_nem)です。
はてなブログからBloggerに乗り換えて少し不便だなって思ったのが目次を作成するのがやや面倒なところです。
HTMLでいちいち書くのも面倒くさいですし、毎回やっていたら無駄に時間がかかってしまいます。
色々と調べてみたら目次を自動で表示させる方法が分かったのでまとめました。

目次を自動で表示させる方法

まずBloggerの管理画面を開き、テーマを選択します。

テーマの画面を開いたらHTMLの編集を選択します。
開いたら<head>タグの後ろにに以下のようなコードを埋め込みます。

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script>
//以下のオプションを好みに合わせて変更して下さい
//オプションの詳しい説明は&#12289;(https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)を参照
var toc_options = {
target: [&quot;h2&quot;, &quot;h3&quot;, &quot;h4&quot;],
autoNumber:  true,
condTargetCount: 2,
insertPosition: &quot;firstHeadBefore&quot;,
showToc: true,
marginTop: &quot;20px&quot;,
marginBottom: &quot;20px&quot;,
indent:  &quot;20px&quot;
};

(function(i){var j=0;document.addEventListener(&quot;DOMContentLoaded&quot;,function(){var p=document.querySelector(&quot;.widget.Blog&quot;);if(p==null||typeof p===&quot;undefined&quot;){reutrn}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length&gt;=toc_options.condTargetCount){var q=c(rootContent);o(q)}});function h(q,p){var u=q.target.length;var t=function(E,D,w){var z=q.target[E];var x=E&lt;u-1?q.target[E+1]:&quot;&quot;;var y=&quot;toc_headline_&quot;+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==&quot;&quot;){return}while(true){if(A==null||typeof A===&quot;undefined&quot;){break}if(b(A)==z){break}if(b(A)==x){t(E+1,A,F)}else{var B=A.getElementsByTagName(x);for(var C=0;C&lt;B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g(&quot;ROOT&quot;,&quot;&quot;,0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s&lt;v.length;s++){t(0,v[s],r,&quot;&quot;)}return r}function c(s){var w=document.createElement(&quot;div&quot;);w.classList.add(&quot;b-toc-container&quot;);w.style.marginTop=toc_options.marginTop;w.style.marginBottom=toc_options.marginTop;var x=document.createElement(&quot;p&quot;);var v=document.createElement(&quot;span&quot;);var t=document.createElement(&quot;span&quot;);var q=document.createElement(&quot;a&quot;);v.innerText=&quot;目次[&quot;;t.innerText=&quot;]&quot;;q.href=&quot;javascript:void(0);&quot;;x.appendChild(v);x.appendChild(q);x.appendChild(t);var r=function(y){var p=typeof y===&quot;boolean&quot;?y:e(w,&quot;hide&quot;);if(p){q.innerText=&quot;非表示&quot;;w.classList.remove(&quot;hide&quot;)}else{q.innerText=&quot;表示&quot;;w.classList.add(&quot;hide&quot;)}};q.addEventListener(&quot;click&quot;,r);r(toc_options.showToc);var u=document.createElement(&quot;ul&quot;);s.children.forEach(function(y,p){n(u,y,(p+1)+&quot;&quot;)});w.appendChild(x);w.appendChild(u);return w}function n(s,u,w){var p=document.createElement(&quot;li&quot;);var q=document.createElement(&quot;a&quot;);p.style.paddingLeft=toc_options.indent;q.href=&quot;#&quot;+u.id;if(toc_options.autoNumber){var t=document.createElement(&quot;span&quot;);t.classList.add(&quot;toc-number&quot;);t.innerText=u.nestLevel&lt;=2?w+&quot;.&quot;:&quot;&quot;}var v=document.createElement(&quot;span&quot;);v.classList.add(&quot;toc-text&quot;);v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length&gt;0){var r=document.createElement(&quot;ul&quot;);p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+&quot;.&quot;+(x+1))})}}function o(q){var r=null;var p=document.querySelector(&quot;.widget.Blog&quot;);if(toc_options.insertPosition==&quot;firstHeadBefore&quot;||toc_options.insertPosition==&quot;firstHeadAfter&quot;){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition==&quot;top&quot;){r=p}}if(r==null){return}if(toc_options.insertPosition==&quot;firstHeadBefore&quot;){k(r,q)}else{if(toc_options.insertPosition==&quot;firstHeadAfter&quot;){a(r,q)}else{if(toc_options.insertPosition==&quot;top&quot;){k(r,q)}}}}function g(q,r,p,s){return{tagName:q,text:r,children:[],nestLevel:p,id:s}}function m(p){return p.innerText}function f(p){return p.nextElementSibling}function d(p){return p.previousElementSibling}function b(p){return p.tagName.toLowerCase()}function e(p,q){return p.classList.contains(q)}function l(p){return p.parentNode}function a(q,s){var r=l(q);var p=f(q);if(r!=null&amp;&amp;p!=null){r.insertBefore(s,p)}}function k(p,r){var q=l(p);if(q!=null){q.insertBefore(r,p)}}})(window);

</script>
<style type=’text/css’>
.b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container&gt;ul{margin:15px 0 0}.b-toc-container.hide&gt;ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:&quot;&quot;}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400}.b-toc-container ul li .toc-number{margin:0 .5em 0 0}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>
</b:if>

追加したらテーマを保存します。

表示されているか確認してみよう!

これで無事表示されるようになりましたね。
自動なのでいちいちコードを書く必要も無くなりましたし、コードをコピペしてテーマに貼るだけなので簡単にできました。
Bloggerははてなブログと違ってカスタマイズしながら色々と形を変えていくのが楽しいですね。

コメント

タイトルとURLをコピーしました