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

angleinc0913

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

SimpleTOCとは

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

SimpleTOCの使い方

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

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

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

SimpleTOCのカスタマイズ 3選

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

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

すっきり万能デザイン

どのサイトでも使えるシンプルなデザインです。

CSSは次の通りです。背景色はお好みに合わせて変えてみてください。

/* TOCカスタマイズ */

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

.simpletoc-title {
　　background: #F2F5F6; /* 目次の背景色 */
　　color: black;
　　padding-left: 20px;
　　margin-top: 20px;
　　padding-top: 10px;
　　margin-bottom: 0px;
　　font-size: 1.2em;
}

.simpletoc-list {
　　padding: 4px 20px 16px 0px;
　　margin-bottom: 30px;
　　background: #F2F5F6; /* 目次の背景色 */
}

.simpletoc-list a {
　　color: black;
}

.simpletoc-list li {
	padding-left: 20px;
}

シンプル&洗練されたボックスデザイン

ブログやオウンドメディアでもよく見かけるボックスタイプのデザインです。枠線と文字色をサイトのテーマカラーと揃えることで、まとまった雰囲気を出すことができます。

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 0px;
　　margin-bottom: 30px;
}

.simpletoc-list a {
　　color: #12A7CC;
}

.simpletoc-list li {
	padding-left: 20px;
}

存在感のあるポップなデザイン

目次を破線で囲んだポップなデザインです。カーソルを当てると下線が表示されます。

/* TOCカスタマイズ */

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

.simpletoc-title {
	background: #f7fff7; /* 目次の背景色 */
	color: #98D1B2; /* 目次タイトルの文字色 */
	padding-left: 20px;
	margin-top: 20px;
	padding-top: 10px;
	margin-bottom: 0px;
	font-size: 1.4em;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border: 3px dotted #98D1B2; /* 破線の色 */
	border-bottom: none;
}

.simpletoc-list {
	padding: 4px 20px 16px 0px;
	margin-bottom: 30px;
	background: #f7fff7; /* 目次の背景色 */
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	border: 3px dotted #98D1B2; /* 破線の色 */
	border-top: none;
}

.simpletoc-list a {
	color: #555555;
	text-decoration: none;
	font-weight: 600;
}

.simpletoc-list a:hover {
	text-decoration: underline;
}

.simpletoc-list li {
	padding-left: 20px;
}

まとめ

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