「Table of Contents Plus」のデザインをカスタマイズする方法

Table of Contents Plusをカスタマイズする前に

Table of Contents Plusのデフォルトのデザインをカスタマイズすることを目的とする。

そのためには大きく分けて次の2つの設定が必要。

  • プラグインの設定画面での変更
  • CSSファイルに変更を加える

テーマのCSSファイルに変更を加えるため、他のテーマに変更する際は注意すること。

Table of Contents Plusの設定

ダッシュボードから「設定」>「TOC+」で設定画面を表示させる。

Table of Contents Plus 設定の場所

一般的な設定

「表示条件」の設定によっては見出しが表示されないので必要に応じて変更する。

「次の投稿タイプのときに表示」も同様に変更する。

「post」が投稿記事で、「page」が固定ページ。

上級者向けの設定

設定画面の下のほうにある「上級者向け」という項目を表示させる。

読み込ませるCSSファイルの指定

「CSS除外」にチェックを入れる。

これでプラグインが用意しているCSSファイルが出力されなくなる。

その分、テーマのCSSファイルに必要な設定を書き加えて対処する。

表示させる見出しの設定

「見出しレベル」も見出しを表示させたいものにチェックを入れる。

H2とH3だけでも、H4を加えてもいいだろう。

設定の変更参考画像

Table of Contents Plus 設定の変更

画像は一例なので必要に応じて変更すること。

Table of Contents Plus用のCSSカスタマイズ

CSSファイルの準備

プラグインのフォルダに含まれている「screen.css」の内容をコピーする。

テーマのCSSファイルを開き、一番最後にコピーした内容を貼り付ける。

最初のほうだと設定がリセットされてしまうので注意すること。

後述するが一応コピペ用のカスタマイズ済みのものも用意しておいた。

全体のカスタマイズ

#toc_containerで目次全体の要素が指定されている。

デフォルトの状態での設定は次のようになっている。

#toc_container {
	background:#f9f9f9;
	border:1px solid #aaa;
	padding:10px;
	margin-bottom:1em;
	width:auto;
	display:table;
	font-size:95%;
}

背景色のカスタマイズ

backgroundで背景色の変更ができる。

透明にするならtransparentにする。

background: transparent;

このように指定すれば背景色が透明になる。

ここで指定しなくてもプラグインの設定で透明にすることも可能。

枠のカスタマイズ

枠の太さや色はborderで指定する。

太さを0pxにすれば枠線無しになる。

余白(内側)のカスタマイズ

paddingで余白を設定できる。

padding:1em 2em;

このように2つの値を指定した場合は、「上下」「左右」の順番になる。

文字の大きさのカスタマイズ

文字の大きさはfont-sizeで変更する。

だが細かい指定は他の部分でも行われているため、ここだけでは十分なカスタマイズはできない。

中央寄せにする方法

次の2行を加えることで中央寄せになる。

margin-left: auto;
margin-right: auto;

バランスが悪くなる気がしなくもない。

リンクの装飾

デフォルトではリンクの装飾が次のように設定されている。

#toc_container a {
 text-decoration:none;
 text-shadow:none;
}

#toc_container a:hover {
 text-decoration:underline;
}

テーマの設定を引き継がせるなら、各項目の中身を削除する。

#toc_container a {
}

#toc_container a:hover {
}

カスタマイズ例

実際にカスタマイズした例を載せる。

#toc_container {
	background:#f9f9f9;
	border:1px solid #aaa;
	padding:1em 2em;
	margin-bottom:1em;
	width:auto;
	display:table;
	font-size:100%;
}

デフォルトの設定を少々変更した程度だ。

これでも余白のバランスが改善されたと思う。

タイトルのカスタマイズ

#toc_container p.toc_titleで目次のタイトルの部分が指定されている。

デフォルトの状態での設定は次のようになっている。

#toc_container p.toc_title {
	text-align:center;
	font-weight:700;
	margin:0;
	padding:0;
}

背景色のカスタマイズ

backgroundを加えることで背景色の指定ができる。

色だけならbackground-colorでも指定できるが、そこはお好みで。

background:#e0e0e0;

全体の背景色との兼ね合いで残念なデザインになってしまうので注意する。

枠のカスタマイズ

枠と書いたが下線のみといった指定も可能。

枠全体ならborderを、下線だけならborder-bottomを書き加える。

border-bottom: 1px solid #b0b0b0;

このようにすれば下線のみになる。

文字を左寄せにする

text-alignを次のように変更する。

text-align: left;

文字の太さを変更する

font-weightで文字の太さを指定している。

400にすれば標準的な太さになる。

normalでも400と同じ意味になる。

font-weight: 400;

文字の大きさを変更する

font-sizeを書き加える。

font-size: 1.1em;

大きさの指定方法は様々なので必要なら検索すること。

カスタマイズ例

実際にカスタマイズした例を載せる。

#toc_container p.toc_title {
	text-align:center;
	font-weight:700;
	margin:0;
	padding:0;
	border-bottom: 1px solid #b0b0b0;
}

下線を追加しただけだが、この程度のカスタマイズのほうがバランスは崩れない。

リストのカスタマイズ

行間(余白)のカスタマイズ

#toc_container ulと#toc_container liのmarginを変更する。

#toc_container ul,#toc_container li {
	margin: 4px;
	padding: 0;
}

階層構造の字下げをカスタマイズ

#toc_container ul ulのmargin-leftを変更する。

以下のデフォルトのままでも問題ないように思える。

#toc_container ul ul {
	margin-left:1.5em;
}

カスタマイズ例

コピペ用にカスタマイズ済みのCSSを用意してみた。

これまで部分的にカスタマイズ例を示してきたが、それらが反映されているとは限らない。

プラグインのCSSファイルからコピペしたまま使っていない要素も含まれている。

/*--------------------------------------
  Table of Contents Plus カスタマイズ用
--------------------------------------*/

#toc_container ul,#toc_container li {
	margin:0;
	padding:0;
}

#toc_container.no_bullets ul,
#toc_container.no_bullets li,
#toc_container.no_bullets ul li,
.toc_widget_list.no_bullets,
.toc_widget_list.no_bullets li {
	background:none;
	list-style-type:none;
	list-style:none;
}

#toc_container.have_bullets li {
	padding-left:12px;
}

#toc_container ul ul {
	margin-left:1.5em;
}

#toc_container {
	background:#f9f9f9;
	border:1px solid #aaa;
	padding:1em 2em;
	margin-top:2em;
	margin-bottom:1em;
	width:auto;
	display:table;
	font-size:100%;
}

#toc_container.toc_light_blue {
	background:#edf6ff;
}

#toc_container.toc_white {
	background:#fff;
}

#toc_container.toc_black {
	background:#000;
}

#toc_container.toc_transparent {
	background:none transparent;
}

#toc_container p.toc_title {
	text-align:center;
	font-weight:700;
	margin:0;
	padding:0;
	border-bottom: 1px solid #b0b0b0;
}

#toc_container.toc_black p.toc_title {
	color:#aaa;
}

#toc_container span.toc_toggle {
	font-weight:400;
	font-size:90%;
}

#toc_container p.toc_title + ul.toc_list {
	margin-top:1em;
}

.toc_wrap_left {
	float:left;
	margin-right:10px;
}

.toc_wrap_right {
	float:right;
	margin-left:10px;
}

#toc_container a {
}

#toc_container a:hover {
}

.toc_sitemap_posts_letter {
	font-size:1.5em;
	font-style:italic;
}

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です