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

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

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

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

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

項目内容
目次の表示目次を表示するかどうかのデフォルト値を設定する。投稿画面で個別に設定することも可能。

目次のタイトル目次のタイトルを設定する。未入力の場合『目次』と表示される。

目次を表示する深さ目次を表示する見出しタグの種類(範囲)を設定する。デフォルトは全て表示

目次の開閉設定記事表示時、目次を開いた状態にするか閉じた状態にするか設定する。デフォルトは開いた状態で表示する表示

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

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

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

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

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

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

WordPress 追加CSS

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

賢威8で独自CSS(スタイル)を追加する方法

賢威8で独自CSS(スタイル)を追加する方法

賢威8は専用のスタイルが用意されていて、それを使えことでクオリティの高いサイトを構築できる。 しかしオリジナリティを出したいなら、スタイルを追加する必要があります。 そこで今回は、賢威8に独自にスタイルを追加する方法をお […]

続きを読む

項目番号(連番)のカスタマイズ

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

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

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

  • 1目次1:テキスト
  • 2目次2:テキスト
  • 1目次1:テキスト
  • 2目次2:テキスト

※目次番号枠の色を変更

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

CSS

.toc-area_inner .toc-area_list > li::before{
    background-color: #f00 !important;
}

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

cssの色指定は難しくない!ざっくり解説します

cssの色指定は難しくない!ざっくり解説します

Webサイトの色は、CSS(スタイル)で指定します。 しかし色の指定方法が独特で、はじめはよくわからないですね。 そこで今回は、CSSでの色指定についてざっくり解説します。 CSSをカラーコードで指定する CSSで色を表 […]

続きを読む

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

  • 1目次1:テキスト
  • 2目次2:テキスト
  • 1目次1:テキスト
  • 2目次2:テキスト

※目次番号枠を消す

CSS

.toc-area_inner .toc-area_list > li::before{
    background-color: transparent !important;
    color: inherit !important;
}

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

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

  • 1目次1:テキスト
  • 2目次2:テキスト
  • 1目次1:テキスト
  • 2目次2:テキスト

※目次番号枠を丸囲みにする

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

CSS

.toc-area_inner .toc-area_list > li::before{
    background-color: #f00 !important;
    border-radius: 50% !important;
}

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

  • 1目次1:テキスト
  • 2目次2:テキスト
  • 1目次1:テキスト
  • 2目次2:テキスト

※目次番号枠を角丸にする

CSS

.toc-area_inner .toc-area_list > li::before{
    background-color: #f00 !important;
    border-radius: 5px !important;
}

目次番号を漢数字にする

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

  • 1目次1:テキスト
  • 2目次2:テキスト
  • 目次1:テキスト
  • 目次2:テキスト

※目次番号を漢数字にする

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

CSS

.toc-area_inner .toc-area_list > li::before{
    content:counter(num,cjk-ideographic) !important;
}

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

使用できる値内容(例)
decimal数字(1,2,3)
decimal-leading-zero2桁数字(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以降)の数字を非表示にする

  • 1目次1:テキスト

    1h3:テキスト

    2h3:テキスト

  • 2目次2:テキスト
  • 目次1:テキスト

      h3:テキスト

      h3:テキスト

  • 目次2:テキスト

※h3以降の番号を非表示にする

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

CSS

.toc-area_inner .toc-area_list ol li:before {
    display: none;
}

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

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

CSS

.toc-area_inner .toc-area_list > li > ol > li li:before {
    display: none;
}

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

  • 1目次1:テキスト

    1h3:テキスト

    2h3:テキスト

  • 2目次2:テキスト
  • 1目次1:テキスト

       1.2 h3:テキスト

       1.3 h3:テキスト

  • 2目次2:テキスト

※子に親の番号を付加する

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

CSS

.toc-area_inner .toc-area_list ol li:before {
    content: counters(num,'.') !important;
}

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

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

CSS

.toc-area_inner .toc-area_list ol li:before {
    content: counters(num,'.',cjk-ideographic) !important;
}

賢威8での調整

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

賢威8 目次 調整

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

CSS

.toc-area_inner .toc-area_list ol li:before {
    content: counters(num,'.') !important;
    position: relative !important;
}

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

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

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

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

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

賢威8の目次 タイトル色・背景色をカスタマイズ
 

CSS

.toc_title{
    color:#fff; <=文字色
    background-color:#f00; <=背景色
    text-align:right; <=右寄せ(left:左)
    padding-right:40px;<=開閉ボタン分隙間を作る
    border-radius: 20px 20px 0 0;<=上部角丸設定
}
.toc-area_btn{
    color:#fff;<=開閉ボタン色
}

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

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

枠線・背景色を変更

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

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

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

CSS

.toc-area{
    border: 2px dotted #f00; <=枠線
    border-radius: 20px; <=枠線の角丸指定
    background-color:#FFECEC; <=背景色
    box-shadow: 5px 5px 5px rgba(255,0,0,.5); <=影指定
}

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

CSSのborderプロパティの使い方 基本から上下左右の見た目を変更まで

CSSのborderプロパティの使い方 基本から上下左右の見た目を変更まで

borderプロパティの基本 borderプロパティは、次のように指定します。 border: 幅 線種 線色; 幅・線種・線色は順不同です。 幅 単位をpxやthin(細い)、medium(普通)、thick(太い)で […]

続きを読む

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

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

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

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

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

  • 目次番号
  • 目次タイトル
  • 目次枠
    • 階層1
    • 階層2
    • 階層3
    •   
    •   


  • 枠線指定 


    影の指定 


  •    

    影の指定 


CSS