2024.12.23

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

angleinc0913

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を活用してデザインをカスタマイズすることで、ブログのテーマに合わせたスタイリッシュな目次を作ることができます。ぜひ本記事の内容を参考に、自分のサイトに最適な目次デザインを作り上げてください！