文字数の多い記事では、小見出しを加えることで、系統だった文章構成になり、ユーザーが書かれている内容の概要を素早く把握でき、理解する手助けとなります。
複数の小見出しが使用されているボリュームのある記事の冒頭に目次があると更にユーザーの利便性が向上します。
目次があるコンテンツ（記事）の代表的例がWikipediaです。以下は、Wikipediaの「ブログ」の解説ページの冒頭部です。
Bloggerの記事にTable of Contents（目次）プラグインを加える方法
WordPressでは、Wikipediaに似たスタイルの目次を自動生成して記事内に追加するプラグインがあります。ブロギングライフでも使っています。
Bloggerは、WordPressの様なプラグイン操作管理機能は備えていませんが、プラグイン（ソフトウェアのモジュール）をマニュアルでインストールして、拡張機能を追加することが可能です。
ここでは、MyBloggerTricks.comが提供するTOC（Table of Contents)プラグインを使用して、Bloggerの記事に目次を追加する用法を紹介します。
記事を表示して、目次が表示されていれば、作業完了です。
Bloggerは、WordPressの様なプラグイン操作管理機能は備えていませんが、プラグイン（ソフトウェアのモジュール）をマニュアルでインストールして、拡張機能を追加することが可能です。
ここでは、MyBloggerTricks.comが提供するTOC（Table of Contents)プラグインを使用して、Bloggerの記事に目次を追加する用法を紹介します。
MyBloggerTricks TOC Plugin V 2.0の特徴
- 階層ヘディングタグに対応（h2, h3, h4,..）
- ナビゲーション番号を付与
- 自動的にヘディングタグを検知する(H2からH6まで）
- コンテントセクションに自動でIDを付与する
- TOC内のアンカーリンクにIDを付与する
- フラットなリストと複数レベルのリストに対応
- 表示/非表示のオプション
- 圧縮されたスクリプト
- 軽量で高速
- SEOフレンドリー
- 簡単にカスタマイズ可能
- モバイル レスポンシブ対応
- 呼び出された時のみ実行
MyBloggerTricks TOC Plugin V 2.0のインストール
Bloggerの管理画面から「テーマ」をクリックし、「HTMLの編集ボタン」を押します。テンプレートのHTMLソースコードが表示されます。ソースコード内のどこかをクリックしてカーソルをソースコード内に表示させた後、コントロール＋"F"（Macの場合は、コマンド＋"F"）で、"</head>"を検索します。
</head>の上（前）に、以下のコードを貼り付けます。
次に、"]]></b:skin>"を検索して、すぐ上に以下のCSSコードを貼り付けます。
テンプレートを保存します。以上で、プラグインのインストールは完了です。
以下の2ステップで、記事内に目次を表示させることができます。
<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>
<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>"を検索して、すぐ上に以下のCSSコードを貼り付けます。
/*####TOC Plugin V2.0 by MyBloggerTricks####*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;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:#289728; 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}
*/
.mbtTOC2{border:5px solid #f7f0b8;box-shadow:1px 1px 0 #EDE396;background-color:#FFFFE0;color:#707037;line-height:1.4em;margin:30px auto;padding:20px 30px 20px 10px; font-family:Oswald, arial;display: block;width: 70%;}.mbtTOC2 button{background:#FFFFE0; font-family:oswald, arial; font-size:22px;position:relative; outline:none;border:none; color:#707037;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:#289728; 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}
*/
表示色のカスタマイズ
お好みに応じて、以下の色番号の部分を変更します。- コンテナの背景色：#FFFFE0
- 縁取り線の色：#f7f0b8
- ヘッドラインテキストの色：#707037
- アンカーリンクカラー：#0080ff
- フーバーカラー：#289728
備考：
英文字、ローマ数字でのリストスタイルで表示する場合は、最後と最後から5番目の行のコメント記号（/* と */）を削除して下さい。
<data:post.body/>を検索して、以下のコードに置き換えます。英文字、ローマ数字でのリストスタイルで表示する場合は、最後と最後から5番目の行のコメント記号（/* と */）を削除して下さい。
<div id="post-toc"><data:post.body/></div>
注意事項：
以下のコードはテンプレート内に複数あります。全て以下のコードに置換して下さい。
以下のコードはテンプレート内に複数あります。全て以下のコードに置換して下さい。
テンプレートを保存します。以上で、プラグインのインストールは完了です。
目次（TOC)を記事内で表示させる方法
見出しの数が少なく、短い記事には目次は必要ありません。目次は、見出しが一定数以上（最低3か4）ある場合に設置するのが適しています。以下の2ステップで、記事内に目次を表示させることができます。
ステップ1： TOCコンテナの場所にコードを設置
記事の編集モードを"HTML"に変更して、目次を表示させる場所に以下のコードを挿入します。
<div class="mbtTOC2">
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div>
</div>
<button>Contents <span>[<a onclick="mbtToggle2()" id="Tog">hide</a>]</span></button> <div id="mbtTOC2"></div>
</div>
ステップ2： TOCファンクションコールの設置
TOCプラグインの機能を実行するための呼び出す以下のJSコードを記事の最後に追加します。
<script>mbtTOC2();</script>
記事を表示して、目次が表示されていれば、作業完了です。
コメント