この記事では、Bloggerのブログ記事の内容に合わせて、目次を自動生成してくれるプラグインを導入する方法をご紹介します。非常にシンプルかつ簡単なカスタマイズで実現できます。
目次[非表示]
目次を自動生成するプラグインの紹介
WordPressで作成されたブログでは、記事の先頭に【目次】をよく見かけます。これらはWordPressの特徴でもあるプラグインというパーツで、ブログ機能を簡単に拡張できるからです。目次表示の代表的なプラグインは、 Table of Contents Plus（TOC+)というもの。それでは、Bloggerでは【目次】機能を実装できないのでしょうか？
そこでお役立ちなのはスケ郎さんが提供してくれているカスタマイズ方法です。
[Blogger] 目次を簡単に自動生成（忙しい人向けのコピペ素材）
スケ郎さんの目次自動生成プラグインの最大の特徴は・・
- 見出しタグ(h2,h3,h4…)を自動的に検出して、目次を自動生成する
- シンプルでプレーンな JavaScirptで実装
- 目次の表示/非表示のリンクボタンあり
- 階層的にヘッダタグ(h2,h3,h4)を組んでも目次化が可能
- 軽量で圧縮された CSS, JavaScript
- オプションで目次の表示内容が制御可能
- 段落番号を自動付与
- Google検索結果のスニペットに目次リンクを表示
なのですが、この中でも特に魅力的な点は・・
- シンプルでプレーンな JavaScirptで実装
- 軽量で圧縮された CSS, JavaScript
- Google検索結果のスニペットに目次リンクを表示
なのです。Bloggerの魅力であるサイトの表示速度が損なわれないこと。ブログ記事は最初にヘッダーやCSS、JavaScriptなどが呼び込まれてから、記事内容が呼び込まれるため、裏方作業が重くなってしまってはサイトの表示に時間がかかってしまうわけです。
目次自動生成プラグインの実装方法
実際にはHTMLのヘッダ部分にscriptを埋め込むだけです。簡単なのですが、HTMLを直接修正しますので、初めての方は慎重に行ってください。
現在テーマのHTMLをバックアップします
HTMLを手動で追加修正をするわけですから、いつでも修正前の状態に戻せるように、現在テーマのHTMLをバックアップを取っておきます。Bloggerの管理画面から
テーマ
↓
[バックアップ/復元]をクリック
↓
[テーマをダウンロード] でパソコン上に保存してください。
ヘッダに追加修正をする
HTMLを直接追加修正をして、プラグインのソースコードを埋め込みます。ソースコードはスケ郎さんのサイトを参照してください。テーマ
↓
[HTMLの編集]をクリック
するとHTML編集画面が出てきますが、初めて見る方にはちょっと難解そうに見えることでしょう。今回の目次自動生成のプラグイン・ソース・コードを追加するにあたって、HTML自体の内容を理解する必要はありませんが、このHTML言語で書かれたソース・コードが、今現在ブログで適用している「テーマ」の「設計図」となるものですから、修正には十分に注意が必要です。
スケ郎さんの目次自動生成プラグインのソースコードの加筆挿入箇所は・・
・</head>の直前に挿入します。
<head></head>タグはHTMLの上の方にあります。位置を割り出して、ソースコードをコピペして「テーマを保存」をクリックします。
目次を中央に配置するように修正を加えるには
今回の目次自動生成プラグインでの「目次」は、左サイドに寄せて配置されます。これをブログ記事中央に配置するには、ソースコードの一部を改変する必要があります。
コピペして貼り付けたソースコード「<!-- [START] 目次作成プラグイン-->」の中で、「<style type="text/css">」の部分に１ヶ所追加するだけで可能です。
<style type='text/css'>
.b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;margin-left:auto;margin-right:auto;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}.b-toc-container ul li .toc-number{margin:0 .5em 0 0}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>
赤字の部分「margin-left:auto;margin-right:auto」を加筆するだけです。この部分で、左右の余白を自動的に算出しているわけです。
このアイデアは、サルワカさんの記事から発案されてあります。
CSSで中央寄せする9つの方法（縦・横にセンタリング）
