スキップしてメイン コンテンツに移動

[Blogger] 目次を見出しから自動生成するプラグイン(忙しい人向け)

enter image description here

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

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

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

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

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

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

特徴

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

プラグインの導入

テーマをバックアップ

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

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

HTMLを編集

  1. テーマの画面で、[HTMLの編集] をクリックし、HTMLを表示します
  2. </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;);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;);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}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(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] 目次作成プラグイン-->

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

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

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

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

目次の表示イメージ

オプション

今回紹介した、目次自動生成プラグインは、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オプションで指定した、トップレベルの見出しが、2つ以上あるとき、目次が表示されます。

  • insertPosition

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

目次の表示位置
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 を使う人が、1人でも増えれくれると、嬉しいです。

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

関連記事

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

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

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

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

最後に

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

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

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

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

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

  1. はじめまして。
    目次表示に使わせていただいてます。ありがとうございます。

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

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

    返信削除
    返信
    1. 使って頂き、ありがとうございます。
      字下げですが、CSSを以下の通り変更すれば、対応が可能だと思います。

      まず、"<style type="text/css">....</style>"の間に書いてあるCSSを見てもらうと、以下の記述が行われている箇所があります。

      .b-toc-container ul li{margin:0;padding:0 0 0 20px}

      この"20px"となっている部分を、"10px"程度にしてもらえれば、1字少なくなると思います。

      削除
    2. 教えていただいた値を小さくすることで左に詰めることができ、見やすくなりました。

      ありがとうございました。

      削除
  2. このコメントは投稿者によって削除されました。

    返信削除
  3. はじめまして。

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

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

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

    https://katakuna-blog-realestate.blogspot.com/2018/12/vs.html

    返信削除
    返信
    1. プラグインを使って頂き、ありがとうございます。
      「頑 ーKATAKUNAー」さんのサイトを見させて貰った所、
      使用しているBloggerテーマのCSSと、この目次プラグインで使っている
      CSSが競合しており、「・>」のような表示がされていました。

      具体的には、以下の部分が競合してました。

      ul li { list-style-type: disc; }
      ul li:before { content: "\f105"; }

      競合しないように、プラグインのCSSを見直しました。
      もう一度、手順の通りコードを貼り付けし直して貰えれば、
      「・>」が消えると思います。

      削除
    2. ありがとうございます!
      目次がキレイに収まりまって見やすくなりました。
      WordPressじゃなくてもここまでできるということを見せられるブログにしたかったので、心から感謝致します。
      いつか記事数もそれなりになった時に、こちらのサイトを紹介したいと思います。

      削除
    3. お役に立てて良かったです。
      いつでもいいので、紹介して頂けると嬉しいです!

      削除
  4. このコメントはブログの管理者によって削除されました。

    返信削除
  5. はじめまして!!
    当初は「jQueryを使わないで、本当に動くの??」と思っていたのですが、動くどころの話ではなく、jQueryを利用したものよりも遥かに軽快に表示されたので驚いてしまいました。

    この目次挿入スクリプトは、多くのBloggerユーザーに多大な利便性をもたらすと思います。
    ありがとうございました!!

    返信削除
    返信
    1. お褒めの言葉、ありがとうございます。
      お役に立てて嬉しいです。

      削除
  6. はじめまして!
    とても便利な目次機能のシェアありがとうございます!
    コードをお借りいたします。
    Bloggerの情報は貴重なのでとても助かります(;´∀`)

    返信削除
    返信
    1. 使って頂き有難うございます!!
      お役に立てて嬉しいです!!!

      削除
  7. 始めまして。目次機能の追加方法をよび解説をしてくださりありがとうございます。

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

    目次機能を表示させたい時、最後の2つを表示させない、またはcondTargetCountで2つ以上の時目次を表示させると指定しているように、5つ以下の数までなら目次を表示させるといったような目次数の制限をすることは可能でしょうか?もし、そういったことが可能でしたら教えて頂けないでしょうか。

    返信削除
    返信
    1. 目次作成機能を使って頂き、ありがとうございます。

      pikyさんのブロクを確認させて頂きました。
      確かにコメント欄に"h2"にタグが使用されており、それにより空欄の目次が追加されていました。

      対策として今回、目次作成に"postPodySelector"というオプションを追加しました。
      pikyさんの場合は、このオプションに、".post-body"と指定して貰えれば、コメント欄を除いた記事本文のh2タグだけで、目次が作成出来ると思います。

      上のオプションを追加した形で、記事の内容およびコードを更新していますので、再度テーマのHTMLを貼り付け直してみて貰えませんか。

      削除
    2. てらさとさん、ありがとうございます!

      テーマに貼り付け直したところ、無事に本文の目次のみ表示させることができました。本文だけ表示させるという方法があるんですね!魔法のようでした。

      blogger始めたばかり&パソコンのこと詳しくないので困っておりましたが、とても助かりました。ありがとうございます!

      削除
  8. はじめまして。目次作成コードの公開ありがとうございます。この機能を探していました。手作業で作成していた目次が自動作成になり大変たすかります。

    返信削除
    返信
    1. 目次作成機能を使っていただき、ありがとうございます。
      お役に立てたようで、とても嬉しいです。

      削除
  9. 初めまして!
    Bloggerで目次機能を探していてドンピシャでこちらの記事にたどり着きました。
    貴重な情報ありがとうございます。

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

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

    一点質問があります。

    1. h2
    1.1 h3
    h4

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

    1. h2
    1.1 h3
    1.1.1 h4

    以上、よろしくお願い致します。

    返信削除
    返信
    1. 目次機能を使って頂き、ありがとうございます。
      お役に立てているようで嬉しいです。

      h4が採番されない件についてですが、単純にバグってました。
      (私がh4タグを使わない為、気づいてませんでした...)

      h4も採番するように、記事で紹介しているコードを修正しました。
      再度貼り付け直して貰えれば、大丈夫だと思います。

      宜しくお願いします。

      削除
    2. 早速のご対応ありがとうございます!

      立て続けの質問で大変恐縮ですが、、、
      自分のページに適用して数ページ、インデックスが正しく取得されないケースがありますが、原因わかりますでしょうか?

      例えば、下記のページが該当します。

      https://www.lehman-miler.com/2018/12/flow.html
      https://www.lehman-miler.com/2018/03/thipsamai.html
      https://www.lehman-miler.com/2018/11/avani-riverside.html

      もう少し、自分でもうまくいっている場合と言っていない場合の傾向を探したいと思います。

      削除
    3. 原因を確認してみましたが、私のブログページ側の<div>タグのずれによるものかもしれません。該当ページのインデックスが表示されていない部分で</div>が2つ続いている個所を見つけて、そのうちの一つの</div>を最後に持ってくると無事に表示されるようになりました。

      となると、該当ページを見つけて地道に直していくしかないですかね。。。

      削除
    4. なるほど、それが原因だったのですね。
      タグがずれがあると、JavaScriptで h2,h3,h4などの見出しタグが認識できない為、こればっかりは、地道に直してもらうしかないですね。。。

      削除
    5. 返信ありがとうございます。400記事以上をチェックして修正しましたw
      divタグが結構ずれているものもあって、手こずりましたが、無事に修正できました。

      これから目次を活用されていただきます。

      ありがとうございました!

      削除
  10. 初めまして!
    Bloggerで目次機能を使いたく、その方法を探していたのですが、記事ごとに編集しなくても自動生成してくれるなんて、素晴らしいものを本当にありがとうございます!

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

    自動生成だけでも大変ありがたいのに、わがままなお願いで恐縮ですが、ご検討よろしくお願いいたします。

    返信削除
    返信
    1. 目次機能を使って頂き、ありがとうございます。

      すいません、「上下のみボーダーの目次」のCSSコードを貼り忘れておりました (--)
      コードを記載しましたので、確認をお願いいたします。

      削除
    2. 早速のご対応、ありがとうございます!!

      「上下のみボーダーの目次」へ変更したところ、私のブログではこちらのほうがしっくりきましたので、使わせていただきます。

      目次自動生成のおかげで、私のブログの見出しがわかりづらいという欠点も見つかって、ほんと感謝感激です!
      ありがとうございました!

      削除
  11. 初めまして!目次機能とてもありがたいです。

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

    通常なら



     3.1
     3.2


     
    となるはずのところが



     3.1
     3.2
     4.1
     4.2



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

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

    なにか解決方法はありますでしょうか・
     

    返信削除
    返信
    1. 目次機能を使って頂き、ありがとうございます。
      Aliceさんのブログを確認させてもらいました。

      HTMLのソース見たところ、以下のように3つ目の<H2>タグだけ、他のタグより下の階層に存在していました。
      ---------------------------------
      <H2>大見出し</ H2>
      <H2>大見出し</ H2>
      < DIV >
      <H2>大見出し</ H2>
      </DIV>
      <H3>中見出し</H3>
      ・・・
      ---------------------------------

      この目次作成機能は、同じ種類の見出しタグは、同レベルのタグ階層にいることを前提にしているため、以下のようなるようHTMLを修正してもらえれば、うまくいくと思います。

      ---------------------------------
      <H2>大見出し</ H2>
      <H2>大見出し</ H2>
      <H2>大見出し</ H2>
      <H2>大見出し</ H2>
      ・・・
      ---------------------------------

      削除
  12. こんにちは
    初心者にも簡単に使える目次をありがとうございます
    ちなみに こちらはセンタリングできませんか?

    返信削除
    返信
    1. 目次機能を使って頂き、ありがとうございます。
      「あいうえおにぎり」さんのブログを確認させてもらいました。

      目次の文字を中央寄せにしたいと言う事であれば、以下2点の設定を行えば、うまく行くと思います。

      1. 目次機能の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;text-align:center}.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}.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}.b-toc-container ul li .toc-number{margin:0 .5em 0 0}.b-toc-container ul li .toc-text:hover{text-decoration:underline}

      2. オプションのインデントを "0px"にする

      目次機能の設定を行う Javascriptの部分があると思いますが、そこの「indent」オプションに"0px"を設定する

      var toc_options = {
       indent: "0px"
      }

      削除
    2. お返事ありがとうございます
      試してみたのですが
      目次内の文字ではなく目次自体をブログ記事の真ん中にする方法はありませんか?

      削除
  13. はじめまして。

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

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

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

    お手数ですが、教えていただけたら幸いです。

    返信削除
    返信
    1. 目次機能を使って頂きありがとうございます。
      Paoさんのブログを見させてもらいました。

      まず、記事の枠外に目次が表示される件ですが、
      目次のオプションを以下のように設定してもらえれば、
      記事の中のタイトル直下に目次が出ると思います。

      var toc_options = {
      target: ["h2", "h3", "h4"],
      autoNumber: true,
      condTargetCount: 2,
      insertPosition: "top",
      showToc: true,
      width: "auto",
      marginTop: "20px",
      marginBottom: "20px",
      indent: "20px",
      postBodySelector: ".widget.Blog .post-body"
      };

      次に、特定の記事のみに目次を表示する件については、
      現状のその機能はありません。(全記事が目次の表示対象)

      Paoさんのおっしゃる通り、
      目次を出す/出さないを選べる機能があった方いいと思いますので、
      先の話にはなりますが、実装を検討してみます。

      削除
    2. 迅速で丁寧な対応ありがとうございました。

      これを機に、ブログの書き方も変えていきたいと思います。

      削除
    3. はじめまして。
      大変便利な目次機能、本日より使わせていただいてます。
      さて、目次を出す/出さない、の件ですけど、当方では記事のHTMLに以下のスタイルコードを追記することで出したくない記事で非表示にしています。ご参考まで。
      <style>.b-toc-container{display:none!important}</style>

      ただ、やはり選択機能があれば便利だと思いますので、実装されるのを楽しみにしております。

      削除
  14. はじめまして、ご紹介いただきありがとうございます。
    日付も目次に反映されてしまうのですが、対処法はございますか?

    返信削除
    返信
    1. 目次機能を使って頂き、ありがとうございます。
      i.mさんのブログを見させてもらいました。

      HTMLを見る限り、オプションの「postBodySelector」を
      以下のように設定すれば、日付を除いた目次ができると思います。

      postBodySelector: ".widget.Blog .post-body"

      一度、試してみて貰えますでしょうか。

      削除
    2. ご回答いただきありがとうございます。
      無事、日付を除いた目次ができました!

      削除
  15. 目次機能作っていただきありがとうございます。
    毎回自分で記事のHTML 編集するのめんどくさいなと思っていたので、大変助かります。

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

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

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

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

    お手数をおかけしますがよろしくお願い致します。

    返信削除
    返信
    1. 目次機能を使って頂きありがとうございます。

      目次を序文の後(最初の見出しの前)に挿入するには、目次のオプションのinsertPositionを以下の通り設定すれば、行けると思います。

      insertPosition: "firstHeadBefore"

      一度、ご確認いただけますか?

      削除
    2. ご返事いただきありがとうございます。

      質問させていただく前は出来なかったのに、今試すとできました。笑


      大変お手数をおかけいたしました。
      有難うございました。大変助かりました。

      削除
  16. はじめまして、すごく素敵なものを使わせて頂いております。
    Bloggerは、Googleで保存している写真が簡単にUpできるので、好きですが、
    もっと好きになるには、目次とかあればいいのに、と思っていたところなので、
    すごく便利に使っています。ありがとう御座います。

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

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

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

    返信削除
    返信
    1. 目次機能を使っていただき、ありがとうございます。

      質問の件ですが、おそらくモバイル独自のテンプレートが有効になっている為、スマホ等でアクセスした時に、目次のスクリプトが動いてないと思います。

      モバイルでもPC用のテンプレートを使うように、設定を変えれば、おそらくうまく行くと思います。手順は、以下のサイトが参考になると思います。
      http://toumaswitch.com/blogger-responsive/

      一度、試してみてください。

      削除
    2. ありがとうございます。
      参考のサイトをもとに対応してみます。

      本当に、ありがとうございました。

      削除
    3. やってみたところ、はじめはうまく出来なかったのですが、
      テーマの初期化を行って、再インストールをしたら、きちんと表示される様になりました。
      ありがとうございました。

      感謝です。
      きれいなサイトができあがり、本当に嬉です。
      ありがとうございました

      削除
  17. このコメントは投稿者によって削除されました。

    返信削除
  18. このコメントは投稿者によって削除されました。

    返信削除
    返信
    1. 目次機能を使って頂きありがとうございます。
      てら です。

      URLの記事を確認しましたが、一見すると正しく目次が表示されているようですが、どの部分がおかしいのでしょうか?

      削除
  19. 何度もお手数をかけてすみません。

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

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

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

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

    返信削除
    返信
    1. 目次機能を使って頂きありがとうございます。
      問題となっている箇所を確認したいため、宜しかったらURLを教えて頂けますでしょうか?

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

      削除
  20. このコメントは投稿者によって削除されました。

    返信削除
  21. はじめまして。いろいろ目次を生成するプラグインを探してこちらへ辿り着きました。ありがたく使わせて頂いております。
    事後報告になりますがその顛末と目次幅を拡げるカスタマイズを施したので一部オプション部分のコードをカスタマイズした数値で転載させていただきました。何卒宜しくお願い致します。(もし問題ありましたらご連絡お願い致します。)
    該当エントリ
    https://tonbori.blogspot.com/2019/09/blog-post.html

    返信削除
  22. ブログ初心者ですが、簡単に目次を作ることができました!
    ありがとうございます。

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

    初心者の質問のため的外れでしたらご容赦ください。
    お手数をおかけしますが、よろしくお願いします。

    返信削除
    返信
    1. 返信遅れてすいません。
      目次機能を使って頂きありがとうございます。


      インデント幅を狭くする件について、コードを修正しましたので、もう一度貼り直しをして頂けますでしょうか?(貼り直せばインデント幅が狭くなると思います)

      h4の見出しが目次に反映されない件は、以下のように一部のH3タグが、DIVタグの中に入り込んでいるのを....

      ---------------------------------
      <H3>中見出し</ H3>
      < DIV >
       <H3>重要!最大36%ポイントバックについて</ H3>
      </DIV>
      < DIV >
       <H4>今からでも間に合う!PayPayの設定</ H2>
      </DIV>
      ・・・
      ---------------------------------


      次のように修正してもらえれば、うまくH4タグの目次も表示されると思います。

      ---------------------------------
      <H3>中見出し</ H3>
      <H3>重要!最大36%ポイントバックについて</ H3>
      < DIV >
       <H4>今からでも間に合う!PayPayの設定</ H2>
      </DIV>
      ・・・
      ---------------------------------

      削除
  23. お忙しいところ、ご回答ありがとうございます!
    おかげさまで解決できました。
    とても助かりました!

    返信削除
  24. はじめまして、blogger初心者です!貴方様の自動目次作成を参考し作業を行ったのですが、うまく自動反映されません。何か解決策をご指導願えれば幸いです

    返信削除
  25. こんにちは。
    目次機能、活用させていただいてます。
    質問なのですが、
    現在↓

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

    3.結論

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

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

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

    お教えいただければ幸いです。

    返信削除
    返信
    1. 目次機能を使っていただき、ありがとうございます。

      確かに折り返すと見えづらくなっていますね。
      ご指摘の通り、コードを修正しましたので、もう一度、貼り直して確認してもらえませんか?

      よろしくお願いします。

      削除
  26. 初めまして。

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

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

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

    よろしくお願いします。

    返信削除
  27. 本日いろいろ試してみました。
     新しいテンプレート(QooQ)をダウンロードし
     トライブログ作成し再度やってみましたが
     うまく動作しません。

     気づいたことがあります。
     コードをコピペし保存完了時は変化ありませんが
    ブログに戻り再度HTML編集画面へ行くと
    "→"へ変更されております。(おそらく張り付けたもの全て)
    挿入場所へのコピペで挿入するだけでは
    だめなんでしょうか?
    やり方間違ってますでしょうか?
    よろしくお願いします。

    返信削除
    返信
    1. html編集画面の左の方にある▶をクリックしてみてください。
      全て表示されるはずです。

      削除
    2. コメント欄に投稿させて頂いた文章も表示が変わってしまい
      うまく説明できていませんでした。すみません。
      ▶に表示が隠れて見えないわけでなく、書き込んだコードの部分は
      表示されてましたが、
      ダブルクウォーテーションが記号ではなく
      アルファベットの標記になっておりました。
      下記のページ見て頂けると助かります。

      https://blog-trial-diary.blogspot.com/2020/05/Automatic-table-of-contents-generation-trouble.html

      削除
    3. 先ほど ふじやん。さんにご指摘頂いた箇所修正し表示することができました。
      私のブログの設定方法の問題でした。
      お手数おかけしました。
      また、あいうえお さんも調べて何度もコメント頂き有難うございました。

      削除
  28. スケ郎さま、たいへん分かりやすい記事です。参考にさせてください。うまく実装できるか自信はありません。見出しタグを気にせず文書を書いてましたので、目次をイメージして記事を書こうと思います。

    返信削除
  29. 再度コメント失礼します。

    今分かったのですが、

    ▼レイアウト▼

    本文

    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つ存在します。

    どう修正すれば良いでしょうか。

    返信削除
  30. 簡単に設置でき、機能も非常に高精度&便利で助かりました。素晴らしいプラグインをありがとうございます。

    返信削除
  31. Bloggerでの目次の入れ方を検索して訪れました。
    詳しいご説明がありすごく助かります。
    参考にして設置させていただきます。ありがとうございます。

    返信削除
  32. 導入させていただきました。ありがとうございます。

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

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

    上記いずれも私の設定するテーマとの競合や、いじってしまったミスによる問題などでしたら申し訳ありませんがお聞き流しください…。

    返信削除

コメントを投稿

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…