Ghostブログに目次(TOC)をつける
本記事では、Tocbotを用いてGhostブログ内記事の見出しタグを自動で検出し、目次（Table of Contents）を生成する方法をご紹介します。今回は、Admin経由のコーディングではなく、Themes内ファイルに直接コーディングします。基本的には、公式サイトのドキュメントを用いますが、日本語でのドキュメントが少ないため、こちらを参考にしてください。
1. Why using Table of Contents
記事内に目次（Table of Contents:Toc）を追加するメリットについては下記の２つがあります。
- ユーザビリティの向上
- SEOの向上
一番大きいのは、ユーザビリティの向上になります。ブログ・記事を見る側がその記事の内容を大まかに把握することができます。
また実際に、記事内でユーザーが一番クリックする場所が目次であるという検証があります。
そして、ユーザビリティの向上がSEOの向上に直結します。目次によってユーザーが欲しい情報を見逃すことが少なくなるからです。
2. Prerequisites
基本的なHTML/CSS/Javascriptの知識は必要になりますが、わからない方でも導入できるよう解説します。
また、Ghost導入環境によりディレクトリやファイルの格納場所が変わりますので、そちらの把握をお願いします。
3. Adding Tocbot Library
Tocbotライブラリーへのリンクをこちらから取得します。
本記事掲載時点でのバージョンは4.12.2になりますので、本バージョンをお使いの方は下記でコードを紹介しますので、そのままお進みください
default.hbsファイルを開きます。格納場所は
~/ghost/themes/(お使いのテーマ)/default.hbs
デフォルトのテーマの場合は、casperを上記（お使いのテーマ）に代入して使用してください。
/* <head>~</head>に下記コードを追加する */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.css" integrity="sha512-2kqK5bWDwdrluTn6Wkj+jgiwyzvAHLirVp08Kz7kN5I8PWQ0tUtEMxfhyWDCrnws91BJ9PfrUy6ImfA7Qb22TA==" crossorigin="anonymous" />
/* 同ファイル内の<body>~</body>に下記コードを追加する */
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.2/tocbot.min.js" integrity="sha512-8u1QblAcGUuhEv26YgTYO3+OtPL7l37qiYoPQtahVTaiLn/H3Z/K16TOXJ3U7PDYBiJWCWKM0a+ELUDGDgED2Q==" crossorigin="anonymous"></script>
<script>
tocbot.init({
tocSelector: '.toc',
contentSelector: '.post-content',
hasInnerContainers: true
});
</script>
4. Editing Post Template
次に、ポストする記事に目次をレンダリングするための設定をします。
同ディレクトリ内のpost.hbsファイルを開きます。
/* ファイル内の<div class="post-content">を探し、直前に下記コードを記載する */
<aside class="toc-container">
<div class="toc"></div>
</aside>
5. Styling the ToC
最後に、おまけとして今回追加した目次のスタイルをCSSにてカスタマイズします。
デフォルトテーマを使用の方は、Adminにログインし、設定からコードのインジェクションを開き、Site Header内に下記コードを追加してください。
/* 固定されたヘッダーから見出しをオフセットする
height, margin-topの値はそれぞれサイトに合わせてください */
.post-content h2::before,
.post-content h3::before {
display: block;
content: " ";
height: 84px;
margin-top: -84px;
visibility: hidden;
}
/* 目次のラッピング調整 */
.post-content {
display: block;
}
/* ワイド・フルワイドカードの調整 */
.kg-gallery-card,
.kg-width-wide,
.kg-width-full {
display: flex;
flex-direction: column;
align-items: center;
}
.kg-gallery-card > *,
.kg-width-wide > *,
.kg-width-full > *,
figure.kg-width-full img {
margin-left: -50vw;
margin-right: -50vw;
}
.post-full-content pre {
max-width: 0;
}
