長い記事の時に目次があると便利ですよね。
Bloggerでも目次を自動生成する機能を追加することが可能です。
HTMLの編集をガッツリ行うので、慣れてきたら挑戦してみましょう！
目次を自動生成する方法の参考ブログ様
先ず、基本となるプラグインを作成してくれたブログをご確認ください。
参考ブログ様
スケ郎のお話【[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）】
これを応用しているブログも参考にして下さい。
参考ブログ様
moca＊Blogger「Tokyo」【Bloggerで簡単に目次をつける方法】
自ブログでも上記を参考に導入させて頂きました。
HTMLの編集手順
左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。
それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。
HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。
HTMLの編集が終わったらプレビュー画面で確認して、保存をします。
目次を自動生成するためのHTML編集
本項ではやり方と、実際に導入しているコードをお見せしていきます。
HTML編集
先ず</head>で検索をします。
その直ぐ上の部分にコードを挿入します。
当ブログの導入コード
当ブログで導入しているコードは以下になります。
長いですが、コピペすれば当ブログと同じ目次が作成できます。
コメントアウトで日本語の説明も加えて分かりやすくしているので、変更を加える時の参考にしてみてください。
<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<script>
//<![CDATA[
//以下のオプションを好みに合わせて変更して下さい
//オプションの詳しい説明は、(https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)を参照
var toc_options = {
target: ["h2","h3"], /*目次を作成するタグ*/
autoNumber:true, /*連番をつけるtrue つけないfalse*/
condTargetCount:2, /*この数以上の見出しがある場合に目次作成実行*/
insertPosition: "firstHeadBefore", /*目次の表示位置*/
showToc:true, /*目次の開閉*/
width:"auto", /*横幅*/
marginTop:"2em", /*目次の上の余白*/
marginBottom:"5em", /*目次の下の余白*/
indent:"20px", /*インデント幅*/
postBodySelector:".widget.Blog" /*記事本文内にある見出しタグだけを指定*/
};
//これ以降のソースは編集しないでください
(function(i){var j=0;document.addEventListener("DOMContentLoaded",function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p==="undefined"){reutrn}if(toc_options.target.length==0){return}rootContent=h(toc_options,p);if(rootContent.children.length>=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<u-1?q.target[E+1]:"";var y="toc_"+(++j);var F=g(z,m(D),E+1,y);w.children.push(F);D.id=y;var A=f(D);if(x==""){return}while(true){if(A==null||typeof A==="undefined"){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<B.length;C++){t(E+1,B[C],F)}}var A=f(A)}};var r=g("ROOT","",0);var v=p.getElementsByTagName(q.target[0]);for(var s=0;s<v.length;s++){t(0,v[s],r,"")}return r}function c(s){var r=document.createElement("div");r.classList.add("b-toc-container");r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginBottom;if(toc_options.width=="100%"){r.style.display="block"}else{r.style.width=toc_options.width}var q=document.createElement("p");var w=document.createElement("span");var v=document.createElement("span");var u=document.createElement("span");v.classList.add("b-toc-show-wrap");u.classList.add("b-toc-show-wrap");var y=document.createElement("a");w.innerText="目次";v.innerText=" [";u.innerText="]";y.href="javascript:void(0);";q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z==="boolean"?z:e(r,"hide");if(p){y.innerText="非表示";r.classList.remove("hide")}else{y.innerText="表示";r.classList.add("hide")}};y.addEventListener("click",t);t(toc_options.showToc);var x=document.createElement("ul");s.children.forEach(function(z,p){n(x,z,(p+1)+"")});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement("li");var q=document.createElement("a");p.style.paddingLeft=toc_options.indent;q.href="#"+u.id;if(toc_options.autoNumber){var t=document.createElement("span");t.classList.add("toc-number");t.innerText=w}var v=document.createElement("span");v.classList.add("toc-text");v.innerText=u.text;if(toc_options.autoNumber){q.appendChild(t)}q.appendChild(v);p.appendChild(q);s.appendChild(p);if(u.children.length>0){var r=document.createElement("ul");p.appendChild(r);u.children.forEach(function(y,x){n(r,y,w+"-"+(x+1))})}}function o(q){var r=null;var p=document.querySelector(toc_options.postBodySelector);if(toc_options.insertPosition=="firstHeadBefore"||toc_options.insertPosition=="firstHeadAfter"){r=p.querySelector(toc_options.target[0])}else{if(toc_options.insertPosition=="top"){r=p}}if(r==null){return}if(toc_options.insertPosition=="firstHeadBefore"){k(r,q)}else{if(toc_options.insertPosition=="firstHeadAfter"){a(r,q)}else{if(toc_options.insertPosition=="top"){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&&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{
position:relative;
background:rgba(255,255,255,0.1); /*背景色*/
border:0px solid #eee; /*枠線*/
padding:2em; /*枠の内側の文字位置*/
margin-left:auto; /*位置中央寄せ*/
margin-right:auto; /*位置中央寄せ*/
display:table;
font-size:100%; /*フォントサイズ*/
width:75%; /*横幅*/
border-radius:20px; /*角丸*/
}
.b-toc-container p{
text-align:center; /*目次の中央寄せ*/
font-size:1.2em; /*目次のフォントサイズ*/
font-weight:bold; /*目次の太字*/
margin:0 0 10px 0; /*目次の位置調整*/
padding:0;
}
.b-toc-container ul{
list-style-type:none;
list-style:none;
margin:0;
padding:0;
}
.b-toc-container;ul{
margin:0;
}
.b-toc-container.hide > ul {
display:none;
}
.b-toc-container ul li{
margin:0;
padding:0;
list-style:none;
line-height:2em; /*行間*/
}
.toc-number {
font-weight:;
padding-left: 0;
}
.toc-number:after {
content:"\002E";
}
.b-toc-container ul li:after,.b-toc-container ul li:before{
background:0;
border-radius:0;
}
.b-toc-container ul li a{
font-weight:;
display:flex; /*折返し調整の追記*/
align-items:flex-start; /*折返し調整の追記*/
flex-wrap:nowrap; /*折返し調整の追記*/
}
.b-toc-container ul li .toc-number{
margin:0; /*番号とタグ名の距離*/
white-space:nowrap; /*折返し調整の追記*/
}
.b-toc-container p a {
display:none; /*開閉ボタン非表示*/
}
.b-toc-show-wrap {
display:none; /*開閉ボタン非表示*/
}
</style>
</b:if>
<!-- [END] 目次作成プラグイン-->
当ブログの導入コード解説
基本は参考ブログ様のものになります。
当ブログでは以下のような変更を加えています。
- 目次を作成するタグを見出し(h2)と小見出し(h3)に指定（準見出し(h4)を省きました）
- 背景色は透過の白 → rgba(255,255,255,0.1)
- 枠線なし
- 位置を中央寄せ
- 角は丸め
- [目次]の部分は太文字
- 目次の開閉ボタン消去
見本として本記事の目次を画像にしたものがコチラです。
実物はトップに戻ってご確認ください。
当ブログはシンプルを目指しているので装飾はありませんが、色々とアレンジを加えることも可能ですよ。
目次の自動生成はとても便利！
プラグインを作成くださった方のおかげて、自動で目次を入れられるようになりました。
アレンジも加えやすいので、HTMLの編集に慣れてきたら是非導入してみてください！
当ブログも参考の一助になっていたら幸いです。
