WordPress の目次デザインをおしゃれにカスタマイズ

ブログ運営と改善

WordPress の目次デザインをおしゃれにカスタマイズ

この記事は約 9 分で読めます。

ユウキです。

ブログのユーザビリティ(使いやすさ、見やすさ)を改善したい場合に、目次があると便利ですよね。

今回は、見出しから目次とリンクを自動生成してくれる Table of Contents Plus を使った設定方法と、CSS によるデザインのカスタマイズについて解説します。

便利なオプションのサイトマップ生成機能やショートコードも紹介するので、参考にしてみてください。

この記事が役に立つ読者
  • ブログのユーザビリティを向上させたい方
  • 記事本文やウィジェットに目次を設置したい方
  • HTML サイトマップ(記事一覧)を設置したい方

プラグインのインストール

はじめに WordPress のプラグインから新規追加で Table of Contents Plus を検索してインストール、有効化します。

Table of Contents Plus をインストール

Table of Contents Plus の設定

プラグインを有効化したら次の項目の通り設定すると、目次の自動生成ができます。

項目 設定
位置 最初の見出しの前(デフォルト)
表示位置 2つ以上見出しがあるとき
コンテンツタイプ post と page にチェック
見出しテキスト 目次、コンテンツなど
切替テキスト 表示と非表示、開くと閉じるなど
階層表示 チェックする
番号振り チェックする
ハイフン チェックする
見出しレベル h2 と h3 にチェックする

設定を開いたら画像を参考に編集します。

Table of Contents Plus の設定を編集

項目の編集を進めたら、下部の【上級者向け】の【hide】をクリックして追加設定項目を開き、編集して【設定を更新】をクリックすれば完了です。

上級者向けの設定項目を編集して更新する

目次のデザイン変更

設定が完了した時点の目次は次のような状態です。

Table of Contents Plus で自動生成された目次

このままでも問題ありませんが、デザインを変えたい場合、設定項目の【CSS ファイルを除外】にチェックして、

CSS ファイルを除外にチェックする

【カスタマイズ】の【追加 CSS】か、TCD テーマを使っている場合は【テーマオプション】の【カスタム CSS】に任意のコードを追加します。

TCD テーマオプションのカスタム CSS にコードを追加

TCD テーマの「Be」と「MAG」を使っていれば、次のデザインサンプルをコピペすると、目次の見た目が当サイトと同じように変わります。カラーなどは好みに応じて変更してみてください。

記事本文の目次

記事本文の目次デザイン

全体は中央寄せ。目次タイトルの左にアイコンを配置して、各項の数字に背景色をつけたデザインです。

CSS
/* 目次全体 */
#toc_container {
	display: table;
	margin: 2em auto;
	padding: 2em 3em;
	background: #f9f9f9;
	border: solid 2px #aaa;
	border-radius: 4px;
	box-sizing: border-box;
	min-width: 70%;
}

/* リスト装飾を無効化 */
#toc_container li {
	list-style-type: none;
	list-style-image: none;
}

/* 目次の見出しタイトル */
#toc_container .toc_title {
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
}

/* 見出しタイトル左のアイコン */
#toc_container .toc_title::before {
	position: relative;
	font-size: 28px;
	content: "\2254";
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 1.4;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: baseline;
	speak: none;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	background-color: #4c4c4c;
}

/* 表示・非表示の切替 */
#toc_container .toc_toggle a {
	font-size: 14px;
	font-weight: normal;
	padding: 2px 4px;
}

/* 目次エリア */
#toc_container p.toc_title + ul.toc_list {
	padding: 2em 0 0;
	margin: 2em 0 0;
	border-top: solid 1px #aaa;
	font-size: 14px;
}

/* 目次リストの共通スタイル */
#toc_container ul.toc_list li {
	padding: 0;
	margin: 0;
}

/* 目次リンク */
#toc_container ul.toc_list li a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	margin: 6px 0;
	line-height: 2;
	transition: all .3s ease;
}

/* 目次リンクのマウスオーバー時 */
#toc_container ul.toc_list li a:hover {
	opacity: .6;
	text-decoration: none;
}

/* 親の目次 */
#toc_container ul.toc_list > li > a {
	font-weight: bold;
	margin-left: 30px;
	/*color: #666;*/
}

/* 番号付きリストの共通スタイル */
#toc_container .toc_number {
	display: inline-block;
	text-align: center;
	font-size: 13px;
	color: #fff;
	background: #4c4c4c;
}

/* 親の番号付きリスト */
#toc_container .toc_number.toc_depth_1 {
	position: absolute;
	top: 0px;
	left: -32px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

/* 子の目次 */
#toc_container ul.toc_list > li > ul  > li > a {
	margin-left: 30px;
	padding: 0 0 .2em;
	line-height: 1.4;
}

/* 子の番号付きリスト */
#toc_container .toc_number:not(.toc_depth_1) {
	position: absolute;
	top: -2px;
	left: -32px;
	width: 24px;
	height: 24px;
	font-size: 10px;
	line-height: 2.2;
	border-radius: 50%;
}

/* 子の目次エリア */
#toc_container ul.toc_list > li > ul {
	margin: 0 0 1em 2em;
}

/* レスポンシブ設定 */
@media only screen and (max-width: 667px) {
	#toc_container {
		padding: 20px 3vw;
		min-width: auto;
		width:100%!important;
	}
	#toc_container p.toc_title+ul.toc_list {
		margin: 20px 10px 0;
		padding: 20px 0 0;
	}
}

ウィジェットの目次

ウィジェットの目次デザイン

背景を白くして、目次の各項の数字に背景色をつけたデザインです。

CSS
/* サイドバー目次全体 */
.toc_widget {
	background: #fff;
}

/* 目次の表示エリア */
.toc_widget .toc_widget_list {
	max-height: 600px;
	overflow-y: auto;
	padding: 0 1em 1em;
	font-size: 14px;
}

/* 目次リストの共通スタイル */
.toc_widget ul.toc_widget_list li {
	margin: 0;
	padding: 0;
}

/* 目次リンク */
.toc_widget ul.toc_widget_list li a {
	position: relative;
	display: inline-block;
	text-decoration: none;
	margin: 6px 0;
	line-height: 1.6;
	transition: all .3s ease;
}

/* 目次のリンクカラー */
.toc_widget ul.toc_widget_list a,
#toc-widget-2 ul.toc_widget_list a:visited {
	color: #666;
}

/* 目次リンクのマウスオーバー時 */
.toc_widget ul.toc_widget_list a:hover {
	opacity: .6;
	text-decoration: none;
}

/* 親の目次 */
.toc_widget ul.toc_widget_list > li > a {
	font-weight: bold;
	margin-left: 30px;
}

/* 番号付きリストの共通スタイル */
.toc_widget .toc_number {
	display: inline-block;
	text-align: center;
	color: #fff;
	background: #666;
}

/* 親の番号付きリスト */
.toc_widget .toc_number.toc_depth_1 {
	position: absolute;
	top: -1px;
	left: -30px;
	width: 24px;
	height: 24px;
	font-size: 12px;
	line-height: 2;
	border-radius: 50%;
}

/* 子の目次 */
.toc_widget ul.toc_widget_list > li > ul  > li > a {
	margin-left: 30px;
	font-size: 13px;
	line-height: 1.4;
}

/* 子の番号付きリスト */
.toc_widget .toc_number:not(.toc_depth_1){
	position: absolute;
	top: -2px;
	left: -34px;
	width: 24px;
	height: 24px;
	font-size: 10px;
	line-height: 2.2;
	border-radius: 50%;
}

/* 子の目次エリア */
.toc_widget ul.toc_widget_list > li > ul {
	margin: 0 0 1em 2.4em;
}

/* レスポンシブ設定 */
@media only screen and (max-width: 667px){
	.toc_widget .toc_widget_list {
		padding: 0 3vw 1em;
		min-width: auto;
	}
}

ウィジェット目次を追尾させたい場合

当サイトのように、パソコン表示でウィジェットに設定した目次を追尾させたい場合、プラグインの新規追加から Q2W3 Fixed Widget を検索してインストール、有効化します。

Q2W3 Fixed Widget をインストール

有効化したら画像を参考に次の項目を設定します。

項目 設定
上マージン ウィジェット上側の余白
下マージン ウィジェット下側の余白
停止 ID HTML の指定 ID で追尾停止

Q2W3 Fixed Widget の設定

停止 ID は記述ミスを避けるため、次のテキストをコピペに利用されてください

TCD「MAG」はこちら。


footer

TCD「Be」はこちら。


l-footer

WordPress テーマによって若干、設定内容は変わるので、Chrome の検証機能などを使って調べながら設定してみてください。

補足:利用できるショートコード

Table of Contents Plus で利用できるショートコードをからよく使うものを紹介します。

ここではショートコードが機能しないように * を加えているので、コピペする際は削除してください。

目次の非表示

任意の投稿、もしくは固定ページで目次を表示したくない場合、


[*no_toc]

と表記すると非表示になります。

HTML サイトマップの自動生成

固定ページで次のショートコードをコピペすると、投稿を日付順に並べた HTML サイトマップがつくれます。


[*sitemap_posts separate="false" orderby="date"]

自動更新で管理が楽なので、Table of Contents Plus を利用していればユーザビリティ向上の目的で使ってみてください。

まとめ

今回のプラグイン設定はブログの見やすさを改善して、ユーザーが目的の情報に辿り着きやすくするためのカスタマイズでした。

目次や HTML サイトマップに限らず、ユーザビリティの向上を意識して WordPress のカスタマイズをしてみてください。

Table of Contents Plus 以外のプラグインについてもまとめているので、こちらを参考にどうぞ。

それでは、今回はこの辺で。

ありがとうございました!

この記事のタイトルとURLをコピーする

関連記事

  1. TCD は SEO に弱いのか? H タグの使い方と修正方法

    ブログ運営と改善

    TCD は SEO に弱いのか? H タグの使い方と修正方法

    ユウキです。「 TCD のテーマって SEO 対策で不利って聞いた…

  2. WordPress の head 内を整理してモバイル表示速度を改善する

    ブログ運営と改善

    WordPress の head 内を整理してモバイル表示速度を改善する

    ユウキです。今回は WordPress でつくった Web サイト…

  3. AddQuicktag の設定と表示されない場合の解決方法

    ブログ運営と改善

    AddQuicktag の設定と表示されない場合の解決方法

    ユウキです。今回は AddQuicktag の使い方について解説し…

  4. robots.txt is not valid 4 errors found の解決方法

    ブログ運営と改善

    robots.txt is not valid 4 errors found の解決方法

    ユウキです。TCD「Be」を使ったウェブサイトで Lighthou…

  5. 画像が重いなら EWWW Image Optimizer で解決

    ブログ運営と改善

    画像が重くて表示が遅いなら EWWW Image Optimizer で解決

    ユウキです。サイト表示速度が遅い場合、画像が重いことが原因の可能性…

  6. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ブログ運営と改善

    WordPress のセキュリティ対策をするなら SiteGuard WP Plugin

    ユウキです。WordPress のセキュリティ対策ってされています…

管理人
Blog de Affili の管理人ユウキ

ユウキと申します。

経歴は飲食サービス業のマネージャー、プロップトレーダー、オンラインサロン講師などをしていましたが、組織や人間関係にうんざりして、やりたくないことを捨てました。

ブログアフィリエイトを始めたばかりの頃は 1 年で利益 8000 円。(しょぼ笑)

その後、システム構築やマーケティングを学んで、 3 ヶ月で作った仕組みから 698 万円の売り上げを達成しました。

現在は個人向けにオウンドメディア構築やウェブマーケティングをコンサルしています。

稼いでも時間や人間関係に縛られていたらしんどいだけ。ブログでそこそこ稼いで、ゆったり自分らしく暮らしましょう。

最近の記事
  1. WordPress の目次デザインをおしゃれにカスタマイズ
  2. WP Mail SMTP で Contact Foam 7 のメールが届かない問題を解決
  3. Contact Form 7 の設定とカスタマイズを解説
  4. robots.txt is not valid 4 errors found の解決方法
  5. WordPress のセキュリティ対策をするなら SiteGuard WP Plugin
惹きつけるブログはデザインから生まれる
WordPress テーマ Be(TCD076)のレビュー
PAGE TOP