オシャレな目次に! Table of Contents PlusをCSSでデザインカスタマイズ

2017-03-19WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

WordPressで便利なプラグイン、Table of Contents Plus。
インストールして有効化するだけで自動的に記事内の目次を生成してくれます。

デフォルトでいくつかデザインが用意されていますが、もっとカスタマイズしたい! という方のためにいくつかのパーツデザインを作成しました。
組み合わせて使ってみてください。

スポンサーリンク

事前準備

WordPress管理画面の設定 → TOC+ で、上級者向け項目内にある「CSS ファイルを除外」のチェックボックスにチェックを付けます。

チェックをオンにすることでCSSが0からのスタートとなるので、この記事を参考に装飾していってください。

Table of Contents Plusのためのパーツデザイン

ボーダーで囲む

基本形です。

○pxの数字を変更すると線の太さ、#の後ろのアルファベットを変更すると色を変えることができます。

ボーダーのスタイルを変更する

doubleという箇所をsolidに変えると実線、dashedにすると破線、dottedだと点線になります。

参考border-style …… ボーダーのスタイルを指定する – HTMLクイックリファレンス

ボーダーの角を丸める

余白を広げる

paddingの最初の数字で上下の余白、2番目の数字で左右の余白を指定してます。

影をつける

リンク色を変更

目次だけリンク色を変更する場合です。

タイトルを中央配置

タイトルに背景色をつける

display: inline-block; を削除すると枠の端から端まで背景色がつきます。

ちなみに、目次全体に背景色をつけたい場合は、#toc_container の中に background-color: を入れればOKです。

タイトルに下線をつける

タイトルの文字色を変更

.toc_titleでタイトル部分を、.toc_toggleで[]の部分の色が変更可能です。

リストの余白を調整

テーマによりますがリスト左側の余白が広い場合は狭めることが可能です。

ul.toc_listで大見出しの余白を、.toc_list ulで中見出しと小見出しの余白を指定してます。

リストマークを削除

リストマークをアイコンフォントに変更

WordPress管理画面の設定 → TOC+ で、番号振りのチェックをオフにしてます。

アイコンフォントは、Font Awesomeを使用してます。
SimplicityやLuxeritasをお使いの方はテーマ側で設定しているので、このCSSをコピペするだけで問題なく使用できます。

アイコンフォントが表示されないよ! という方は、FontAwesome 使い方 icon-external-link でググると幸せになれると思います。

参考Font Awesome Icons

リストに下線を表示

下線を引く場合、リストマークは非表示がおすすめ。(マークにまで下線が表示されないため)
CSSで非表示にしてます。

非表示/再表示しても同じ幅にする

見出しを非表示/再表示すると、文字数に応じて幅も狭くなってしいます。それを回避して常に同じ幅で表示する指定方法です。

見出しを中央に配置する

画像だと分かりづらいですが、左右のmarginをautoにすることによって中央に配置してます。

おまけ

2017年6月現在、第0版で使用している目次のデザインソースコードです。

 

他にも「ここをこうしたい!」等ありましたら、質問受け付けてます。

こちらの記事もおすすめです