【コピペOK】目次で記事の読みやすさUP！WordPressのプラグイン「SimpleTOC」のカスタマイズ方法

SimpleTOCは、投稿記事の目次を簡単に作成できる便利なプラグインです。本記事では、SimpleTOCの基本的な使い方と、カスタムCSSを使用したデザインのカスタマイズ方法を解説します。

SimpleTOCとは

SimpleTOCは、WordPressで目次を簡単に追加できるブロックエディター対応のプラグインです。記事内に含まれる見出し（H2やH3など）を自動的に取得し、任意の場所に挿入することができます。複雑な設定は必要なく、動作が軽快で、ほかの目次プラグインに比べてシンプルなのが特徴です。

SimpleTOCの使い方

使い方は簡単で、プラグイン追加画面から「SimpleTOC」を検索、インストールして有効化するだけです。

記事編集画面で「SimpleTOC」ブロックを挿入するだけで目次が生成されます。

各記事ごとに目次タイトルと表示する見出しの範囲が変更できます。デフォルトでは次のようなシンプルなレイアウトが表示されます。

SimpleTOCのカスタマイズ

SimpleTOCのデフォルトのデザインはこんな感じです。

このままでもシンプルで見やすいですが、もう少し目次の存在感を出したいと思い、ボックス風にカスタマイズをすることにしました。

CSSは次の通りです。背景色と文字色、枠線をお好きな色に変えてみてください。

/* TOCカスタマイズ */
.simpletoc-title,
.simpletoc-list,
.simpletoc-list li,
.simpletoc-list li a {
　　margin: 0;
　　padding: 0;
　　/* デフォルトの設定をリセット */
}

.simpletoc-title {
　　background: #12A7CC; /* 目次タイトルの背景色 */
　　color: white; /* 目次タイトルの文字色 */
　　padding-left: 10px;
　　margin-top: 30px;
　　margin-bottom: 0px;
　　font-size: 1.2em;
}

.simpletoc-list {
　　border: 2px solid #12A7CC; /* 枠線の色 */
　　padding: 10px 20px 16px 20px;
　　margin-bottom: 30px;
}

.simpletoc-list > li {
    padding-left: 0; /* 第一階層は左余白なし */
}

/* 見出しの階層を可視化する */
.simpletoc-list > li > ul > li {
　　padding-left: 20px; /* 第二階層 (例)h3 */
}

.simpletoc-list > li > ul > li > ul > li {
　　padding-left: 40px; /* 第三階層 (例)h4 */
}

.simpletoc-list > li > ul > li > ul > li > ul > li {
　　padding-left: 60px; /* 第四階層 (例)h5 */
　　/* ...その他、必要に応じて階層を増やしてください */
}

まとめ

SimpleTOCは、軽量で簡単に目次を追加できる便利なプラグインです。デフォルトのシンプルなデザインでも十分実用的ですが、カスタムCSSを活用してデザインをカスタマイズすることで、ブログのテーマに合わせたスタイリッシュな目次を作ることができます。ぜひ本記事の内容を参考に、自分のサイトに最適な目次デザインを作り上げてください！

こんなお悩みありませんか？

「コミュニティを立ち上げたいけど、何から手をつければいいか分からない」
「オウンドメディアを立ち上げたけど、継続した更新が難しい」
「自社サイトに決済機能を導入したい」

Angle Inc.では、メディアやコミュニティの立ち上げ、運営支援を行っています。集客、運用からツールの活用方法まで、お困りのことがあればお気軽にお問い合わせください。