見ていただきありがとうございます。ぽぽです。
Cocoonの目次で、こんなところで止まっていませんか。
- h3の番号だけ消したい
- 目次の色を変えたい
- 番号がごちゃごちゃして見える
※h2は記事の大きい見出し、h3はその中の小さい見出しのことです。
私もまさにここで止まった側です。
トランクルームのブログをCocoonで書いていたころ。
目次の番号がごちゃごちゃして見えて、スッキリさせたかったんです。
いろいろ調べて、結局あきらめました😇
一応先にお伝えしておくと、こうです。
| やりたいこと | Cocoonの設定画面で |
|---|---|
| 番号の形を変える（数字・点・なし） | できる |
| h3の番号だけ消す | できない |
| 目次の色を変える | 設定の項目がない |
| 目次に出す見出しを減らす | できる（h2までなど） |
ということで、Cocoonの目次で「設定でできること」と「できないこと」を、順番に書いていきます。
- 過去の自分：Cocoonでトランクルームのブログを運営。目次の番号で止まった
- いま：SWELLでブログ4年目
Cocoonの目次は、どこで変える？
Cocoonの目次は、管理画面のCocoon設定にある「目次」タブで変えます。
| 押す場所 | どうなるか |
|---|---|
| Cocoon設定 →「目次」タブ | 目次の設定が開く |
| 項目を変えて「変更をまとめて保存」 | ブログ全部の目次が変わる |
1記事ずつではなく、全部の記事にまとめて効きます。
設定でできること
目次タブで変えられるのは、主にこの6つです。
| 項目 | 選べること |
|---|---|
| 目次の表示 | 出す・出さない。投稿・固定ページ・カテゴリー・タグごとにも選べる |
| 目次タイトル | 「目次」の文字を変える |
| 目次切り替え | 「開く」「閉じる」のボタンを付ける |
| 表示条件 | 見出しが何個以上で目次を出すか |
| 目次表示の深さ | h2まで・h3まで…h6まで |
| 目次ナンバーの表示 | 数字・数字詳細（1.1.1）・点・四角・なし |
（スケートボードのブログのCocoon設定で、実際の画面を確かめました）
最初の設定は、番号が「数字」、深さが「h6まで」。
何も触らないと、h2にもh3にも数字が付きます。
いま私のスケートボードのブログは、番号が最初の「数字」のまま。
深さは「h5まで」で、目次はページの真ん中です。
h3の番号だけ消すのは、設定ではできない
ここが、私が止まったところです。
「目次ナンバーの表示」は、目次全体に1つだけ。
h2は数字、h3はなし、のように段ごとには選べません。
選べるのは、この2つの逃げ道だけ
| やり方 | どうなるか |
|---|---|
| 番号を「表示しない」にする | h2の番号も消える |
| 深さを「h2まで」にする | h3が目次から丸ごと消える |
どちらも、h3の番号だけ消すのとは違うんですよね。
CSSなら、できるらしい
ネットで調べると、CSSというコードを書き足すやり方が出てきます。
でも私は、コードが怖くて触れませんでした。
サイトが壊れそうで、かまえなかったんです。
だから、h3の番号はそのまま。
ごちゃごちゃした見た目も、そのまま。
目次の色も、設定の項目がない
目次タブには、色を選ぶ項目がありません。
色を変えたい場合も、CSSの出番です。
番号と色。
私がやりたかった2つは、どちらもCocoonの設定画面の外でした。
コードが怖い人に、私が言えること
Cocoonでできる見た目の変更は、まずこの2つです。
- 番号の形を「数字」から「点」や「なし」に変える
- 深さを「h3まで」にして、目次を短くする
それでも足りなければ、CSSに進むか、ほかのテーマを見るか。
私が選んだのは、後のほうです。
SWELLにしたら、目次は「選ぶだけ」になった
テーマをSWELLに変えたのは、2024年1月。
SWELLの目次は、カスタマイズ画面で選ぶ方式です。
| 項目 | いまの私の設定 |
|---|---|
| 目次のデザイン | ストライプ背景 |
| 番号か点か | 番号 |
| 番号の部分の色 | 文字と同じ色 |
| 目次に出す見出し | h3まで |
| 長い目次 | 15個を超えたら「もっと見る」で隠す |
デザインと番号の色が、コードなしで選べます。
Cocoonで止まった「色」は、ここで片付きます。
SWELLの番号は、h2が「1」、h3が「10-1」の形。
段ごとに形が違うので、見分けやすいです。
初めて見たとき、めっちゃいいって思いました。
見た目がよかったので、いまもそのまま使っています。
正直に書いておくと、SWELLにも「h3の番号だけ消す」項目はありません。
番号か点か、の2つから選ぶだけです。
私の場合は、消したいと思わなくなりました。
CocoonとSWELLの画面の違いは、こちらで並べています。
SWELLを買うまで迷った話は、こちら。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ
- Cocoonの目次は「Cocoon設定 → 目次」タブで、ブログ全部まとめて変える
- 番号の形と、目次に出す深さは設定で変えられる
- h3の番号だけ消すのは、設定ではできない（CSSが必要）
- 目次の色を選ぶ項目もない
- 私はコードが怖くてあきらめた。SWELLにしてからは選ぶだけになった
Cocoonでも、番号の形と深さは今日から変えられます。
まずは目次タブを開いて、試してみてくださいね。
コメント