まとめ
- WordPressのテンプレート「Cocoon」でブログを書いている人向けの話
- Cocoonのスキン「イノセンス」では、目次がH3（中見出し）まで固定表示される
- 目次が長くなりすぎるのを防ぐため、H2（大見出し）までに変更したい
- 変更するには「スキン制御」を外す必要がある
- ダッシュボード → 外観 → テーマファイルエディター → skins → skin-innocence → functions.php
toc_depth => 3,をtoc_depth => 2,に書き換える
目次が長すぎて気になる問題
リトログではWordPressテーマ「Cocoon」のスキン「イノセンス」を使っています。
イノセンスは「大人可愛い」をテーマにしたデザインで、知的さと可愛らしさを両立している人気スキン。
とても気に入って使っているんですが、ブログを書いているうちに「目次が長すぎる」ことが気になってきました。
H2（大見出し）とH3（中見出し）をフルで拾ってしまうので、記事によっては画面いっぱいが目次で埋まることも…。
これ、読者からすると本文にたどり着く前にスクロール疲れで離脱される可能性もある。
リトログはタイパ重視でまとめを最初に書いている自分のスタイルともズレがあるので、どうにか目次をコンパクト化したいと思ったわけです。
Cocoonの設定からは変更できない？
「じゃあCocoon設定から直せばいいじゃん」と思ってダッシュボードから
Cocoon設定 → 目次 → 表示する深さ
の数値を変えてみました。
……が、変わらない。
というか、変えられない。
ここで初めて知ったのですが、イノセンスはスキン側で目次表示の深さを制御していて、設定画面からはいじれない仕様になっていました。
解決策は「functions.php」を編集する
どうにかならないか調べていたら、答えは身近なところにありました。
製作者、おはようポテトさんの公式サイトに答えがしっかり書いていました。
やり方はシンプル。スキンのfunctions.phpをちょっと編集するだけです。
少し前までさっぱりだった英語の羅列が少しわかるようになってきたよ
編集手順
① ダッシュボード（管理画面）から
外観 → テーマファイルエディター を選択
② 画面右側のテーマファイル一覧から
skins → skin-innocence → functions.php を開く
③ 23行目にあるこの部分を探す
'toc_depth' => 3, // 目次の深さ④ これを以下のように書き換える
'toc_depth' => 2, // 目次の深さ⑤ ファイルを更新して完了！
実際に変えてみた結果
修正後はこんな感じ。
目次がH2（大見出し）までになり、スッキリしました。
自分のブログのスタイルだとこの方が読みやすいし、何より「目次の圧迫感」がなくなったのが大きいです。
スキン制御について
ちなみにイノセンスでは、デザインの観点からいくつかの設定がスキンで制御されています。
- スニペットを非表示
- 目次の深さを3に固定（H3まで）
- パンくずリストの位置をアイキャッチ上に など
こうしたこだわりがあるからこそ、イノセンスのデザインは洗練されているんですね。
製作者様の意向に反してちょっと申し訳ないです(＾＾；)
まとめ：やっぱり書き方次第
目次をコンパクトにできて満足ですが、正直なところ目次が長いのは自分の書き方の問題。
とはいえ、私の執筆方法とズレがあるのもまた事実。
何よりブログは読者にとって読みやすい形に整えることが大事。
同じ悩みを持っているCocoonブロガーさんの参考になれば幸いです。
そして修正の際は間違えないようくれぐれもご注意ください！
コメント