GeneratePressに目次を追加した（SimpleTOC）

by

GeneratePressに目次機能を追加するために、SimpleTOCを追加しました。自分でカスタマイズするので、なるべく機能がシンプルなものを選びました。

SimpleTOCとは？

SimpleTOCは、WordPressのブログ記事に目次を簡単に追加できるプラグインです。長い記事を書いたとき、読者がどこに何が書いてあるか一目でわかるように整理してくれます。まるで本の最初にある「もくじ」のような役割を果たすのです。

このプラグインの素晴らしいところは、名前の通り「シンプル」なこと。余計な機能がなく、必要最小限の機能だけを持っています。これが、サイトの表示速度を遅くしない理由でもあります。

ユーザーからの高評価

SimpleTOCは多くのユーザーから高い評価を得ています。レビューを見ると、72件中70件が5つ星、2件が4つ星という素晴らしい結果です。まさに「いいものはいい」という評価の表れでしょう。

あるユーザーは、このプラグインを使った後、サイト訪問者の滞在時間が平均3分30秒以上に伸びたと報告しています。目次があると読者は興味のある部分にすぐジャンプでき、結果として記事をより深く読むようになるのです。

また、別のユーザーはフルサイトエディティング（FSE）のテンプレートでもしっかり動作すると評価しています。これは、最新のWordPress機能との互換性が高いことを示しています。

SimpleTOCの基本的な使い方

使い方はとても簡単です。WordPressのブロックエディター（記事を書くための画面）で「SimpleTOC」ブロックを追加するだけ。すると、記事内の見出し（H1～H6）を自動で集めて、きれいな目次を作ってくれます。

ブロックは「デザイン」カテゴリーの中にあります。最初は見つけにくいかもしれませんが、一度使えば簡単だとわかるでしょう。

カスタマイズ可能な設定

SimpleTOCには、いくつかの便利な設定があります。

まず、見出しの深さを調整できます。例えば「H3まで表示する」といった具合に設定可能です。大見出しだけを目次に表示したいときは浅く、細かい見出しまで表示したいときは深く設定します。

また、目次を番号付きリストにするかどうかも選べます。普通の箇条書きと番号付きリスト、どちらが読みやすいかはサイトのデザインによって変わってきます。

英語表記の非表示設定もあるので、日本語のサイトなら英語部分を隠せます。整理された見た目になるでしょう。

CSSでデザインをカスタマイズしよう

SimpleTOCの真価は、CSSでデザインを自由に変えられる点にあります。CSSとは、ウェブサイトの見た目を決めるコード言語です。少し難しく聞こえるかもしれませんが、以下のコードをコピーして使えば、誰でも素敵な目次が作れます。

/** 2025-04-10 目次をブログ一覧の非表示にする*/
.blog .widget ol.simpletoc-list {
   display:none;
}
.single .widget ol.simpletoc-list {
	position: fixed;
	width: calc((100vw - 40px) * 0.3);
	left: 30px;
	top: 120px;
}
/* TOC全体のリセット */
.simpletoc-title, .simpletoc-list, .simpletoc-list li, .simpletoc-list li a {
    margin: 0;
    padding: 0;
}
/* 階層ごとのインデント調整 */
.simpletoc-list > li { padding-left: 0; }
.simpletoc-list > li li { margin-left: 20px; } /* 第二階層 */
.simpletoc-list > li li li { margin-left: 40px; } /* 第三階層 */Code language: CSS (css)

「階層ごとのインデント調整」では、見出しのレベルによって左からの距離を変えています。第一階層はそのまま、第二階層は少し右に、第三階層はさらに右に配置されるイメージです。これにより、階層構造が視覚的にわかりやすくなります。

カスタマイズ手順

実際にカスタマイズするのは簡単です。次の手順で行いましょう。

  1. WordPressの管理画面から「外観」→「カスタマイズ」を選びます
  2. 「追加CSS」というセクションを見つけます
  3. 上記のCSSコードをそのままコピーして貼り付けます
  4. 「公開」ボタンを押して保存します

これで完了です。すぐに目次のデザインが変わっているはずです。

色やサイズが自分の好みと違う場合は、コード内の数値や色コードを変更しましょう。例えば、#12A7CCの部分を別の色コードに変えれば、背景色や枠線の色が変わります。

まとめ：シンプルだからこそ使いやすい

SimpleTOCの最大の魅力は、その名の通りシンプルな点です。余計な機能がなく、本当に必要な「目次を作る」という機能に絞られています。

サイトの表示速度を重視する人や、自分でデザインをカスタマイズしたい人には特におすすめです。簡単な設定とCSSの調整だけで、プロフェッショナルな目次が作れます。

読者にとって使いやすいサイトは、長く読まれるサイトになります。SimpleTOCで目次を追加して、あなたのサイトも読者に優しいものにしてみませんか？シンプルな一歩が、大きな変化を生み出すこともあるのです。