ホーム / 目次自動生成 /

[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）

2020年9月3日木曜日

Blog Blogger TOC 目次自動生成

enter image description here

この記事では、Bloggerで目次を自動生成する方法を、紹介します。

Bloggerは、無料なのに「広告表示なし」「カスタムドメイン可」「アドセンスも可」など、非常に素晴らしいブログサービスです。

しかし、WordPressの様に、プラグインをインストール出来ない為、Bloggerで用意されている標準ウェジットの機能だけでは機能不足を感じる事があります。

その内の一つに、Bloggerには目次を自動生成する機能がありません。
※ WordPressの場合、Table of Contents Plus (TOC+)というプラグインをインストールすれば、目次が自動生成できます。

今回、Bloggerで目次を自動生成するブラグインを作成しました。
このプラグインを導入する事で、WordPressの「TOC+」プラグインの様に、簡単に目次を自動生成させる事が出来る様になります。

実際、この記事でも下 ↓に表示されている目次は、今回紹介するプラグインで自動生成させています。

特徴

見出しタグ(h2,h3,h4…)を自動的に検出して、目次を自動生成
jQuery不使用 (プレーンな JavaScirpt)
目次の表示/非表示のリンクボタン付き
階層的にヘッダタグ(h2,h3,h4)を組んでも目次化が可能
軽量で圧縮された CSS, JavaScript
オプションで目次の表示内容が制御可能
段落番号を自動付与
Google検索結果のスニペットに目次リンクを表示

プラグインの導入

テーマをバックアップ

念の為、現在のテーマをバックアップしましょう。
バックアップの方法は以下の通りです。

Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
[テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます

HTMLを編集

テーマの画面で、[HTMLの編集] をクリックし、HTMLを表示します
</head>の直前に、以下のコードを追加します

<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
  <script>
    //以下のオプションを好みに合わせて変更して下さい
    //オプションの詳しい説明は、(https://www.sukerou.com/2018/10/blogger-table-of-contents-javascript.html)を参照
    var toc_options = {
      target: ["h2", "h3", "h4"],
      autoNumber:  true,
      condTargetCount: 2,
      insertPosition: "firstHeadBefore",
      showToc: true,
      width: "auto",
      marginTop: "20px",
      marginBottom: "20px",
      indent: "20px",
      postBodySelector: ".widget.Blog"
    };

    //これ以降のソースは編集しないでください
    ;(function(i){var j=0;document.addEventListener(&quot;DOMContentLoaded&quot;,function(){var p=document.querySelector(toc_options.postBodySelector);if(p==null||typeof p===&quot;undefined&quot;){return}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 r=document.createElement(&quot;div&quot;);r.classList.add(&quot;b-toc-container&quot;);r.style.marginTop=toc_options.marginTop;r.style.marginBottom=toc_options.marginTop;if(toc_options.width==&quot;100%&quot;){r.style.display=&quot;block&quot;}else{r.style.width=toc_options.width}var q=document.createElement(&quot;p&quot;);var w=document.createElement(&quot;span&quot;);var v=document.createElement(&quot;span&quot;);var u=document.createElement(&quot;span&quot;);v.classList.add(&quot;b-toc-show-wrap&quot;);u.classList.add(&quot;b-toc-show-wrap&quot;);var y=document.createElement(&quot;a&quot;);w.innerText=&quot;目次&quot;;v.innerText=&quot;[&quot;;u.innerText=&quot;]&quot;;y.href=&quot;javascript:void(0);&quot;;q.appendChild(w);q.appendChild(v);q.appendChild(y);q.appendChild(u);var t=function(z){var p=typeof z===&quot;boolean&quot;?z:e(r,&quot;hide&quot;);if(p){y.innerText=&quot;非表示&quot;;r.classList.remove(&quot;hide&quot;)}else{y.innerText=&quot;表示&quot;;r.classList.add(&quot;hide&quot;)}};y.addEventListener(&quot;click&quot;,t);t(toc_options.showToc);var x=document.createElement(&quot;ul&quot;);x.classList.add(&quot;toc-root-list&quot;);s.children.forEach(function(z,p){n(x,z,(p+1)+&quot;&quot;)});r.appendChild(q);r.appendChild(x);return r}function n(s,u,w){var p=document.createElement(&quot;li&quot;);p.classList.add(&quot;toc-list-item&quot;);var q=document.createElement(&quot;a&quot;);p.style.paddingLeft=toc_options.indent;s.style.paddingLeft=0;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=w+&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;);r.classList.add(&quot;toc-sub-list&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(toc_options.postBodySelector);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>ul{margin:15px 0 0}.b-toc-container.hide>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:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
  </style>
</b:if>
<!-- [END] 目次作成プラグイン-->

コードの挿入位置は、以下のイメージを参考にして下さい。

コードを貼り付けたら、画面上の [テーマを保存] をクリックして、内容を保存します。

以上で、プラグインの導入は完了です。

保存が終わったら、自分のブログを見て下さい。
↓のようなイメージで、目次が表示されていると思います。

目次の表示イメージ

オプション

今回紹介した、目次自動生成プラグインは、WordPressの「TOC+ 」同様、オプションで、目次の表示条件を制御する事ができます。

ここでは、オプションの設定方法と、各オプションの説明を行います。

オプションの設定方法

コピーしたコードに、toc_options = {…} と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更します。

オプションの設定内容は、後述する「各オプションの説明」を参照して下さい。

   //以下のオプションを好みに合わせて変更して下さい
   var toc_options = {
     target: ["h2", "h3", "h4"],
     autoNumber: true,
     condTargetCount: 2,
     insertPosition: "firstHeadBefore",
     showToc: true,
     width: "auto",
     marginTop: "20px",
     marginBottom: "20px",
     indent:  "20px",
     postBodySelector: ".widget.Blog"
   };

各オプションの説明

target

目次を作成する、見出しタグを h1〜h6の範囲で指定します。

autoNumber

目次に、自動的に連番を付けるか指定します。

true を指定した場合、1 → 1.1 → 1.1.1の順に、階層化された連番を自動的に付与します。
false 連番を表示しません。

condTargetCount

目次を表示する、見出の数を指定します。
例えば 2 を指定した場合、targetオプションで指定した、トップレベルの見出しが、２つ以上あるとき、目次が表示されます。

insertPosition

目次の表示位置を、以下の３つから指定します。

値	目次の表示位置
firstHeadBefore	最初の見出しの前
firstHeadAfter	最初の見出しの後
top	記事の最上部

showToc

初期の目次表示状態を指定します。

true を指定した場合、初期状態で目次を表示します。
false を指定した場合、目次は閉じた状態になります。

width

目次の横幅を指定します。

auto 目次の文字数に合わせて、横幅を自動調節
○○% 横幅をパーセンテージで指定 (100%で横幅一杯に目次を表示)
○○px 横幅をピクセル単位で指定

marginTop

目次上部の余白を指定します。

marginBottom

目次下部の余白を指定します。

indent

目次のインデント幅を指定します。

インデントの幅が指定可能

※以前コメントで、インデントを設定したいと要望貰った為、オプションを追加してみました。

postBodySelector

※ このオプションはCSSセレクタやJavaScriptに詳しい方だけが、変更する事をお勧めします。

目次の作成範囲となる、記事本文のタグをCSSセレクタで指定します。
記事本文以外に、見出しタグ(h2〜h4)が使われている場合、このオプションを設定する事で、記事本文内にある見出しタグだけで、目次を作成できます。

目次のデザインを変更する

直接CSSを編集すれば、デザインを変更する事ができますが、コピペで簡単に使えるデザインを、いくつか用意しました。
使い方は、<style type="text/css">…</style>となっている部分を、各デザインのCSSに置き換えて下さい。

鮮やかなドット枠の目次

鮮やかなドット枠の目次の表示イメージ

CSS

<style type="text/css">
  .b-toc-container{background:#f1f8ff;border:dashed 2px #668ad8;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>ul{margin:15px 0 0}.b-toc-container.hide>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:""}.b-toc-container ul li a{text-decoration:none;color:#668ad8!important;font-weight:700;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>

上下のみボーダーの目次

上下のみボーダーの目次の表示イメージ

<style type="text/css">
.b-toc-container{border-top:solid #1e366a 1px;border-bottom:solid #1e366a 1px;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;font-weight:700;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>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:""}.b-toc-container ul li a{text-decoration:none;color:#1e366a!important;font-weight:700;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>

スティチ風の目次

スティチ風の目次の表示イメージ

<style type="text/css">
  .b-toc-container{padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%;background:#58be89;line-height:1.3em;border:2px dashed #fff;border-radius:10px;box-shadow:0 0 0 4px #58be89,2px 1px 6px 4px rgba(10,10,0,.5);text-shadow:-1px -1px #238452}.b-toc-container p{text-align:center;font-weight:400;color:#fff;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>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:""}.b-toc-container ul li a{text-decoration:none;color:#fff!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>

付箋風な目次

付箋風な目次の表示イメージ

<style type="text/css">
  .b-toc-container{padding:0;margin-bottom:1em;width:auto;display:table;font-size:95%;position:relative;border:1px solid #333;background:#333}.b-toc-container p{position:absolute;top:46%;left:5px;text-align:center;margin:0;padding:0;width:1rem;color:#fff}.b-toc-container p .b-toc-show-wrap,.b-toc-container p a{display:none}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:0 0 0 1.5rem;padding:10px;border-left:1px solid #333;background:#fff}.b-toc-container.hide>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:""}.b-toc-container ul li a{text-decoration:none;color:#1e366a!important;font-weight:700;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>

最後に

自分の周りでも、WordPress を使っている人が多いですが、今回のような便利なプラグインで、Blogger を使う人が、１人でも増えれくれると、嬉しいです。

Blogger でこんな機能も欲しいよーー！という方がいれば、コメント欄で教えてください。

■ BloggerのHTMLを徹底紹介！テーマをフルカスタマイズしてオリジナルブログを作る！)

Blogger のテーマを自分好みにフルカスタマイズしたい人に、オススメの記事です。
テーマの編集方法、Blogger 固有タグの紹介、簡単なデザインのサンプルを、紹介していきます。

■ Bloggerで「このブログの自分のビューを追跡しない」が効かない(チェックが外れる)時の対処方法)

Bloggerで、 [このブログの自分のビューを追跡しない]をチェックにしたにも関わらず、自分のアクセスがカウントされていたので、その問題の解決方法です。

最後に

自分の周りでも、WordPress を使っている人が多いですが、今回のような便利なプラグインで、Blogger を使う人が、１人でも増えれくれると、嬉しいです。
Blogger でこんな機能も欲しいよーー！という方がいれば、コメント欄で教えてください。

(追記)
Bloggerで、「アドセンス広告を記事中の好きな場所に挿入するスクリプト」という物を最近作りました。
こちにで使い方等について紹介していますので、よかったら見ていって下さい。

(2020/05/18 追記)
目次のテキストを折り返し位置が、自動連番の左位置とかぶっていたため、かぶらないように修正しました。

もし良かったら、この記事をリンクと共に紹介してくれると嬉しいです。

84 件のコメント:

★ミーク★2018年11月26日 0:21
はじめまして。
目次表示に使わせていただいてます。ありがとうございます。

字下げを一文字少なくしたいのですが、どこを変更すれば良いか教えていただけないでしょうか。

よろしくお願いいたします。

返信削除
返信
take-moroyama2018年12月16日 14:39
このコメントは投稿者によって削除されました。
返信削除
返信
take-moroyama2018年12月16日 14:42
はじめまして。

大変便利な機能をご紹介いただきありがとうございます。

細かいことですが、目次のテキストの前に「・＞」というマークが付与されますが、これを削除する場合、どこを変更すると良いでしょうか。

なお、該当のページは以下となります。

https://katakuna-blog-realestate.blogspot.com/2018/12/vs.html
返信削除
返信
匿名2018年12月21日 6:55
このコメントは投稿者によって削除されました。
返信削除
返信
安井真守2019年1月17日 20:15
はじめまして！！
当初は「jQueryを使わないで、本当に動くの？？」と思っていたのですが、動くどころの話ではなく、jQueryを利用したものよりも遥かに軽快に表示されたので驚いてしまいました。

この目次挿入スクリプトは、多くのBloggerユーザーに多大な利便性をもたらすと思います。
ありがとうございました！！
返信削除
返信
ノゾミ2019年2月4日 0:18
はじめまして！
とても便利な目次機能のシェアありがとうございます！
コードをお借りいたします。
Bloggerの情報は貴重なのでとても助かります(;´∀｀)
返信削除
返信
piky2019年2月10日 14:15
始めまして。目次機能の追加方法をよび解説をしてくださりありがとうございます。

私の使っているテーマ(SORA TASTY)では、目次機能のコードを追加すると最後の2つに空欄の目次が追加されてしまいます。空欄をクリックするとコメント欄の部分にジャンプします(SORA TASTYはSEOを強化したテーマらしく、おそらく、SEOの関係で最後のコメント欄の部分がH2と認識されるようになっているのではないかと考えております。)

目次機能を表示させたい時、最後の２つを表示させない、またはcondTargetCountで２つ以上の時目次を表示させると指定しているように、5つ以下の数までなら目次を表示させるといったような目次数の制限をすることは可能でしょうか？もし、そういったことが可能でしたら教えて頂けないでしょうか。
返信削除
返信
イナカクジラ2019年2月16日 11:30
はじめまして。目次作成コードの公開ありがとうございます。この機能を探していました。手作業で作成していた目次が自動作成になり大変たすかります。
返信削除
返信
マルコ2019年3月4日 2:36
初めまして！
Bloggerで目次機能を探していてドンピシャでこちらの記事にたどり着きました。
貴重な情報ありがとうございます。

早速使わせてもらっています！

最近テンプレートを変えて、目次が不満点だったのですが解消できました。
前の目次がh3タグしか表示しておらず、今日1日、階層化を全てやり直した後に見つけました。。今日作業やる前に見てれば・・・

一点質問があります。

1. h2
1.1 h3
h4

と現状なっておりますが、h4タグにも数字を採番する事は可能でしょうか？

1. h2
1.1 h3
1.1.1 h4

以上、よろしくお願い致します。
返信削除
返信
MountainMouth2019年3月24日 0:32
初めまして！
Bloggerで目次機能を使いたく、その方法を探していたのですが、記事ごとに編集しなくても自動生成してくれるなんて、素晴らしいものを本当にありがとうございます！

現在「鮮やかなドット枠の目次」のデザインを利用させていただいているのですが、「上下のみボーダーの目次」も試したいと考えております。
ちなみに当記事中に「上下のみボーダーの目次」コードの記載がないのですが、追加していただくことは可能でしょうか。

自動生成だけでも大変ありがたいのに、わがままなお願いで恐縮ですが、ご検討よろしくお願いいたします。
返信削除
返信
Alice2019年3月30日 12:41
初めまして！目次機能とてもありがたいです。

boggerで利用しています。目次の順番がバラバラなので相談です。
見出し２と３を使っています。

通常なら
１
２
３
　３.１
　３.２
４

　
となるはずのところが

１
２
　３.１
　３.２
　４.１
　４.２
３
４

という目次になってしまいます。

現在は下層を表示させないで対処していますが
長文記事だと、やはり不便です。

なにか解決方法はありますでしょうか・
　
返信削除
返信
あいうえおにぎり2019年3月30日 18:58
こんにちは
初心者にも簡単に使える目次をありがとうございます
ちなみにこちらはセンタリングできませんか？
返信削除
返信
Pao2019年5月19日 1:56
はじめまして。

目次、ずっと使ってみたいと思っていました！
超初心者なので、分かりやすく、簡単に使えるものをありがとうございます。

あいうえおにぎりさん同様、ブログの記事の中で目次を使えるようにすることは可能でしょうか？
記事の枠外に目次が表示されてしまいます。

また、見出しの使い方が分かっておらず、以前の記事の設定がバラバラなのですが、希望する記事のみへの反映は可能ですか？

お手数ですが、教えていただけたら幸いです。
返信削除
返信
i.m2019年6月4日 10:05
はじめまして、ご紹介いただきありがとうございます。
日付も目次に反映されてしまうのですが、対処法はございますか？
返信削除
返信
morima1232019年7月5日 19:49
目次機能作っていただきありがとうございます。
毎回自分で記事のHTML 編集するのめんどくさいなと思っていたので、大変助かります。

そこで一つ質問があるのですが、
目次を冒頭文のあとに持ってくることは可能でしょうか？
私の場合は、記事の題のすぐ下に来てしまい、アイキャッチ画像や序文の上に来てしまっている状態です。
（このページのような感じです。https://morimafood.blogspot.com/2019/07/1.html）

私がイメージしているのは、まさにこの記事の冒頭のような感じで、

1．アイキャッチ画像
2．序文
3．目次
4．本文
のような感じにしたいです。

このようにも目次をアイキャッチ画像と序文の後に自動的にすることは可能でしょうか？

お手数をおかけしますがよろしくお願い致します。
返信削除
返信
ドイツが懐かしい2019年7月19日 3:46
はじめまして、すごく素敵なものを使わせて頂いております。
Bloggerは、Googleで保存している写真が簡単にUpできるので、好きですが、
もっと好きになるには、目次とかあればいいのに、と思っていたところなので、
すごく便利に使っています。ありがとう御座います。

ところで、モバイル画面の方も同じように表示させることはできるのでしょうか？

お教えいただければ、嬉しいです。

よろしくお願いいたします。
返信削除
返信
ドイツが懐かしい2019年7月21日 16:00
このコメントは投稿者によって削除されました。
返信削除
返信
ｄｂｄ2019年7月29日 22:20
このコメントは投稿者によって削除されました。
返信削除
返信
ドイツが懐かしい2019年8月2日 2:58
何度もお手数をかけてすみません。

目次の一番下に、
この記事の関連記事
と、出てしまいます。

タグ付けしていないのですが、

レイアウトとか、
設定で
修正することは出来る野でしょうか？

よろしくお願いいたします。
返信削除
返信
緘黙当事者のEye・・2019年8月5日 15:32
このコメントは投稿者によって削除されました。
返信削除
返信
Web-tonbori堂2019年9月3日 13:34
はじめまして。いろいろ目次を生成するプラグインを探してこちらへ辿り着きました。ありがたく使わせて頂いております。
事後報告になりますがその顛末と目次幅を拡げるカスタマイズを施したので一部オプション部分のコードをカスタマイズした数値で転載させていただきました。何卒宜しくお願い致します。（もし問題ありましたらご連絡お願い致します。）
該当エントリ
https://tonbori.blogspot.com/2019/09/blog-post.html
返信削除
返信
もこ丸。2019年11月24日 14:41
ブログ初心者ですが、簡単に目次を作ることができました！
ありがとうございます。

ところで、インデント幅を狭くしたいのですが、数字を変えても反映されない場合、
どのような問題が考えられますでしょうか？
それと、h4の見出しが目次に反映されない点についてもお聞きしたいです。
該当のページは以下になります。
https://mocomaru.blogspot.com/2019/11/cosmedays.html

初心者の質問のため的外れでしたらご容赦ください。
お手数をおかけしますが、よろしくお願いします。
返信削除
返信
もこ丸。2019年12月28日 14:55
お忙しいところ、ご回答ありがとうございます！
おかげさまで解決できました。
とても助かりました！
返信削除
返信
秋葉　ししょ2020年5月9日 15:29
はじめまして、blogger初心者です！貴方様の自動目次作成を参考し作業を行ったのですが、うまく自動反映されません。何か解決策をご指導願えれば幸いです
返信削除
返信
齋藤大雅2020年5月15日 1:02
こんにちは。
目次機能、活用させていただいてます。
質問なのですが、
現在↓

1. まず初めにし
たこと
2.次に行った対
策
3.結論

のように、かなり見えづらくなってしまっています。
それを、

1. まず初めにし
　たこと
2.次に行った対
　策
3.結論

のように出来ないでしょうか。

お教えいただければ幸いです。
返信削除
返信
AYRCS2020年5月22日 23:44
初めまして。

blog初心者です。目次の表示方法を探していたところ
こちらのページにたどり着き、早速目次機能を活用しようと設定しましたが
うまく動作しません。

わからないなりにhtmlを触っているうちにおかしくなっているのかもしれません。
原因わかりますでしょうか？

該当のページは下記になります。
https://ayrcs.blogspot.com/

よろしくお願いします。
返信削除
返信
AYRCS2020年5月23日 19:14
本日いろいろ試してみました。
　新しいテンプレート（QooQ)をダウンロードし
　トライブログ作成し再度やってみましたが
　うまく動作しません。

　気づいたことがあります。
　コードをコピペし保存完了時は変化ありませんが
ブログに戻り再度HTML編集画面へ行くと
"→"へ変更されております。（おそらく張り付けたもの全て）
挿入場所へのコピペで挿入するだけでは
だめなんでしょうか？
やり方間違ってますでしょうか？
よろしくお願いします。
返信削除
返信
だんべぇ2020年5月31日 7:37
スケ郎さま、たいへん分かりやすい記事です。参考にさせてください。うまく実装できるか自信はありません。見出しタグを気にせず文書を書いてましたので、目次をイメージして記事を書こうと思います。
返信削除
返信
齋藤大雅2020年6月7日 0:25
再度コメント失礼します。

今分かったのですが、

▼レイアウト▼

本文

h2 AAA

本文

h2 BBB

h3 CCC

本文

h3 DDD

本文

h3 EEE

本文

h2 FFF

本文

のようになっていると、

▼目次▼

1. h2 AAA
1.1. h3 CCC
1.2. h3 DDD
1.3. h3 EEE
2. h2 BBB
1.1. h3 CCC
1.2. h3 DDD
1.3. h3 EEE
3.h2 FFF

というように、C,D,Eのh3見出しが2つ存在します。

どう修正すれば良いでしょうか。
返信削除
返信
Fuma2020年6月28日 19:09
簡単に設置でき、機能も非常に高精度＆便利で助かりました。素晴らしいプラグインをありがとうございます。
返信削除
返信
しげすけ2020年7月12日 18:11
Bloggerでの目次の入れ方を検索して訪れました。
詳しいご説明がありすごく助かります。
参考にして設置させていただきます。ありがとうございます。
返信削除
返信
雨森佐歩吉2020年7月23日 15:01
導入させていただきました。ありがとうございます。

2点バグ報告と１点要望を挙げさせていただきます。
バグ１：r.style.marginBottom=toc_options.marginTop;　こちらの部分で参照してる設定数値がTopの方になって、重複しておりませんでしょうか。
バグ２：目次の飛ぼうとするIDとH２などのタグに付くIDが違ってませんでしょうか。
目次からはtoc_headline_xxというIDへ飛ぼうとするようになってるのですがIDに付くのはtoc_xxになっているようで相違があって飛べませんでした。（素人ながら、javascriptの方で_headlineを削ってIDを付けてもらうようにしたら飛べるようになりました）

要望１：サンプルの目次のように、数字の終わりに”.”を付けることはできませんでしょうか
現状”1　見出し”や”2.2　見出し”となってしまうのですが、”1.　見出し”や”2.2.　見出し”のようにするのは難しいでしょうか。

上記いずれも私の設定するテーマとの競合や、いじってしまったミスによる問題などでしたら申し訳ありませんがお聞き流しください…。
返信削除
返信
あトん2020年8月30日 15:41
スケ郎さま、あトん、と申します。
忙しい人向けの目次の提供ありがとうございます。
Bloggerで目次が利用でき助かりました。
返信削除
返信
Martin Nishida2020年10月8日 10:03
大変便利な目次プラグインをありがとうございます。
早速ですが「小見出し」が2か所に表示されます。解決方法をご指導いただければありがたいです。
ブログ➡https://longstay-wine.blogspot.com/2020/06/chcos-destournel-1985.html
返信削除
返信
ミスリル2021年3月27日 10:06
はじめまして、そのままコピーしてペーストしたのですが上手くいきません。
なぜでしょうか
返信削除
返信
たけなみ2021年4月7日 23:56
はじめまして。プラグインの公開ありがとうございます。
まさにこんな目次が作りたいと思っていたところでしたので、さっそく使わせていただきました。

ただ、コードをコピーし、テンプレートに貼り付けしたのですが、目次が表示されません。
テンプレートを変更しても同様の状態でした。
テンプレートが悪いのか、挿入箇所が悪いのか、ご指導いただけないでしょうか。

https://yugyojiyu.blogspot.com/2021/03/202133.html
返信削除
返信
pj2021年4月26日 15:47
/* 外部リンクアイコン表示 */
/* **** には自分の URL */
#single-content a:not([href^="****"]):after {
margin: 0 3px;
font-family: FontAwesome;
vertical-align: middle;
content: '\f08e';
margin-left:.5em;
}
/* more タグ対応 */
#single-content a[name]:after{
display:none;
}
はじめまして、こちらの目次を利用させていただいてます。感謝しております。外部リンクアイコンを導入するために上記のタグを貼り付けると、目次の全ての文字リンクにまで反映されてしまいます。

どうにか、この目次に外部リンクアイコンが反映されないようにするcssコードが有りましたら、教えていただけますと幸いですm(_ _)m
返信削除
返信
てら2021年4月27日 9:06
このコメントは投稿者によって削除されました。
返信削除
返信
pj2021年4月27日 16:42
ありがとうございます。完璧に消えてくれました。
何でもわかってらっしゃって羨ましい限りです。　
また無償でコードを提供してくださりありがとうございます
返信削除
返信
phraram92021年6月19日 21:15
初めまして。こちらの目次機能試してみたく、コピペHTML編集してみましたが動作しません。
コピペしたコードの色がほとんど黒でシンタックスハイライト？されていないのが気になります。
アドバイスしていただけると助かります。よろしくお願いします。

目次を付けたいサンプルページです。
https://watching-sports-diary.blogspot.com/2021/06/2018-thai-competency-test-1-web.html
返信削除
返信