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のおしゃれなカスタマイズ・デザイン

table of contents plusの行間

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

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

table of contents plusで数字を消してアイコンに置換

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

span.toc_number.toc_depth_2 {
  display: none;
}

#toc_container .toc_list > li > ul > li {
  list-style-type: disc;
}

アイコンに切り替えたい場合、FontAwesomeを使う方法があります。擬似要素のbeforeを使います。

/* 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の設定にある、番号振りのチェックは入ったままです。

この方法以外に番号振りのチェックやtable of contents plusのcssを使わない方法もあります。

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

table of contents plusのタイトルの横にアイコンを追加

デザイン的に物足りないので、table of contents plusのタイトルの左にアイコンを追加することにしました。

FontAwesomeを利用しています。simplicityなどテーマによってはデフォルトで入っています。

#toc_container .toc_title::before {
	position: relative;
	font-family: FontAwesome;
	font-size: 14px;
	content: "\f0ca";
	display: inline-block;
	width: 40px;
	line-height: 40px;
	margin-right: 8px;
	border-radius: 50%;
	vertical-align: baseline;
	speak: none;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	background-color: #5f7b96;
}

table of contents plusでタイトルを左寄せ

タイトルを左寄せする方法です。

#toc_container .toc_title {
    display: inline-block;
    position: relative;
    margin: 0 0 0 40px;
}
スポンサーリンク

おしゃれなカスタマイズ・デザイン(table of contents plusのcssを使用しない編)

table of contents plusでは、デフォルトのcssを読み込まない設定があります。より思い通りにデザインをカスタマイズする場合、こちらの方がいいかもしれません。読み込まない設定にしない場合、!importantなどが必要になる場合があり、cssが反映されない場合もあります。あと、わずかながら余計なcssを読み込まないため、こちらの方が軽くなります。

table of contents plusの設定

cssを読み込まない場合、table of contents plusの必要な設定は2つです。

番号振り

チェックを外します。

CSS ファイルを除外 プラグインの CSS スタイルを読み込まない場合はチェックを入れてください。選択した場合、上の外観設定も無視されます。

チェックをいれます。

table of contents plusで簡単なデザインする

何もないので、背景ぐらいつけましょう。

#toc_container{
  background: #f9f9f9;
  box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
}

輪郭のcssも簡単に効くようになります。

#toc_container{
  border: solid 2px;
  border-color: #0d8797;
}

サンプルです。色、margin、paddingなどはお好みでデザインしてください。

table of contents plusで疑似要素beforeの連番

最初、他の方法で作ってしまいましたが、こういうカウンタあるんですね。css素人なので知りませんでした。。覚書です。

この方法で作成する場合は、table of contents plusの番号振りはいりません。

/* h2の見出し */
#toc_container .toc_list {
  counter-reset: li; /*数字をリセット。必須っぽい*/ 
}
#toc_container .toc_list > li {
  list-style-type: none;
}
#toc_container .toc_list > li:before {
  counter-increment: li; /*連番のカウンタ*/ 
  content: counter(li); /*表示する*/
}

サンプルです。めもるため必要最低限のコードだけ抽出しました。jinという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 plusのアンカー先にジャンプすると、一瞬表示されるけど、遷移先の記事の上部に戻るという、謎の現象が発生しました。

ただ、ちゃんと飛ぶアンカーもあるのです。

原因をさぐると、ブラウザの設定でjavascriptをオフにすると正常に動作します。

つまり、javascriptが悪さをしていることは確定。しかし、テーマやプラグインが原因ではなさそうです。

ちゃんと飛ぶアンカーもあるのです。という点を思い出しました。

はい。よくみたら、記事内にtwitterの埋め込みコードがありました。これ外したら解決しました。

twitterの埋め込みコードがjavascriptでした。

スポンサーリンク

table of contents plusのFAQ

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

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

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

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

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

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

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

ご参考になれば幸いです。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
Wordpress
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました