無料WordPressテーマCocoon〜目次の数字表記をなくしてドットにする方法

目次に数字入りすぎで変えたいなぁ

アメブロに比べてWordPressの好きなところは
目次を自動的に作ってくれるところ✨

入力にも慣れてくると
堅さを感じる数字のみの目次レイアウトが気になる。

ピンクの線の部分ね。
数字ではなく●にしたかったのです!!

見出し前の番号はメインのタイトルのみにしたいっ!

スポンサーリンク

見出し2 (H2) を含め数字を消したい時

Cocoon設定 → 目次 → 目次ナンバーの表示

の項目をみると

・数字表示をなくす
・ドット(黒・白)
・四角(黒)

などを選ぶことができます。

しかしH2は含まないなど
選んだ見出しのみの数字表示をなくす場合には
CSSでの設定が必要になります。

見出し3 (H3) 以降の数字を消す

外観 → テーマファイルエディタ

の項目に
Cocoon Child:スタイルシート(style,css)
があるので

/*必要ならばここにコードを書く*/

以降にCSSを記入します。

↑この17行目以降に入力です。

作業前にバックアップは忘れずに!!

見出し3 (H3) 以降の数字表記を消す

H3の見出し以下の数字表記をなくすCSS

/** H3以下のタイトルナンバリング消去 **/
.article .toc-list > li li {
  list-style: none;
}

article : 要素
toc : 目次(Table of contents)
li : リスト(list item)

タイトルの先頭に「・」をつける

タイトルの先頭に「・」をつけるCSS

/** H3以下のタイトル冒頭をドットにする **/
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd; /*こちらで点の色を変更*/
  position: relative;
  margin-bottom: 2px;
 }

width/height:大きさ
display:表示形式(ブロック全体・横に並ぶ・幅と高さの指定の可否)
border-radius : 要素の四隅に角丸を適用
background : 好きな色に指定するときはここを変更

さいごに

HTMLもCSSも全くわからなくても
カスタムしたくなったらどうにかなる!!

後で何の目的で記載したかわからなくなるのを防ぐため
コードとして認識されないコメント↓

/** ここに自由に書いてね **/

を利用することをおすすめします。

コメント

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