WordPressプラグイン「Table of Contents Plus」を使用して作成した目次のレイアウトとソースコード

2023年11月18日
コラム

コラム

1 はじめに
2 「Table of Contents Plus」を使用して作成した目次のレイアウト
3 「Table of Contents Plus」を使用して作成した目次のレイアウトのソースコード
4 他のHTML・CSS ・JavaScriptソースコード紹介記事まとめ

はじめに

実務経験でクライアント様に「ブログページに目次を追加してほしい。」とご依頼を受け、目次の作成をしました。

WordPressの「Table of Contents Plus」を使用して目次を作成しました。

「Table of Contents Plus」プラグインを使用すると、自動で目次を生成できるようになります。特にカスタムテーマでは目次の機能が作成されていないことが多いため、目次を作成したいときはこのプラグインを使用することをお勧めします。

逆に有料の「THE THOR」テーマなどでは目次機能が備わっているため、今回のプラグインを使用してしまうと競合が発生し、うまく動作しないことがあり得るので使用しないようにしましょう。

「THE THOR」テーマは目次機能だけではなく、特にSEOに強く、下記のような方々が作成したテーマとなっています。気になる方はぜひご覧になってください。

一流のWEBデザイナー・SEOコンサルタント・月間数百万円稼ぐアフィリエイター・年間1000万円稼ぐブロガーなど、各界の精鋭が集い、彼らの知識とノウハウを余すことなく詰め込みました。

引用：【THE THOR（ザ・トール）】（PR）

「Table of Contents Plus」を使用して作成した目次のレイアウト

目次 [ 非表示 ]

「Table of Contents Plus」を使用して作成した目次のレイアウトのソースコード

htmlはプラグインで自動生成されるものです。cssはプラグイン側で用意されているcssがあるため、そのcssを打ち消す形で作成しています。

<div id="toc_container" class="no_bullets">
	<p class="toc_title">目次
		<span class="toc_toggle">
			<span class="toc_brackets">[</span>
			<a href="#">非表示</a>
			<span class="toc_brackets">]</span>
		</span>
	</p>
	<ul class="toc_list">
		<li>
		<a href="#">
			<span class="toc_number toc_depth_1">1.</span>
			見出し1
		</a>
		<ul>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">1.1</span>
					見出し1.1
				</a>
			</li>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">1.2</span>
					見出し1.2
				</a>
			</li>
		</ul>
		</li>
		<li>
		<a href="#">
			<span class="toc_number toc_depth_1">2.</span>
			見出し2
		</a>
		<ul>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">2.1</span>
					見出し2.1
				</a>
			</li>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">2.2</span>
					見出し2.2
				</a>
			</li>
		</ul>
		</li>
		<li>
		<a href="#">
			<span class="toc_number toc_depth_1">3.</span>
			見出し3
		</a>
		<ul>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">3.1</span>
					見出し3.1
				</a>
				<ul>
					<li>
						<a href="#">
							<span class="toc_number toc_depth_3">3.1.1</span>
							見出し3.1.1
						</a>
					</li>
					<li>
						<a href="#">
							<span class="toc_number toc_depth_3">3.1.2</span>
							見出し3.1.2
						</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">3.2</span>
					見出し3.2
				</a>
			</li>
		</ul>
		</li>
		<li>
		<a href="#">
			<span class="toc_number toc_depth_1">4.</span>
			見出し4
		</a>
		<ul>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">4.1</span>
					見出し4.1
				</a>
			</li>
			<li>
				<a href="#">
					<span class="toc_number toc_depth_2">4.2</span>
					見出し4.2
				</a>
			</li>
		</ul>
		</li>
	</ul>
</div>

div#toc_container {
    padding: 0;
    background: #fff;
    border: 3px solid #094;
    border-radius: 2px;
    display: block!important;
}
#toc_container .toc_title {
    font-size: 24px;
    background: #094;
    color: #fff;
    margin-bottom: 0;
    font-weight: bold;
}
/* 目次の表示と非表示を切り替えるボタンを表示させる場合は削除してください。 */
.toc_toggle {
    display: none;
}
/* 目次の表示と非表示を切り替えるボタンを表示させる場合はコメントアウトを解除してください。
span.toc_toggle {
    background: #fff;
    color: #333;
    font-size: .6em !important;
    padding: 0 8px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 5px;
    display: inline-block;
    transform: translateY(-2px);
}
span.toc_toggle a {
    color: #333;
    text-decoration: none !important;
} 
*/
#toc_container .toc_list > li ul {
    margin-top: 10px;
    margin-left: 17px;
    margin-bottom: 17px;
    padding: 0 10px;
    color: #094;
}
#toc_container .toc_list> li >ul li {
    font-size: 18px;
    margin-bottom: 8px;
    padding-left: 10px;
    line-height: 1.3;
}
#toc_container .toc_list> li a {
    font-size: 14px;
    font-weight: bold;
    color: #333;
}
#toc_container .toc_list li ul li > a::before,
#toc_container .toc_list li ul ul a::before {
    content: "";
    margin-right: 5px;
    opacity: 0.5;
    display: inline-block;
    height: 10px;
}
#toc_container .toc_list li ul li > a::before {
    border-left: 6px solid #333;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
#toc_container .toc_list li ul ul a::before {
    border-top: 2px solid #333;
    border-right: 2px solid #333;
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
    transform: rotate(45deg);
    width: 8px;
    height: 8px;
}
#toc_container .toc_list > li {
    position: relative;
    margin-bottom: 18px;
    font-size: 18px;
    line-height: 1.3;
    padding-left: 24px;
}
#toc_container .toc_list > li > a {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}
/* 目次の左側に数字を表示させたい場合は以下を削除してください。 */
.toc_number {
    display: none;
}