table of contents plusのcssのカスタマイズやデザイン(WordPressのプラグイン)

WordPressのプラグインで有名なtable of contents plusのcssのカスタマイズやデザインなどをまとめておきます。覚書をかねています。

table of contents plusのwordpressサイト

目次を自動で生成する、強力でユーザーフレンドリーなプラグインです。 全てのページとカテゴリーリストを表示するサイトマップも出力することができます。
スポンサーリンク

電子書籍のおすすめ比較

table of contents plusのアンカーを綺麗にあわせる方法

小ネタです。table of contents plusのジャンプ先の位置がずれるため、アンカーの調整をしました。その他、フォントサイズや行間など細かい調整を行いました。

ジャンプすると、見出しの下にあわさります。 見出しのマージンなども見出しにより、違うため調整が必要ということですね。

初期値の30はWordpressのツールバーの高さのようです。

「Enable smooth scroll effect」をチェックしていると 上級者設定の方に「Smooth scroll top offset」という項目が追加されます。 オフセットが調整できるわけですね。^^

面倒くさいので、基本的に英語で使っているのですが、日本語化した場合

「スムーススクロール」をチェックしていると、 上級者向けの「スムーススクロール先の余白」が追加されています。

移動中にユーザーがマウスをまわす可能性もあるため、多少ゆとりを持って設定した方がいいかもしれません。

あとキャッシュ系のプラグインを利用していたらキャッシュをクリアすること。

スポンサーリンク

table of contents plusの行間

ついでにtable of contentsの行間も調整すると綺麗に見えます。 設定にはないため、cssに追加ですね。

/* table of contents plusの行間 */
#toc_container li {line-height: 1.8;}

table of contents plusのフォントサイズのcssが効かない

通常、プラグインの管理画面からフォントサイズを指定すれば終わりですが、とあるテーマでフォントサイズのcssが効かない状態になりました。結局、スタイルシートで直接書き換えました。

.toc_list a {
	font-size: 22px;
	line-height: 1.8;
}

また、上級者向けの設定に、

CSS除外 プラグインのCSSを読み込まない場合チェックを入れてください。

のチェックボックスもあります。こちらチェックを入れると、背景や中央寄せも消えて1からcssをカスタマイズできるようです。

スポンサーリンク

table of contents plusの番号振りのカスタマイズ、h3の見出しの番号がうざいため削除してアイコンを置き換え

h3の見出しが増えるにつれ、2-1、2-2のような表記がうざったくなりました。そこで数字を削除して別アイコンを追加します。アイコンはFontAwesomeで対応します。

/* table of contents plusのh3の数字を削除し、FontAwesomeでアイコンを追加 */
span.toc_number.toc_depth_2 {
	display: none;
}
#toc_container ul ul li:before{
	font-family: FontAwesome;
	font-size: 18px;
	content: "\f040";
}

table of contents plusの設定にある、番号振りのチェックはもちろん入ったままです。

simplicityはFontAwesomeが入っていたため、何もせずコードを書くだけで簡単に対応できましたね。

このプラグインは設計が美しく、ほんとすごーくよくできていると思います。^^

スポンサーリンク

フォローする

スポンサーリンク