賢威8の目次をカスタマイズする方法【簡易エディター付き】

賢威8は記事事に目次を表示できます。
しかし見た目が一種類のため、個性的な見出しを表示することができません。
そこで今回は、賢威8で自分好みの目次をカスタマイズする方法をお伝えします。

賢威8の目次で設定できる項目

賢威8は、賢威の設定　＞　投稿設定で、目次の設定をおこないます。

設定できるのは、次の項目です。

項目	内容
目次の表示	目次を表示するかどうかのデフォルト値を設定する。投稿画面で個別に設定することも可能。
目次のタイトル	目次のタイトルを設定する。未入力の場合『目次』と表示される。
目次を表示する深さ	目次を表示する見出しタグの種類（範囲）を設定する。デフォルトは全て表示
目次の開閉設定	記事表示時、目次を開いた状態にするか閉じた状態にするか設定する。デフォルトは開いた状態で表示する表示

僕は目次を非表示にしておき、記事事に表示するかどうか判断しています。

賢威8の目次カスタマイズ

賢威8の目次設定では、見た目の変更はできないので、独自CSSを追加して自分好みの見た目を作りこみます。

目次は全ての記事に共通するので、今回お伝えするCSSは、

外観　＞　カスタマイズ　＞　追加のCSS

に入力して、賢威8のテンプレート全体に反映しましょう。

詳しくは次の記事の、2.サイト全体に独自スタイルを指定する場合を参考にしてください。

項目番号（連番）のカスタマイズ

h2だけ番号を付加して、他は番号なしにしたいなどありますよね。
まずは項目の番号についてカスタマイズしてみます。

目次番号の囲みの色を変更する

最初は目次番号を囲んでいる枠の色を変更してみます。

次のCSSで、枠の色を赤に変更できます。

他の色を使用したい場合、#f00を好きなカラーコードに変更してください。
色コードについては、次の記事が参考になります。

また枠を無色にする場合は、transparent を指定して下地の色を透過します。
文字の色が見えにくい場合は、colorプロパティで文字色を指定しましょう。

目次番号の囲みを丸くする

次は目次の番号を丸で囲ってみます。

border-radiusプロパティを50%にすることで、円になります。

50%をpxに変更すると、角が丸い枠になります。

目次番号を漢数字にする

目次番号が普通の数字ではおもしろくないという人は、漢数字や”いろは”にしてみましょう。

数字から漢数字に変更するには、次のようにCSSを追加します。

cjk-ideographicには、下表の値に変更できます。

使用できる値	内容（例）
decimal	数字（1,2,3）
decimal-leading-zero	2桁数字（01、02、03）
cjk-ideographic	漢数字（一、二、三）
hiragana	ひらがな（あ、い、う）
hiragana-iroha	いろは（い、ろ、は）
katakana	カタカナ（ア、イ、ウ）
katakana-iroha	イロハ（イ、ロ、ハ）
lower-alpha	アルファベット小文字（a、b、c）
upper-alpha	アルファベット大文字（A、B、C）
lower-romana	ローマ数字小文字（ⅰ、ⅱ、ⅲ）
upper-roman	ローマ数字大文字（Ⅰ、Ⅱ、Ⅲ）
lower-greek	ギリシャ文字（α、β、γ）

和風なサイトには”いろは”が似合うかもしれませんね。

2階層目(h3以降）や3階層目(h4以降）の数字を非表示にする

次のようにCSSを追加します。

このCSSを適用すると、2階層目(h3以降）の目次番号が全て非表示になります。

2階層目を表示して、3階層目(h4以降）を非表示するには次のCSSを使用してください。

2階層目以降に親の番号を付加する

2層目以降に親の番号を付加するには、contプロパティにcounters()関数を使用します。
※既存の関数はcounter()。複数形ではないことに注意。

counter()の2番目の引数は、番号を区切る文字です。
「-（ハイフン）」で区切りたいときは、counters(num,'-')となります。

また漢字などに変更したい場合は、次のように3番目に指定します。

賢威8での調整

賢威8は上の方法で親の番号を付加すると、番号と目次のテキストが重なってしまい見栄えが良くない。

次のようにpositionプロパティをrelativeにすることで、番号とテキストを並べて表示できます。

目次の見た目のカスタマイズ

次は賢威8目次の見た目をカスタマイズしてみます。

タイトル色・背景色を変更

まずはタイトル部分を次のように変更してみます。

文字色：色
背景：赤
枠の形：上部を角丸
開閉ボタンの色：白

　

色などはお好みのものに変更してみてください。

タイトルを右側に寄せると開閉ボタンと重なってしまうので、右側の余白を増やしています。
左側に寄せたいときは、text-align:leftを指定してください。

枠線・背景色を変更

次は目次の枠線を次のように、変更してみます。

枠線色：赤
枠線種：点線
枠線幅：2px
枠の形：全ての角を丸くする
背景色：薄いピンク
影：赤っぽい影をつける

枠線の指定については、次の記事を参考にしてください。

タイトルの上部を丸くしているので、枠も同じ半径を指定しています。

線の種類や背景の色で目次の印象が大きく変わります。

いろいろ試してみてください。

賢威8用目次カスタマイズエディター

ここまでに紹介した賢威8の目次カスタマイズを簡単な操作でおこなえるエディターを作成しました。
作成されたCSSは、お使いのサイトに貼り付けてご使用ください。